首页 > 解决方案 > Flutter:启用标签时TabBar溢出AppBar底部

问题描述

我有以下 TabBar(我使用 flexibleSpace 来删除填充一个空 AppBar 将放在 TabBar 和 SafeArea 上方,这样 TabBar 不会出现在 android 状态栏下):

home: DefaultTabController(
                length: 3,
                child: Scaffold(
                    appBar: AppBar(
                        flexibleSpace: SafeArea(
                          child: Column(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: [
                                  TabBar(
                                      indicatorColor: Color(0xfffffffe),
                                      tabs: [
                                          Tab(
                                              text: "Diary",
                                              icon: Icon(Icons.book),
                                          ),
                                          Tab(
                                              text: "Charts",
                                              icon: Icon(Icons.insert_chart),
                                          ),
                                          Tab(
                                              text: "Settings",
                                              icon: Icon(Icons.settings),
                                          )
                                      ],
                                  ),
                              ],
                          ),
                        ),
                    ),
                    body: TabBarView(
                        children: [
                            Diary(),
                            Charts(),
                            Settings(),
                        ],
                    )
                )
            ),

渲染时是这样的: 在此处输入图像描述

如何在保持安全区域和灵活空间的同时避免底部溢出?

标签: flutterdartflutter-layout

解决方案


移除 SafeArea 和 Column 应该可以解决问题:

      appBar: AppBar(
        flexibleSpace: TabBar(
          indicatorColor: Color(0xfffffffe),
          tabs: [
            Tab(text: "Diary",
                icon: Icon(Icons.book),),
            Tab(text: "Charts",
                icon: Icon(Icons.insert_chart),),
            Tab(text: "Settings",
                icon: Icon(Icons.settings),)
          ],
        ),
      ),

推荐阅读