Flutter中如何让Scaffold子容器延伸至系统底部导航栏下方

完全可行，按以下步骤就能实现需求：

1. 配置系统UI，设置底部导航栏透明 #

首先在应用启动时，通过SystemChrome将底部导航栏设为透明，并允许内容延伸到导航栏区域：

import 'package:flutter/services.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.transparent, // 底部导航栏透明
    systemNavigationBarContrastEnforced: false, // 关闭强制对比度，确保内容能延伸
    statusBarColor: Colors.transparent, // 可选：同时设置状态栏透明
    systemNavigationBarIconBrightness: Brightness.light, // 根据背景色调整图标亮度，避免看不清
  ));
  runApp(const MyApp());
}

2. 开启Scaffold的extendBody属性 #

这是核心步骤，将Scaffold的extendBody设为true，它会让Scaffold的body区域延伸到底部导航栏所在的空间：

Scaffold(
  extendBody: true, // 关键属性，必须开启
  body: YourChildContainer(),
)

3. 处理内容遮挡（可选） #

如果你的子容器内容被底部导航栏的图标遮挡，可通过MediaQuery获取底部安全区域高度，给子容器添加内边距：

Container(
  padding: EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom),
  // 其他属性
)

如果就是要完全覆盖导航栏区域，忽略这一步即可。

完整示例代码 #

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.transparent,
    systemNavigationBarContrastEnforced: false,
    statusBarColor: Colors.transparent,
    systemNavigationBarIconBrightness: Brightness.light,
  ));
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        extendBody: true,
        body: Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.deepPurple,
          alignment: Alignment.bottomCenter,
          child: const Padding(
            padding: EdgeInsets.all(16.0),
            child: Text(
              "内容已延伸至底部导航栏下方",
              style: TextStyle(color: Colors.white, fontSize: 22),
            ),
          ),
          // 可选：取消注释避免内容被图标遮挡
          // padding: EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom),
        ),
      ),
    );
  }
}

额外注意事项 #

• 部分安卓机型需要在android/app/src/main/res/values/styles.xml中添加以下配置，确保导航栏透明生效：

  <item name="android:windowTranslucentNavigation">true</item>
  

• 调整systemNavigationBarIconBrightness时，要和你的页面背景色形成对比，保证导航栏图标清晰可见。

内容的提问来源于stack exchange，提问作者MD Sakib Hasan