[Flutter：启用标签后，TabBar溢出AppBar的底部

Question

我有以下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的同时避免底部溢出？

Answer 1

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

Answer 2

如果将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),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),

让我知道它如何为您工作。