将底部导航栏扩展到安全区域

Question

我有以下画面

这是代码：

return Scaffold(
      backgroundColor: Palette.light,
        body: RefreshIndicator(
            onRefresh: () => MatchesController.refresh(matchesState, matchId),
            child: CustomScrollView(
              slivers: [
                MatchAppBar(matchId: matchId),
                SliverList(
                  delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                      return widgets[index];
                    },
                    childCount: widgets.length,
                  ),
                )
              ],
            )),
        bottomNavigationBar: SafeArea(child: BottomBarMatch(match: match)),

问题是我想使用 SafeArea 和 bottomBarMatch 以及 Scaffold 有不同的颜色。

我希望底栏下方的 space 与底栏颜色相同。如果我将 SafeArea 向上移动一层，我会看到它是黑色的（我猜是系统颜色）

Answer 1

而不是使用 SafeArea 小部件，我建议添加填充

MediaQuery.of(context).padding.bottom

到您的 BottomBarMatch 小部件

将此填充添加到 BottomBarMatch 小部件的白色小部件，您将获得相同的安全区域，但在 BottomBarMatch

内

将底部导航栏扩展到安全区域

Extend bottom navigation bar over safe area

ios

flutter

safearea