flutter如何获取底部安全区高度

在Flutter开发中，如何获取底部安全区的高度？比如在一些全面屏设备上，底部有系统导航栏，我需要知道这个区域的具体高度来调整布局。有没有现成的API可以直接获取这个值？希望能提供一个具体的代码示例。

2 回复

在Flutter中，使用MediaQuery.of(context).padding.bottom获取底部安全区高度。

更多关于flutter如何获取底部安全区高度的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，获取底部安全区高度可以使用 MediaQuery 或 SafeArea 组件。以下是具体方法：

1. 使用 MediaQuery

通过 MediaQuery.of(context).padding.bottom 获取底部安全区高度（单位：逻辑像素）。

示例代码：

double bottomSafeArea = MediaQuery.of(context).padding.bottom;

2. 使用 SafeArea 组件

若仅需在布局中避开安全区，可直接使用 SafeArea 组件包裹内容：

SafeArea(
  bottom: true, // 默认即为 true
  child: YourWidget(),
)

注意事项：

  • 需在 BuildContext 可用时调用（如在 build 方法或状态上下文中）。
  • 返回值包含底部安全区高度（如 iPhone 的 Home 指示条区域），无安全区时返回 0.0。

完整示例：

@override
Widget build(BuildContext context) {
  final bottomPadding = MediaQuery.of(context).padding.bottom;
  return Scaffold(
    body: Text('底部安全区高度: $bottomPadding'),
  );
}

此方法适用于需要动态调整布局的场景，如避免内容被系统UI遮挡。

回到顶部