flutter学习-day20-使用SafeArea组件处理各机型的安全距离

📚 目录

  1. 介绍
  2. 分析
  3. 示例和效果图
  4. 特殊情况

1. 介绍

安全区域,指的是移动端设备的可视窗口范围。处于安全区域的内容不受圆角、刘海屏、iPhone 小黑条、状态栏等的影响,也就是说,我们要做好适配,必须保证页面可视、可操作区域是在安全区域内,而 SafeArea 组件会自动进行屏幕适配,帮你空出所占高度。如下图所示:

2. 解析

实际上 SafeArea 也是一个 StatelessWidget,它本身不用主动去更新 ui,它仅仅是包裹了一层 Padding 和 MediaQuery.removePadding 的容器。它外层的 Padding 填充了被异形屏所遮挡的部分,而内部的 MediaQuery.removePadding 则是把这部分的填充距离给去掉,这样就保证了 SafeArea 包裹的子元素不会被异形屏所遮挡,且后续其 child 获取外部 Padding 的时候就不会再重复获取多余的 Padding 了。

SafeArea 的属性如下:

属性 说明 默认值
top 左侧是否需要有安全距离 false
left 左侧是否需要有安全距离 false
right 左侧是否需要有安全距离 false
bottom 左侧是否需要有安全距离 false
minimum 最小填充距离 EdgeInsets.zero
maintainBottomViewPadding 是否需要底部视图填充 false
child 子元素 Widget
dart 复制代码
const SafeArea({
  super.key,
  this.left = true,
  this.top = true,
  this.right = true,
  this.bottom = true,
  this.minimum = EdgeInsets.zero,
  this.maintainBottomViewPadding = false,
  required this.child,
});

3. 示例和效果图

如下,是一个没有设置安全距离的页面,可以看到,由于没有设置安全区域,所以页面顶部的一部分文字被状态栏给遮挡了:

dart 复制代码
Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
      alignment: Alignment.center,
      child: Column(
        children: [
          Container(
            width: double.maxFinite,
            height: 60,
            color: Colors.black.withOpacity(0.15),
            child: const Text('我是一段文字',
                style: TextStyle(color: Colors.black, fontSize: 16)),
          ),
          Expanded(
              child: Container(
                  constraints: const BoxConstraints.expand(),
                  color: Colors.white))
        ],
      ),
    )
  );
}

如下,是设置了 SafeArea 的,可以看到,顶部页面内容没有被遮挡:

dart 复制代码
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Container(
        alignment: Alignment.center,
        child: Column(
          children: [
            Container(
              width: double.maxFinite,
              height: 60,
              color: Colors.black.withOpacity(0.15),
              child: const Text('我是一段文字',
                  style: TextStyle(color: Colors.black, fontSize: 16)),
            ),
            Expanded(
                child: Container(
                    constraints: const BoxConstraints.expand(),
                    color: Colors.white))
          ],
        ),
      ),
    )
  );
}

4. 特殊情况

有的时候,我们的老手机等设备是没有底部栏的,这时获取的安全距离为 0。这种情况我们需要使用minimum属性定一个默认高度,来保证我们的内容不被遮挡。当设备有安全距离的时候,会从默认高度和安全距离中,取最大的那个。

dart 复制代码
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      // 当有底部安全距离的时候,会从默认高度和安全距离里取最大的那个
      minimum: const EdgeInsets.only(bottom: 20),
      child: Container(
        alignment: Alignment.center,
        child: Column(
          children: [
            Container(
              width: double.maxFinite,
              height: 60,
              color: Colors.black.withOpacity(0.15),
              child: const Text('我是一段文字',
                  style: TextStyle(color: Colors.black, fontSize: 16)),
            ),
            Expanded(
                child: Container(
                    constraints: const BoxConstraints.expand(),
                    color: Colors.white))
          ],
        ),
      ),
    )
  );
}

往期文章

个人主页

相关推荐
szial12 小时前
React 快速入门:菜谱应用实战教程
前端·react.js·前端框架
羊锦磊16 小时前
[ vue 前端框架 ] 基本用法和vue.cli脚手架搭建
前端·vue.js·前端框架
xjf771117 小时前
Nx项目中使用Vitest对原生JS组件进行单元测试
javascript·单元测试·前端框架·nx·vitest·前端测试
光影少年1 天前
react生态
前端·react.js·前端框架
柯南二号2 天前
【大前端】Vue 和 React 的区别详解 —— 两大前端框架深度对比
前端·vue.js·前端框架
Bryce李小白3 天前
Flutter 自定义 View 权威指引
flutter
恋猫de小郭3 天前
Fluttercon EU 2025 :Let‘s go far with Flutter
android·开发语言·flutter·ios·golang
一位搞嵌入式的 genius3 天前
前端实战开发(二):React + Canvas 网络拓扑图开发:6 大核心问题与完整解决方案
前端·前端框架
SoaringHeart4 天前
Flutter进阶:自定义一个 json 转 model 工具
前端·flutter·dart
许泽宇的技术分享4 天前
Flutter + Ollama:开启本地AI的全平台新纪元 —— 从零剖析一款现代化AI客户端的技术奥秘
人工智能·flutter