flutter SafeArea

安全区域，指的是移动端设备的可视窗口范围。处于安全区域的内容不受圆角、刘海屏、iPhone 小黑条、状态栏等的影响，也就是说，我们要做好适配，必须保证页面可视、可操作区域是在安全区域内

白色+黑 import 'dart:io'; import 'package:flutter/services.dart'; void main() { runApp(MyApp()); //白色 if (Platform.isAndroid) { // 以下两行 设置android状态栏为透明的沉浸。写在组件渲染之后，是为了在渲染后进行set赋值，覆盖状态栏，写在渲染之前MaterialApp组件会覆盖掉这个值。 SystemUiOverlayStyle systemUi.

SafeArea 用于**填充类似于刘海屏、异形屏之类的屏幕的边距**, 在其中加入 padding . 保证多端多设备中展示不受影响. 同时, 这样操作也可以保证在多数情况下. 跨平台多端设备ui保持一致。

效果 背景。。由于刘海屏泛滥。Flutter为了适配安全区域单独弄出来一个Api SafeArea 使用非常便捷 import 'package:flutter/material.dart'; class SafeAreaDemo extends StatelessWidget { @override Widget build(BuildContext context) { return SafeArea(child: Container( color: Colo

SafeArea是 Flutter 中的一个基础小部件，用于确保其子组件不会被系统视图（如状态栏、导航栏、刘海屏等）遮挡。它通过内部的MediaQuery和来获取屏幕的布局边界，并相应地调整其子组件的位置。如果你需要更精细的控制，可以使用SafeArea的这些属性来自定义不安全区域的处理。SafeArea(top: false, // 忽略顶部的安全区域bottom: true, // 保留底部的安全区域// ... 你的部件),

SafeArea

Iphone普通系列 待测 IphoneX系列： 未使用SafeArea的状况：充满全屏，顶部状态栏和底部操作区都被背景图片充满 使用SafeArea的状况：顶部状态栏和底部操作区背景变成白色，MediaQuery.of(context).padding的top值为顶部高度，bottom值为底部高度 宽高固定不变 模拟器Pixel 2 XL，Android P，模拟刘海屏，底部为虚拟按键 全屏代码...

safeArea组件

用MaterialApp结合appbar来实现，flutter会自动处理，就不用调代码去处理状态栏颜色了。

大部分App都会修改状态栏颜色的需求，Flutter开发的 App 也是支持的。

在 Flutter 中，SafeArea和MediaQuery是两个非常有用的 widget，它们帮助开发者创建响应式和适应不同屏幕尺寸及设备特性的用户界面。下面将详细介绍这两个 widget 的用法及其应用场景。

在上一节（改变 TabBar 背景颜色的方法）中有发现的一个问题：在 iPhone X 等刘海屏手机中，会出现页面被导航栏或者底部黑线遮挡的问题： 解决办法有两种： 使用以下代码获取手机状态栏和底部黑线的高度，然后设置 Widget 的 Padding 或者 Margin： //获取状态栏高度（上边距） final double topPadding = MediaQuery.of(cont...

1、easy_refresh相关问题 2、 父子作用域关联问题 3. 刘海屏底部安全距离 4. 了解保证金弹窗 iOS端闪退 （待优化） 5. loading无法消失 6. dialog蒙版问题 7. 倒计时优化 8. scrollController.offset报错 9. 断点不走 10.我的出价报红 11. 竞拍大厅折叠效果与滚动冲突 & 加载完成状态无法上拉加载 12. 加载网络图片失败的页面返回报错（未解决） 13. flutter页面进入后快速返回 报错 14. list.first 报错

现有手机可能会出现的问题 现在的手机已经不是方方正正的屏幕了，所以我们在写一些UI的时候可能会出现如下问题： Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(this.title), ), body: ListView( itemExtent: 30, childre

获取屏幕相关 MediaQueryData mq = MediaQuery.of(context); // 屏幕密度 pixelRatio = mq.devicePixelRatio; // 屏幕宽(注意是dp, 转换px 需要 screenWidth * pixelRatio) screenWidth = mq.size.width; // 屏幕高(注意是dp) screenHeight = mq.size.height; // 顶部状态栏, 随着刘海屏会增高 .

iOS在默认情况下，竖屏会显示状态栏，横屏自动隐藏状态栏。而视图控制器的主视图默认位于屏幕顶端，在竖屏时会被顶部状态栏遮挡。如果我们希望不被状态栏遮挡，则需要先判断横竖屏，然后动态显示隐藏状态栏。如果界面中还存在导航栏、分页栏，情况就更复杂一些。总之，自己处理是一件很麻烦的事情。 布局向导 在iOS 7中，苹果引入了Top Layout Guide（顶部布局向导）和Bottom Layout Gu...