如何控制点击不同的Tab页,显示或者隐藏appbar
问题场景:
现在大多数的app都是一种布局,即下方三五个tab,点击切换上面对应的页面,在Android中一般用自定义或者tablayout联动viewpager去实现这个大致的ui框架,而在flutter可以用bottomNavigationBar + TabBar + TabBarView 或者是pageview ,那么我的问题就来了,我有四个tab,前三个用的一个appbar,在第四个不要了
问题分析:
appbar的显示隐藏肯定是要有一个地方控制,我们根据点击TabBar后的index去判断,当index = 3的时候隐藏tabbar,隐藏肯定是整个appbar,但是他没有android一样的visibility的属性,经查阅资料,我们需要用Offstage将appbar包起来,然后 offstage: true/false 属性去控制Offstage内部的显示隐藏
问题解决:
@override
Widget build(BuildContext context) {
return new Scaffold(
resizeToAvoidBottomPadding: true, // 重新布局避免被键盘盖住内容,默认true
appBar: PreferredSize(
child: Offstage(
offstage: controller.index == 3 ? true : false,
child: AppBar(
// 这里放自己的appbar内容
),
),
preferredSize: Size.fromHeight(50.0)),
body: new TabBarView(
controller: controller,
children: <Widget>[
new Page0(),
new Page1(db),
new Page2(),
Page3()
]),
bottomNavigationBar: Material(
color: const Color(0xFFF0EEEF), //底部导航栏主题颜色
child: SafeArea(
child: Container(
height: 65.0,
decoration: BoxDecoration(
color: const Color(0xFFF0F0F0),
boxShadow: <BoxShadow>[
BoxShadow(
color: const Color(0xFFd0d0d0),
blurRadius: 3.0,
spreadRadius: 2.0,
offset: Offset(-1.0, -1.0),
),
],
),
child: TabBar(
isScrollable: false,
controller: controller,
// indicatorColor: Theme.of(context).primaryColor,
//tab标签下划线颜色
indicatorColor: Colors.white,
//tab标签颜色
// labelColor: const Color(0xFFffff),
indicatorWeight: 3.0,
labelColor: Theme.of(context).primaryColor,
unselectedLabelColor: const Color(0xFF8E8E8E),
tabs: myTabs),
),
),
),
);
}
重点在上面的Offstage
----此博客仅为个人学习总结观点,如有问题欢迎评论探讨!