Flutter之自定义顶部Tab——Flutter基础系列

最新推荐文章于 2024-08-22 08:33:38 发布

houruoyu3

最新推荐文章于 2024-08-22 08:33:38 发布

阅读量1.8k

点赞数 3

分类专栏： flutter 文章标签： dart flutter

本文链接：https://blog.csdn.net/houruoyu3/article/details/111182508

版权

flutter 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在Flutter中创建两种类型的顶部导航栏：普通顶部导航栏和置于导航最顶部的TabBar。针对底部导航栏已设置Scaffold的情况，提出了解决重复顶部栏的方案，并详细展示了代码实现。同时，文章还列举了TabBar的各种参数配置选项，帮助开发者自定义顶部导航栏的外观和行为。

摘要由CSDN通过智能技术生成

需求：

顶部导航条的功能实现。

一、普通顶部导航栏

效果图:

DefaultTabController(
      length: 2,    //配置顶部tab的数量
      child: Scaffold(
        appBar: AppBar(
          title: Text("普通顶部导航栏"),
          bottom: TabBar(
              tabs: <Widget>[
                Tab(text: "热门"),
                Tab(text: "推荐"),
              ]
          ),
        ),
        body: TabBarView(  //点击bar对应的内容,第一个组件对应第一个bar,第二个对应第二个,以此类推
          children: [
            Center(
              child: Text("第一个页面"),
            ),
            Center(
              child: Text("第二个页面"),
            )
          ],
        ),
      ),
    );

二、TabBar放在导航最顶部

比如已经设置底部导航栏再设置其中页面的顶部导航栏出现问题: 因为底部导航栏已经使用过Scaffold设置了顶部栏目主题信息,再使用顶部导航栏时候还要使用Scaffold设置,这就导致了会有两个顶部栏目，即两个标题

解决方案: 将顶部导航栏的内容放置自身Scaffold的title中,而不是放到bottom中

效果图:

DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading:false,   //去掉顶部返回按钮
          title: Row(   //因为title接收组件,故在title中设置导航栏
            children: <Widget>[
              Expanded(
                  child: TabBar(
                    tabs: <Widget>[
                      Tab(text: '分类1'),
                      Tab(text: '分类2',)
                    ],
                  )
              )
            ],
          ),
        ),
        body:TabBarView(
          children: <Widget>[
            Text('分类111'),
            Text('分类222')
          ],
        ),
      ),
    );

顶部导航栏参数配置

在TabBar中与tabs同级设置

              isScrollable: false,   //是否可滚动
              indicatorColor: Colors.red,  //bar的下划线指示器选中颜色
              indicatorWeight: 3, //bar的下划线指示器的高度
              indicatorPadding:  EdgeInsets.all(8.0),  //bar的下划线指示器的padding
              labelColor: Colors.yellow,  //标签文字颜色
              indicatorSize: TabBarIndicatorSize.label, //下划线指示器与标签文字等宽,默认为tab与bar等宽
              labelStyle: TextStyle(), //标签文字样式
              labelPadding:  EdgeInsets.only(left: 8.0), //标签文字padding
              unselectedLabelColor: Colors.white,   //未选中文字标签颜色
              unselectedLabelStyle: TextStyle(),  //未选中文字标签样式