美文网首页Flutter 知识点整理
flutter tabbar的显示处理

flutter tabbar的显示处理

作者: 跨界师 | 来源:发表于2021-07-07 23:12 被阅读0次

在使用tabBar做分页处理时,总会出现页面appbar重叠的情况,如下图:


Screen Shot 2021-07-07 at 11.05.14 PM.png

中间存在空白区域,看起来并不是特别好看,需要对页面布局进行调整。因此需要尝试在AppBar里面将tabBar设置到title属性上,这样就可以消除上述问题。

部分代码:

 return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Row(
            children: [
              Expanded(
                  child: TabBar(
                    tabs: [
                      Tab(text: "热门",),
                      Tab(text: "推荐",),
                      Tab(text: "短视频",),
                    ],
                  ),
              ),
            ],
          ),

        ),

这样展示出来的效果就是这样:


Screen Shot 2021-07-07 at 11.10.41 PM.png

其实设置还是比较简单,每天积累点新知识的经验,坚持不懈的学习下去还是对自己有帮助的。
加油!

相关文章

网友评论

    本文标题:flutter tabbar的显示处理

    本文链接:https://www.haomeiwen.com/subject/cjnaultx.html