Flutter学习笔记(三)

如何控制点击不同的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

---

----此博客仅为个人学习总结观点,如有问题欢迎评论探讨!