Flutter - 透明系统导航栏

Question

我想让Flutter中的底部导航栏透明。

这是我在我的

main.dart

中尝试过的

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // transparent status bar
    systemNavigationBarColor: Colors.transparent,
    systemNavigationBarDividerColor: Colors.transparent,
  ));
  runApp(MyApp());
}

我的主脚手架中也有这个：

extendBodyBehindAppBar: true,
extendBody: true,

但这就是结果：

应用程序栏按预期工作，但不是最底部。 关于如何解决这个问题有什么想法吗？

Answer 1

将此作为答案发布。

当前您正在 Scaffold 内应用背景，而 Scaffold 本身在内部将 SafeArea 应用于身体（这就是为什么您的身体永远不会到达屏幕底部的原因）。
为了达到您需要的结果 - 在支架之前应用背景。例如：

DecoratedBox(
    decoration: BoxDecoration(
        color: Colors.red,
    ),
    child: Scaffold(...),
)

Answer 2

如果您使用 SafeArea，则只需添加 Bottom: false 属性即可。代码如下所示：

返回脚手架( 主体：安全区域（ 底部：假， 子项：列（ ...

Answer 3

试试这个

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // transparent status bar
    systemNavigationBarColor: Colors.transparent,
    systemNavigationBarDividerColor: Colors.transparent,
  ));
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  runApp(MyApp());
}