Flutter顶部的TabBar和Title中间增加点自定义内容

景裔

已于 2024-03-12 14:24:29 修改

阅读量445

点赞数 7

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

于 2024-02-29 14:44:54 首次发布

本文链接：https://blog.csdn.net/jingyi__/article/details/136370445

版权

Flutter 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、环境版本

Flutter版本：3.16.9

开发IDE：android studio 2023.1.1 Patch2

以下代码在Android中测试通过，iOS没有试过。以后升级啥的可能会和本方案会有出入，请自行甄别。

2、实现需求

需要在下图红色圈出的区域加点自定义的内容，比如图标、统计信息等。但网上找了好久没有合适的，难道没新手遇到这类需求？

3、实现代码示例

上图配套TabBar的实现代码：

appBar: AppBar(
              centerTitle: true,
              title:Text("202-33潘*珍的报警"),
              actions: [
                IconButton(
                  icon: Icon(Icons.filter_alt_outlined,color: Colors.black,),
                  onPressed: (){},
                )
              ],
              backgroundColor: const Color(0xFFff803a),
              bottom: TabBar(
                isScrollable:true,
                labelStyle: const TextStyle(fontSize: 20,color:Colors.white),
                unselectedLabelStyle: const TextStyle(fontSize: 16,color:Colors.black),
                tabs: alarmTabs, //见下面变量赋值部分
                indicatorColor:Colors.yellow[100],
              )

/// 以下代码写在变量定义区域，本文为方便，合在一起了
late List<Tab> alarmTabs = <Tab>[
        Tab(text: '全部'),
        Tab(text: '生理'),
        Tab(text: '动作'),
        Tab(text: '异常检测'),
        Tab(text: '设备'),
      ];

要在Title和TabBar中间加内容，这时就要用到PreferredSize组件了，用了之后效果如下，示例仅加了个图标进去，加增加复杂的统计信息，查询控件等，请自行在child中增加，非常方便，上效果：

只要把AppBar中的bottom属性原来放TabBar处换成RreferredSize，代码见下：

bottom: PreferredSize(
                preferredSize: Size(size.width,110),
                child: Column(
                  children: [
                    Container(
                      width: size.width,
                      height: 60,
                      padding: const EdgeInsets.only(top:0),
                      child: Column(
                        children: [
                          Icon(Icons.notification_important_outlined,size: 50,color:Colors.deepOrange[700]),
                        ],
                      ),
                    ),
                    TabBar(
                      isScrollable:true,
                      labelStyle: const TextStyle(fontSize: 20,color:Colors.white),
                      unselectedLabelStyle: const TextStyle(fontSize: 16,color:Colors.black),
                      tabs: alarmTabs,
                      indicatorColor:Colors.yellow[100],
                    )
                  ],
                ),
              )

要改显示内容，修改下图红色圈出部分，换成你自己的Widget布局即可。