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
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. 示例和效果图

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

被遮挡了

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 的,可以看到,顶部页面内容没有被遮挡:

没有被遮挡

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属性定一个默认高度,来保证我们的内容不被遮挡。当设备有安全距离的时候,会从默认高度和安全距离中,取最大的那个。

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))],),),));
}

往期文章

  • flutter学习-day1-环境搭建和启动第一个项目
  • flutter学习-day6-路由和传参和守卫
  • Vue2全家桶+Element搭建的PC端在线音乐网站
  • vue3+element-plus配置cdn
  • 助你上手Vue3全家桶之Vue3教程
  • 助你上手Vue3全家桶之VueX4教程
  • 助你上手Vue3全家桶之Vue-Router4教程
  • 超详细!Vue的九种通信方式
  • 超详细!Vuex手把手教程
  • 使用nvm管理node.js版本以及更换npm淘宝镜像源
  • vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令
  • 超详细!Vue-Router手把手教程

个人主页

  • CSDN
  • GitHub
  • 简书
  • 博客园
  • 掘金

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/580104.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【资源】stable diffusion常用checkpoint

翻墙下载实在太慢了,还不稳定,就把常用的一些checkpoint传网盘了,需要自取~ clip-vit-large-patch14 脸书:openai/clip-vit-large-patch14 Hugging Face 链接:https://pan.baidu.com/s/1dg3XQmcYMoHtNKLqlrBVzQ?p…

亚马逊鲲鹏系统全自动化操作注册下单更快捷

亚马逊鲲鹏系统的强大崛起,让买家号的注册、养号、下单留评等繁琐任务迎来了一场全新的自动化革命。这一创新性软件系统的横空出世,为广大亚马逊卖家提供了一种高效、智能的解决方案,成功摆脱了繁重的手动操作。 在这一系统中,买家…

安卓恢复指南:五种安卓数据恢复软件推荐

我们的手机随身携带。我们抓住他们快速拍照、发送消息并保持娱乐。有时我们对它们过于冒险,将它们扔在混凝土或水中,安装我们不应该安装的软件,然后将它们留在电影中或公园的长椅上。 如果您要在任何地方丢失重要数据,很可能是在…

【Qt-数据库】

Qt编程指南 ■ SQLite■ CSV■ JSON ■ SQLite Qt 提供了很多操作数据库的类, SQLite 是非常小的,是轻量级的,完全配置时小于 400KiB,省略可选功能配置时小于 250KiB。 SQLite 是一个进程内的库,实现了自给自足的、无…

Cesium问题汇总

引入图片报错,Error loading image for billboard: [object Event] 解决方法:可以import或require引入一下再应用

C# WPF上位机开发(扩展上位机之外的技能)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 如果把c# wpf只是看成是一个做界面的框架,那确实有点狭隘了。单独的上位机软件,如果不需要上下游的支持,没有与…

hive中struct相关函数总结

目录 hive官方函数解释示例实战 hive官方函数解释 hive官网函数大全地址:添加链接描述 Return TypeNameDescriptionstructstruct(val1, val2, val3, …)Creates a struct with the given field values. Struct field names will be col1, col2, …structnamed_str…

linux中top参数详解

top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器 top参数详解 第一行,任务队列信息,同 uptime 命令的执行结果 系统时间:07:27:05 运行时间:up …

Oracle查询重复数据取第二行,好用来删除重复数据

Oracle查询重复数据取第二行,好用来删除重复数据 SELECT * FROM ( SELECT e.* , ROW_NUMBER() over(PARTITION BY product_category_id,model_size_id ORDER BY product_category_id,model_size_id) rn FROM equ_check_rules e ) s WHERE rn 2;

微信小程序的bindtap和catchtap的区别

一. 事件 1.事件是视图层到逻辑层的通讯方式。 2. 事件可以将用户的行为反馈到逻辑层进行处理。 3. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。 二. 如何使用事件 1. 简单来说就是将事件绑定到组件上面,bi…

Plantuml之序列图语法介绍(十七)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒…

阿里云服务器华北3(张家口)暂时无法办理经营性ICP许可证

阿里云服务器的华北 3(张家口)地域暂时无法办理经营性ICP许可证,如有经营性ICP业务请勿选择此地域。如果需要办理经营性ICP业务的用户,不需要选择华北3(张家口)地域,可以选择华北2(北…

springboot对接WebSocket实现消息推送

1.修改pom文件 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency> 2.增加配置WebSocketConfig.java import org.springframework.context.annotation.Bean…

实训4---硬件部分---点灯实验--按键控制灯实验--uart串口实验

目录 三、硬件部分 【1】点灯实验 【2】按键控制灯实验 【3】uart串口实验 核心代码&#xff1a; 实验视频 实现流水灯 uart串口实验 三、硬件部分 GPIO 【1】点灯实验 1.首先找到要点的灯&#xff0c;在板子上看到对应的白色丝印&#xff0c;比如绿灯D10.然后打开底板…

服务器数据恢复-raid6离线磁盘强制上线后分区打不开的数据恢复案例

服务器数据恢复环境&#xff1a; 服务器上有一组由12块硬盘组建的raid6磁盘阵列&#xff0c;raid6阵列上层有一个lun&#xff0c;映射到WINDOWS系统上使用&#xff0c;WINDOWS系统划分了一个GPT分区。 服务器故障&分析&#xff1a; 服务器在运行过程中突然无法访问。对服务…

【开题报告】基于SpringBoot的篮球社团管理系统设计与实现

1.研究背景 基于Spring Boot的篮球社团管理系统设计与实现的选题背景可以从以下几个方面展开&#xff1a; 社团管理需求&#xff1a; 在大学校园和社区中&#xff0c;篮球社团是一个非常活跃的组织形式&#xff0c;拥有众多会员和参与者。然而&#xff0c;传统的社团管理方式…

(二)MaterializedMySQL具体实施步骤举例

要将 MySQL 中的 test 数据库实时同步到位于同一台服务器&#xff08;IP 地址为 192.168.197.128&#xff09;上的 ClickHouse&#xff0c;您可以使用 MaterializedMySQL 引擎。以下是详细的步骤&#xff1a; 1. 准备工作 确保您的 MySQL 和 ClickHouse 服务都在运行&#xf…

四种NAT的网络结构

四种NAT的网络结构 引言1 完全圆锥型NAT2 IP限制圆锥型NAT3 Port限制圆锥型NAT4 对称型NAT5 总结 引言 NAT是将内网地址映射转换为外网地址的一种地址转换方式&#xff0c;这节省了有限的IP地址资源。一般来讲&#xff0c;分为对称型NAT和圆锥形NAT&#xff0c;其中圆锥形NAT又…

企业微信服务商代开发模式获取授权企业的客户信息

服务商代开发素材&#xff1a; 服务商可信ip 企业微信认证 测试时不用再次创建一个企业微信&#xff0c;可以用当前的企业微信作为授权企业使用一、创建代开发应用模板 1&#xff0c;代开发模板回调URL配置 参考 注意&#xff1a;保存代开发应用模板时的corpId是服务商的企业…

什么是EMC工程师?

摘要: 今天来介绍一下什么是EMC工程师。一 EMC工程师起源要了解什么是EMC工程师&#xff0c;我们首先要了解什么是EMC。 今天来介绍一下什么是EMC工程师。 一 EMC工程师起源 要了解什么是EMC工程师&#xff0c;我们首先要了解什么是EMC。 工程师这个职业相信大家都耳熟能详…