如何获取Android底部上滑操作区高度？Flutter布局计算求助

我需要创建一个容器，高度占满视口完整高度（无需考虑顶部安全区域），但要减去底部标签栏/导航栏的高度，还要减去系统灰色导航栏下方的黑色区域高度（这个区域上滑可唤起对应功能，高度因设备版本/型号而异）。

我试了多种方法都没成功，以下是最新实现代码：

void _calculateBottomPadding() {
WidgetsBinding.instance.addPostFrameCallback((_) {
  final viewInsets = MediaQuery.of(context).viewInsets.bottom;
  final viewPadding = MediaQuery.of(context).viewPadding.bottom;
  setState(() {
    _bottomPadding = viewInsets > 0 ? viewInsets : viewPadding;
  });
});
}

Container(
    color: Colors.red,
    width: MediaQuery.of(context).size.width,
    height: (MediaQuery.of(context).size.height) -
        MediaQuery.of(context).padding.bottom -
        _bottomPadding -
        kBottomNavigationBarHeight,
)

方法一：精准计算底部扣除高度 #

系统底部的手势操作区域（你提到的上滑唤起功能的黑色区域）可通过MediaQuery.of(context).systemGestureInsets.bottom获取，结合底部安全区域和自定义导航栏高度，正确计算容器高度：

@override
Widget build(BuildContext context) {
  final mediaQuery = MediaQuery.of(context);
  final screenHeight = mediaQuery.size.height;
  final bottomSafeArea = mediaQuery.viewPadding.bottom; // 系统导航栏高度
  final bottomGestureArea = mediaQuery.systemGestureInsets.bottom; // 底部手势区域高度
  final navBarHeight = kBottomNavigationBarHeight; // 自定义底部导航栏高度

  final containerHeight = screenHeight - bottomSafeArea - bottomGestureArea - navBarHeight;

  return Container(
    color: Colors.red,
    width: mediaQuery.size.width,
    height: containerHeight,
  );
}

方法二：用Scaffold+SafeArea简化布局 #

如果页面基于Scaffold，可以利用extendBody属性让body延伸至导航栏下方，再手动抵消顶部安全区域，无需手动计算高度：

@override
Widget build(BuildContext context) {
  return Scaffold(
    extendBody: true,
    bottomNavigationBar: BottomNavigationBar(
      items: const [
        BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
        BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
      ],
    ),
    body: Container(
      color: Colors.red,
      // 抵消顶部安全区域，实现全屏顶部覆盖
      padding: EdgeInsets.only(top: -MediaQuery.of(context).viewPadding.top),
      height: double.infinity,
      width: double.infinity,
    ),
  );
}

关键说明 #

• systemGestureInsets.bottom会自动适配不同设备的底部手势区域，旧设备或非全面屏设备会返回0，兼容性更强
• 避免在initState直接获取MediaQuery参数，优先在build方法或LayoutBuilder中获取，确保布局参数正确

内容的提问来源于stack exchange，提问作者Marco Jr