TabBar 仅在 Android Flutter 上隐藏在 Toolbar 下

Question

我刚刚开始学习使用 Flutter（来自 Android Kotlin）制作应用程序，并最终成功制作了一个可用的 TabBar。我想制作没有 AppBar 小部件的选项卡栏，以防止在选项卡栏顶部没有标题的情况下出现额外的空白。在这样做时，我用 PrefferedSize 替换了 AppBar 小部件，因为我查了一下并发现了另一个关于如何在没有 AppBar 的情况下制作 TabBar 的问题。当我这样做时，iOS 版本看起来很棒，但 Android 版本的 TabBar 的一部分隐藏在系统工具栏和显示切口下方。我曾尝试在顶部添加填充，但应用程序说 AppBar 超出了其大小 16 像素。我认为这是一个模拟器问题，在我的物理设备上运行它，它也有同样的问题，可能更糟糕，因为灰色工具栏更大。

这是我截取的屏幕截图的示例：

这是此屏幕的代码，特别是我在构建函数中的代码：

class _PlantsFragmentState extends State<PlantsFragment> {
   @override
   Widget build(BuildContext context) {
     return const DefaultTabController(
       length: 2,
       child: Scaffold(
         appBar: PreferredSize(
           preferredSize: Size.fromHeight(kToolbarHeight),
           child: Column(
             mainAxisAlignment: MainAxisAlignment.end,
             children: [
               TabBar(
                 labelColor: Colors.green,
                 unselectedLabelColor: Colors.green,
                 indicatorColor: Colors.green,
                 indicatorSize: TabBarIndicatorSize.tab,
                 tabs: [
                  Tab(
                    icon: Icon(Icons.search),
                    text: "Search",
                  ),
                  Tab(
                    icon: Icon(Icons.favorite),
                    text: "Favorites"
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

如何修改 TabBar 以防止在 Android 上出现这种情况？

Answer 1

AppBar

小部件有一个名为

bottom

的属性，该属性用于默认工具栏下方的自定义小部件。此属性需要

PreferredSizeWidget

。

TabBar

扩展了

PreferredSizeWidget

，因此可以直接提供给

bottom

参数。

最后，我们需要通过将

toolbarHeight

参数设置为

0

来删除工具栏的高度以删除其中的空白。

通过这样做，您将达到您所要求的结果。这是代码和截图结果：

    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          toolbarHeight: 0,
          bottom: const TabBar(
            labelColor: Colors.green,
            unselectedLabelColor: Colors.green,
            indicatorColor: Colors.green,
            indicatorSize: TabBarIndicatorSize.tab,
            tabs: [
              Tab(
                icon: Icon(Icons.search),
                text: "Search",
              ),
              Tab(icon: Icon(Icons.favorite), text: "Favorites"),
            ],
          ),
        ),
      ),
    );

一些解释...

Flutter 应用程序 UI 会在整个手机屏幕上绘制，除非明确指示不要这样做。 AppBar 小部件会自动处理这种情况并将其属性放置在顶部空间下方。

如果您正在使用

AppBar

，您可以通过将脚手架的

primary

属性设置为

false

来删除上述功能。令人惊讶的是，即使这是默认情况下，Android 填充也没有添加，而只是在 iOS 上添加。我验证了这一点，因为当我将其设置为

false

时，iOS 应用栏与屏幕截图中的 Android 应用栏存在相同的错误。

无论如何，这通常是问题所在。

如果您想确保您的应用程序始终在这些边界内，您还可以：

1. 用

   SafeArea

   包裹你的页面（但这会使顶部和底部填充黑色 - 我个人不喜欢这种审美），或者
2. 将

   MediaQuery.of(context).padding.top

   加起来，等于应用程序运行的手机的系统工具栏高度

此外，您上面的解决方案在 iOS 上似乎是正确的，但事实并非如此。您的 TabBar 溢出到顶部填充区域，这是不应该发生的。发生这种情况是因为

AppBarz is taller than the value in 

kToolbarHeight

, which is designed for the 

AppBar` 的工具栏高度：