Flutter 组件安全距离之SafeArea

最新推荐文章于 2024-12-02 13:43:54 发布
最新推荐文章于 2024-12-02 13:43:54 发布
阅读量1.5k 收藏
点赞数
分类专栏： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/computerclass/article/details/118575669
版权
SafeArea用于确保内容不被设备的顶部、底部和四角等系统区域遮挡，尤其在处理屏幕边缘布局时非常关键。通过适当地应用SafeArea，开发者可以确保用户在各种屏幕尺寸和设备中都能完整地查看和交互内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

用SafeArea，主要是为了比如：由于系统的原因，防止内容嵌入顶部、四角或下部等四周，以至于有的内容看不到或被覆盖。

【Flutter 问题系列第 12 篇】Flutter 如何获取屏幕内边距
“Allen Su”的博客
04-17 1032
Flutter 如何获取屏幕内边距 MediaQuery.of(context).padding.top
Flutter开发：使用SafeArea（安全区域）
热门推荐
全沾软贱开发攻城狮
02-12 1万+
前言 在Flutter开发中，对于各种手机机型的适配是一个非常重要的事情，尤其是Android系统的机型太多太杂，适配起来不是易事，而且对于iOS系统的iPhone手机的“刘海”适配也是关键的一个知识点。那么本篇博文就来分享一下关于SafeArea的使用，SafeArea也是各种稀奇古怪不规则的屏幕适配的最佳利器，方便查阅使用。 原理 SafeArea是通过MediaQuery来检测屏幕尺寸，让应用程序的大小能与屏幕适配，然后返回了一个Padding Widget 来包裹住编写的页面，这样页面
flutter学习-day20-使用SafeArea组件处理各机型的安全距离
鹏多多的博客
12-26 2245
安全区域，指的是移动端设备的可视窗口范围。处于安全区域的内容不受圆角、刘海屏、iPhone 小黑条、状态栏等的影响，也就是说，我们要做好适配，必须保证页面可视、可操作区域是在安全区域内
Flutter 获取屏幕高度、密度、安全区域等
大灰狼的小绵羊哥哥的博客
06-05 5241
获取屏幕相关 MediaQueryData mq = MediaQuery.of(context); // 屏幕密度 pixelRatio = mq.devicePixelRatio; // 屏幕宽(注意是dp, 转换px 需要 screenWidth * pixelRatio) screenWidth = mq.size.width; // 屏幕高(注意是dp) screenHeight = mq.size.height; // 顶部状态栏, 随着刘海屏会增高 .
flutter 自定义侧边栏showDialog
weixin_44911775的博客
02-09 506
showDialog+添加平移动画效果。
flutter获取状态栏高度及安全区域
u013297881的专栏
11-18 2926
上下左右安全区域 Widget build(BuildContext context) { return Material( color: Colors.blue, child: SafeArea( child: SizedBox.expand( child: Card(color: Colors.yellowAccent), ), ...
flutter 基础之屏幕适配
lizhong
07-24 5739
随着苹果，Google等大厂不断研发新的设备机型，Android和iOS的设备种类越来越繁多了，有普通的屏幕16:9的，也有最近几年出来的全面屏，水滴屏，刘海屏等，Android的全面屏基本上是18:9的比例，iPhone X的尺寸是19.5:9。按照这个结论，大致上是有三种尺寸的图的。所以得让设计师一个广告图，切三个尺寸。 根据现有的屏幕比例，分成了大致的三类：基础版 1080*1920（通用...
Flutter 笔记 | Flutter 功能性组件
川峰的博客
05-26 2026
Flutter功能性组件，Flutter功能性组件，Flutter功能性组件，Flutter功能性组件，Flutter功能性组件，Flutter功能性组件，Flutter功能性组件，Flutter功能性组件，Flutter功能性组件，Flutter功能性组件，Flutter功能性组件，Flutter功能性组件，Flutter功能性组件，Flutter功能性组件，Flutter功能性组件，Flutter功能性组件，Flutter功能性组件，Flutter功能性组件，Flutter功能性组件，Flutter功能
Flutter 笔记 | Flutter 可滚动组件
川峰的博客
05-26 4745
Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚
【Flutter】十九、Flutter中常用组件——滚动组件SingleChildScrollView
MAXLZ的博客
10-15 1469
一、SingleChildScrollView 像Row、Column、Flex等有些widget是无法进行滚动的，一旦子控件超出父控件的范围，flutter会发出警告，屏幕会有黄黑色条纹出现，这时我们可以使用滚动控件来进行处理。     如下是一个Column控件，它包含了20个Container控件，此时children的高度超出了Container高度，屏幕下方出现警告区域： impo...
Flutter：购物车总结（单选，全选，定义数量，是否选中为obs响应式）
最新发布
sunluyi的博客
12-02 470
购物车总结：单选，全选，定义数据num，show字段为obs响应式数据
Flutter下拉刷新上拉加载的简单实现方式二
且听真言
11-12 1324
一个简单的Flutter应用程序，展示了如何实现下拉刷新和上拉加载更多的功能。
Flutter 组件分析之SafeArea
Eqiqi的博客
01-13 5177
SafeArea 用于**填充类似于刘海屏、异形屏之类的屏幕的边距**, 在其中加入 padding . 保证多端多设备中展示不受影响. 同时, 这样操作也可以保证在多数情况下. 跨平台多端设备ui保持一致。
Flutter坑之FlutterFragment中SafeArea失效的问题
落叶挽歌的博客
11-02 1834
背景： 最近有在做关于Android底部多tab下，对应多个Flutter Fragment的操作。又遇到一个比较坑的问题:FlutterFragment中的flutter页面的SafeArea失效（关于safeArea具体介绍参考官方SafeArea class），简单举例说一下SafeArea的作用：如果你有一刘海屏的手机，如果你的flutter内容为全屏，假如你的内容在全屏最顶部，那么所谓的刘海将会盖住你所想要的内容，如下图所示： 这当然不是我们想要的，于是Flutter官方推出：SafeArea这个
flutter设置边距，flutter上下左右边距，flutter广告页面，flutter欢迎页，flutter轮播图
Big_Liu_bing的博客
06-30 3908
直接上图： 1、设置边距主要代码为 new EdgeInsets.fromLTRB(0, 50, 10, 0) LTRB上下左右，可以查看EdgeInsets源码。 2、悬浮按钮代码 Align( alignment: FractionalOffset.topRight, child: Padding( padding: new EdgeInsets.fromLTRB(0, 50, 10, 0), child: FlatButton( ..
flutter单独页面修改状态栏不生效问题
qq_42992704的博客
09-22 1270
在使用flutterfa仿造小红书app的时候，点击发布需要修改状态栏为黑色。Publish页面代码上面代码没有问题，后来在调试中发现只有从首页跳转的时候才会出现状态栏不会变成黑色，有时候还会闪烁。
Flutter Widgets 之 SafeArea
老孟Flutter
02-20 1979
注意：无特殊说明，Flutter版本及Dart版本如下： Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 现如今的手机已经不能提供给应用程序规整的矩形界面了，一些带圆角或者是刘海屏让应用程序的布局更加复杂，甚至是需要单独适配，这对开发者来来太糟糕了。 因此SafeArea控件应用而生，SafeArea通过MediaQuery检测屏幕的尺寸使应用程序的大...
Flutter SafeArea
flutterall.com
03-09 875
博客地址：flutterall.com 先看代码： class FlutterAlign extends StatelessWidget { @override Widget build(BuildContext context) { return Align( alignment: Alignment(-1, -1), child: Container...
Flutter SafeArea - 异形屏适配利器
weixin_33834910的博客
05-24 2215
相信现在大部分的人已经了解过 Flutter. 如果还没有，那么可以去 Flutter官网 了解一下 现有手机可能会出现的问题 现在的手机已经不是方方正正的屏幕了，所以我们在写一些UI的时候可能会出现如下问题： Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Tex...
Flutter组件化开发实践与优势
"Flutter组件化开发方案" 在移动应用开发领域，Flutter作为一种跨平台的UI工具包，已经被广泛采用。然而，随着项目规模的扩大和业务需求的增加，单纯将Flutter作为一个Native模块集成的方式逐渐暴露出管理困难的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

computerclass

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值