时间戳

首页 > 解决方案 > 当我将 TaBar 小部件放入 SafeArea 小部件时如何自定义 Tab 小部件的位置

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

问题描述

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

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

我还尝试将选项卡包装在Container小部件中并获取height属性集，但似乎所有高度都避开了安全区域（通过添加 a 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,
          ),
        ],
      )
      );
    }
}

标签： dartflutterflutter-layout

解决方案

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

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

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

因此，SafeArea 添加的填充可防止您向下推（居中）标题和图标。

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

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

推荐阅读