使用 SafeArea 创建安全区域

safeArea用于创建安全区域,使页面中被安全区包裹的元素脱离沉浸式状态栏、刘海屏等系统元素的遮盖。它是 iphoneX 之后引入的新概念, 安全区域指的是一个可视窗口范围, 处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)的影响。

SafeArea(
  top: true,
  right: true,
  bottom: true,
  left: true,
  child: Text("Hello World!")
)

等效于:

<!DOCTYPE html>
<html>
  <head>
    <!--
         // …
         重要: ios 系统需要设置 viewport-fit=cover 以解除系统强制的安全区域,
         使用自定义安全区域配置 👇
    -->
      <meta name="viewport" content="width=device-width, viewport-fit=cover" />
    <!--
         重要: ios 系统需要设置 viewport-fit=cover 以解除系统强制的安全区域,
         使用自定义安全区域配置 👆
         // …
    -->
  </head>
  <body>
    <div
      style=
      "
        padding-top: env(safe-area-inset-top);
        padding-top: const(safe-area-inset-left);

        padding-right: env(safe-area-inset-right);
        padding-right: const(safe-area-inset-right);

        padding-bottom: env(safe-area-inset-bottom);
        padding-bottom: const(safe-area-inset-bottom);

        padding-left: env(safe-area-inset-left);
        padding-left: const(safe-area-inset-left);
      "
    >
      <span>Hello World!</span>
    </div>
  </body>
</html>

参考文献

[1] Flutter SafeArea www.jianshu.com/p/c6320f61a…

[2] 前端：viewport-fit解决iphoneX的“刘海”问题 www.cnblogs.com/WQLong/p/77…

[3] safe-area-inset-bottom iphone blog.csdn.net/sd19871122/…

Web 开发者如何理解 Flutter 布局之 —— 7. SafeArea

使用 SafeArea 创建安全区域

参考文献