dart - 当我将 TaBar 小部件放入 SafeArea 小部件时如何自定义 Tab 小部件的位置

Question

我已将问题从 Tab 居中更改为自定义 Tab 的位置。
因为我注意到 Tab 实际上是居中的并且根据 document ，它只是添加填充。
但是，如果您想要一个 TabBar，只要它避开安全区域，或者选项卡中的元素都居中对齐(自动)，我现在找不到办法。

看上面的截图，图标/标题成功避开了黑条区域(通过扩展 Tabbar 的高度)，但没有垂直居中对齐。我尝试放置一个 Center 元素将 tabar 包装到选项卡小部件，它将高度扩展到整个屏幕。

我还尝试将选项卡包装在 Container 小部件中并设置 height 属性，但似乎所有高度都避开了安全区域(通过添加 a常量)。 我尝试用 SafeArea 小部件包裹整个 Scaffold ，但是安全区域变成黑色，我们实际上希望 tab bat 变得更高，然后在这个更高的容器中布局元素，而不仅仅是移动容器。

所以问题可能是如何自定义 Tab 小部件的位置。因为 Tabbar 实际上是居中的，但是它通过避开安全区域来布局子元素，所以它在视觉上不是垂直对齐的。

我的代码是:

@override
Widget build(BuildContext context) {
  final icons = [Icons.library_books, Icons.photo, Icons.toc];
  return Scaffold(
      bottomNavigationBar: Material(
        color: Theme.of(context).primaryColor,
        child: SafeArea(child: TabBar(
          controller: _tabController,
          tabs: _titles.map((t) {
            final i = _titles.indexOf(t);
            return Tab(
              text: t,
              icon: Icon(icons[i]),
            );
          }).toList(),
        ),),
      ),
      body: TabBarView(
        controller: _tabController,
        children: <Widget>[
          PostListPage(
            userid: widget.userid,
            username: widget.username,
          ),
          AlbumListPage(
            userid: widget.userid,
            username: widget.username,
          ),
          TodoListPage(
            userid: widget.userid,
            username: widget.username,
          ),
        ],
      )
      );
    }
}

Answer 1

好的，我想我现在明白你想要什么了，但恐怕无法实现。

如果您不使用 SafeArea 小部件，则条形图在整个底部具有正常高度并且所有内容都居中。它的缺点是它在 iPhone X 的黑色区域上方。

但是如果你想避开黑条区域，你必须使用 SafeArea(正如你所做的那样)它会添加一些填充并将所有内容向上推一点，从而避免底部的“不安全”区域。

因此，正是 SafeArea 添加的填充可以防止您下推(居中)标题和图标。

一个可能的选择是用黑色的 Container 包裹 SafeArea，这样不安全的区域就是黑色的。

child: Container(
  color: Colors.black,
  child: SafeArea(child: TabBar(
          controller: _tabController,
...