如何使底部系统导航栏在颤动中透明？

Question

我正在尝试获得如下图所示的底部系统导航：

我试过 AnnotatedRegion 但没有用。当我尝试使其透明时，它会变成这样：

我无法使用系统导航栏上的区域。如何使用禁区？我有一个背景图像，我想让图像也覆盖底部限制区域。谢谢

Answer 1

这可能是因为您当前的小部件包含在（或等效的）SafeArea 小部件中！

我确实认为像 Scaffold 这样的小部件具有这种行为。

因此，如果您只使用 Container 而不是 Scaffold，您可能可以在该区域进行绘图。

我曾经删除我所有的小部件，然后添加一个 Container(align: Alignment.center, color: Colors.red) 并查看它是否可以到达该区域。在小部件树中移动这个红色容器会提示您是哪个小部件导致了问题。

Answer 2

从这个 GitHub discussion 找到答案。

在 android/app/build.gradle

dependencies {
     implementation 'androidx.core:core-ktx:1.5.0-beta01'
 }

在 android/app/src/main/kotlin/com/example/edge2edge/MainActivity.kt

package com.example.edge2edge

 import androidx.core.view.WindowCompat
 import io.flutter.embedding.android.FlutterActivity

 class MainActivity: FlutterActivity() {
     override fun onPostResume() {
       super.onPostResume() 
       WindowCompat.setDecorFitsSystemWindows(window, false). 
     }
 }

在 main.dart 中

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarIconBrightness: Brightness.dark,
    systemNavigationBarColor: Colors.transparent,
  ));
  runApp(MyApp());
}