flutter 去掉Appbar上面一部分内容

问题描述

在使用appbar的时候不想添加上面的title,leading和actions,只想保留下面的bottom,Appbar结构如下
在这里插入图片描述
原导航栏代码:

DefaultTabController(
      //导航栏的长度
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: null,
          backgroundColor: Colors.red,
          centerTitle: true,
          //toolbarHeight: 56, //主要修改此参数,调整为bottom高度即可

          bottom: TabBar(
            indicatorColor: Colors.white70, //指示器的颜色
            labelColor: Colors.white, //选中文字颜色
            unselectedLabelColor: Colors.white60, //未选中文字颜色
            tabs: <Widget>[
              Tab(text: "时间"),
              Tab(text: "计划"),
              Tab(text: "待办"),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            _Planlist(),//第一个tab  body实现内容
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("第二个tab"),
                )
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("第三个tab"),
                )
              ],
            ),
          ],
        ),
      ),
    );

原效果:
在这里插入图片描述
修改核心:
可限制toolbar高度,内部描述preferredSize会将此高度作为appbar整体高度
toolbarHeight: 56
修改如下:

	AppBar(
          title: null,
          backgroundColor: Colors.red,
          centerTitle: true,
          toolbarHeight: 56,//主要添加此参数进行限制
          bottom: TabBar(
            // isScrollable: true, //可滚动
            indicatorColor: Colors.white70, //指示器的颜色
            labelColor: Colors.white, //选中文字颜色
            unselectedLabelColor: Colors.white60, //未选中文字颜色
            // indicatorSize: TabBarIndicatorSize.label, //指示器与文字等宽
            tabs: <Widget>[
              Tab(text: "时间"),
              Tab(text: "计划"),
              Tab(text: "待办"),
            ],
          ),
        ),

修改后效果
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值