Flutter应用内容延伸至虚拟导航栏下方 尝试SafeArea等组件未解决

问题原因 #

• Scaffold的body区域默认覆盖整个屏幕空间，包含系统虚拟导航栏、状态栏所在的系统交互区域，未做边距避让的情况下内容会伸入该区域。
• 代码中的GridView默认使用零内边距，自身没有适配底部安全区域的逻辑，即便外层包裹了Column、Expanded也不会自动处理系统级边距。

解决方案 #

方案1（通用推荐）

直接在Scaffold的body外层包裹SafeArea组件，可同时自动避开顶部状态栏、底部虚拟导航栏的交互区域，原有子组件无需修改：

Widget build(BuildContext context) {
  return Scaffold(
    // SafeArea作为body的直接子节点即可生效
    body: SafeArea(
      child: Column(
        children: [
          Expanded(
            flex: 1,
            child: Container(
                alignment: Alignment.centerRight,
                child: TextField(
                  controller: _input_controller,
                  decoration: const InputDecoration(
                    focusedBorder: InputBorder.none,
                    border: InputBorder.none,
                  ),
                  style: TextStyle(fontSize: _font_size),
                  textAlign: TextAlign.right,
                  showCursor: false,
                  readOnly: true,
                )),
          ),
          Expanded(
            flex: 1,
            child: Container(
                alignment: Alignment.centerRight,
                child: TextField(
                  controller: _answer_controller,
                  decoration: const InputDecoration(
                    focusedBorder: InputBorder.none,
                    border: InputBorder.none,
                  ),
                  style: TextStyle(fontSize: _font_size),
                  textAlign: TextAlign.right,
                  showCursor: false,
                  readOnly: true,
                )),
          ),
          Expanded(
            flex: 4,
            child: GridView.count(
                crossAxisCount: 4,
                mainAxisSpacing: 0,
                crossAxisSpacing: 0,
                children: List.generate(
                    20,
                    (i) => Container(
                      child: TextButton(
                        onPressed: () {
                          print(i);
                        },
                        child: Text(i.toString()),
                      ),
                    ))),
          )
        ],
      ),
    ),
  );
}

方案2（仅适配底部）

如果你不需要避让顶部状态栏，只需要处理底部导航栏的遮挡问题，可以单独给GridView添加底部内边距：

GridView.count(
  crossAxisCount: 4,
  // 添加这一行适配底部安全边距
  padding: EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom),
  mainAxisSpacing: 0,
  crossAxisSpacing: 0,
  // 剩余原有代码保持不变
)

如果之前尝试SafeArea未生效，通常是嵌套位置错误，必须将SafeArea作为Scaffold的body的直接子节点，才能正确获取全局的安全区域参数完成适配。

内容的提问来源于stack exchange，提问作者Furby Haxx