当我把TaBar小部件放在SafeArea小部件中时，如何自定义Tab小部件的位置

Question

我已经将问题从选项卡居中改为自定义选项卡的位置。
因为我注意到选项卡实际上是居中的，根据文档，它只是添加了页签。
但是如果您希望在避开安全区域时设置一个制表符，或者选项卡中的元素不是（自动）居中对齐，我现在找不到方法。

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

因此，问题可能是如何自定义选项卡小部件的位置。因为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的黑色区域上方。

但是如果你想避免黑条区域，你必须使用安全区域（就像你做的那样），它增加了一些填充，并将所有东西向上推一点，从而避免底部的“不安全”区域。

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