Flutter：启用标签时TabBar溢出AppBar底部答案

【问题标题】：Flutter: TabBar overflows bottom of AppBar when labels are enabledFlutter：启用标签时TabBar溢出AppBar底部
【发布时间】：2020-04-16 21:31:25
【问题描述】：

我有以下 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(),
                        ],
                    )
                )
            ),

渲染时是这样的：

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

【问题讨论】：

为什么要保留flexibleSpace？

标签： flutter dart flutter-layout

【解决方案1】：

如果您将 TabBar 包装在 Expanded 小部件中，它应该可以解决您的问题

AppBar(
            flexibleSpace: SafeArea(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Expanded(
                    child: 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),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),

让我知道这对你有什么作用。

【讨论】：

【解决方案2】：

删除 SafeArea 和列应该可以解决问题：

      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),)
          ],
        ),
      ),

【讨论】：