Question

我已将问题从Tab的中心更改为自定义Tab的位置。
因为我注意到Tab实际上位于居中位置，并且根据document，所以它只是添加了填充。
但是，如果您希望TabBar避开安全区域，或者Tab中的元素未居中（自动）对齐，则现在找不到办法。

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

我还尝试将选项卡包装在Container小部件中并获得height属性集，但似乎所有高度都避开了安全区域（通过添加const）。我尝试用Scaffold小部件包裹整个SafeArea，但是安全区域变黑了，我们实际上希望制表符变高，然后在此较高的容器中布局元素，而不仅仅是移动容器

所以问题可能是如何定制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添加的填充，可防止您按下（居中）标题和图标。

一个可能的选择是将SafeArea用黑色容器包装，以使不安全区域为黑色。

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

将TaBar小部件放入SafeArea小部件时，如何自定义Tab小部件的位置

1 个答案: