Flutter 组件之 safeArea

已于 2023-02-12 14:17:34 修改
阅读量693 收藏
点赞数
分类专栏： Flutter 组件 文章标签： flutter 前端 android ios
于 2023-02-11 21:01:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tools_are/article/details/128987969
版权

Flutter组件之safeArea

1.简介

safeArea组件会屏幕适配，自动的帮你空出状态栏、刘海屏的刘海所占高度等等…

2.属性

  • right：是否在屏幕右边避免系统入侵。
  • left：是否在屏幕左边避免系统入侵。
  • bottom：是否在屏幕底部避免系统入侵。
  • top：是否在屏幕顶部避免系统入侵。
  • minimum：最小边距
  • maintainBottomViewPadding：这个属性很少用到，最常用的场景和键盘有关，默认是false。如果没有设置成true, 在SafeArea上有键盘弹出，那时SafeArea的获取的dart:ui.Window.padding的bottom会是零，导致这个页面的UI会有移动。下面有代码demo(注意Scaffold的resizeToAvoidBottomInset要设置成false
  • child：子集

3.使用

使用和不使用safeArea组件的样子

属性top，right，left，bottom效果都一样，假如top属性为false时，就和没加safeArea组件一样
最低0.47元/天 解锁文章
Tools_are
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter开发：使用SafeArea（安全区域）
软贱开发攻城狮
02-12 1万+
前言 在Flutter开发中，对于各种手机机型的适配是一个非常重要的事情，尤其是Android系统的机型太多太杂，适配起来不是易事，而且对于iOS系统的iPhone手机的“刘海”适配也是关键的一个知识点。那么本篇博文就来分享一下关于SafeArea的使用，SafeArea也是各种稀奇古怪不规则的屏幕适配的最佳利器，方便查阅使用。 原理 SafeArea是通过MediaQuery来检测屏幕尺寸，让应用程序的大小能与屏幕适配，然后返回了一个Padding Widget 来包裹住编写的页面，这样页面
Flutter组件化开发方案
01-27
当Flutter与Android、iOS的交互接口增加时，工程的复杂度也随之上升。过多的接口可能导致代码混乱，耦合度增加，一旦需要修改，可能会引发连锁反应，影响其他逻辑。同时，这样的结构不利于单元测试和代码复用。 2....
Flutter SafeArea
flutterall.com
03-09 802
博客地址：flutterall.com 先看代码： class FlutterAlign extends StatelessWidget { @override Widget build(BuildContext context) { return Align( alignment: Alignment(-1, -1), child: Container...
Flutter 组件分析之SafeArea
Eqiqi的博客
01-13 4532
SafeArea 用于**填充类似于刘海屏、异形屏之类的屏幕的边距**, 在其中加入 padding . 保证多端多设备中展示不受影响. 同时, 这样操作也可以保证在多数情况下. 跨平台多端设备ui保持一致。
Flutter 中的 SafeArea 小部件：全面指南
最新发布
smileKH的博客
05-15 1200
SafeArea是 Flutter 中的一个基础小部件，用于确保其子组件不会被系统视图（如状态栏、导航栏、刘海屏等）遮挡。它通过内部的MediaQuery和来获取屏幕的布局边界，并相应地调整其子组件的位置。如果你需要更精细的控制，可以使用SafeArea的这些属性来自定义不安全区域的处理。SafeArea(top: false, // 忽略顶部的安全区域bottom: true, // 保留底部的安全区域// ... 你的部件),
flutter学习-day20-使用SafeArea组件处理各机型的安全距离
鹏多多的博客
12-26 1619
安全区域，指的是移动端设备的可视窗口范围。处于安全区域的内容不受圆角、刘海屏、iPhone 小黑条、状态栏等的影响，也就是说，我们要做好适配，必须保证页面可视、可操作区域是在安全区域内
Flutter 安全区域SafeArea
丿灬安之若死
02-02 4202
效果 背景。。由于刘海屏泛滥。Flutter为了适配安全区域单独弄出来一个Api SafeArea 使用非常便捷 import 'package:flutter/material.dart'; class SafeAreaDemo extends StatelessWidget { @override Widget build(BuildContext context) { return SafeArea(child: Container( color: Colo
Flutter-组件框架之旅
01-27
Flutter组件使用现代的响应式框架(react-styleframework)建立，灵感来源React。核心思想，通过组件(widget)构建UI。通过给组件(Widgets)设置它们当前的配置(configuration )和状态(state)来描述它们(Widgets)的长相...
Flutter布局组件之Align
01-20
在Flutter框架中，布局组件是构建用户界面的关键部分。本文主要关注的是`Align`组件，这是一个用于对齐和相对定位子组件的简单工具。在更复杂的布局如`Stack`和`Positioned`中，虽然可以精确控制每个子元素的位置，...
Flutter组件学习—Image
02-24
之前，我们讲了Flutter中Text组件的一些用法以及API，本节我们继续学习Flutter中的Image组件，同样先上图：在Android中，我们都知道，图片的显示方式有很多，资源图片、网络图片、文件图片等等，在Flutter中也有多种...
【Flutter】四十一、Flutter解决沉浸式状态栏——SafeArea
01-07
下面是一个简单页面： import 'package:flutter/material.dart'; class SafeAreaRoute extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( appBar: AppBar( title: Text('SafeArea'), ), ); } }     注意这里的状态栏是沉浸式的，如果在Sca
prokit flutter组件库
04-25
"ProKit Flutter组件库"是专门为Flutter开发者设计的一款强大工具，它在最新的6.4版本中提供了丰富的组件集合，旨在简化UI开发流程，提高开发效率。Flutter作为一种跨平台的开发框架，以其Dart语言的高效性和热重载...
Flutter SafeArea - 异形屏适配利器
华山论码
12-02 1211
现有手机可能会出现的问题 现在的手机已经不是方方正正的屏幕了，所以我们在写一些UI的时候可能会出现如下问题： Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(this.title), ), body: ListView( itemExtent: 30, childre
flutter组件之SafeArea
u011511057的专栏
11-24 1576
#flutter组件之SafeArea ###自我理解： 把布局始终显示在首页页面的安全区域，用于适配各种异型屏幕（但是我试了一下 手机有限用的华为荣耀的刘海屏没有什么作用呀） [官网api地址]https://api.flutter.dev/flutter/widgets/SafeArea-class.html api里的视频把效果说的很明白，但是需要自备梯子 ###上代码: class Saf...
flutter 状态栏文字颜色变白
qin19930929的博客
11-30 811
用MaterialApp结合appbar来实现，flutter会自动处理，就不用调代码去处理状态栏颜色了。
Flutter 使用SafeArea终结沉浸式状态栏、刘海屏与虚拟键之乱（竖屏篇）
热门推荐
流浪的独角兽的博客
03-11 1万+
Iphone普通系列 待测 IphoneX系列： 未使用SafeArea的状况：充满全屏，顶部状态栏和底部操作区都被背景图片充满 使用SafeArea的状况：顶部状态栏和底部操作区背景变成白色，MediaQuery.of(context).padding的top值为顶部高度，bottom值为底部高度 宽高固定不变 模拟器Pixel 2 XL，Android P，模拟刘海屏，底部为虚拟按键 全屏代码...
Flutter MediaQuery探究
zhuangch的专栏
05-26 1222
Flutter MediaQuery探究 MediaQuery作用是什么呢，我们先来看看源码文档注释 /// Establishes a subtree in which media queries resolve to the given data. /// /// For example, to learn the size of the current media (e.g., the window /// containing your app), you can read the [MediaQu
SafeArea的使用
IT学霸
06-04 2874
一、背景 现在的手机屏幕尺寸外观多种多样，显示区域不再是方方正正的，一些带圆角或者是刘海屏让应用程序的布局更加复杂，甚至是需要单独适配，这对开发者来来太糟糕了。 因此SafeArea控件应用而生，SafeArea通过MediaQuery检测屏幕的尺寸使应用程序的大小与屏幕适配，自动避开遮挡区域。 它的原理是通过对被包装元素添加Padding来避开遮挡区域。因此可以分别指定上下左右4个区域是否需要添加Padding，例如下面的代码只在底部和左侧添加Padding用于避开遮挡区域。 SafeArea(
flutter 组件通信
08-31
在 Flutter 中，有几种常用的组件通信方式，包括： 1. 父组件向子组件通信：父组件可以通过构造函数将数据传递给子组件。子组件可以通过接收这些参数来获取数据并进行显示或处理。 2. 子组件向父组件通信：子组件可以使用回调函数来将数据传递给父组件。父组件可以将一个函数作为参数传递给子组件，子组件在需要时调用该函数并传递数据。 3. 兄弟组件通信：如果两个兄弟组件之间需要通信，可以通过它们共同的父组件来实现。父组件可以将一个函数作为参数传递给两个子组件，并通过这个函数来实现兄弟组件之间的通信。 4. 全局状态管理：当应用程序中的多个组件需要共享相同的状态时，可以使用全局状态管理库，如 Provider、GetX、Redux 等。这些库提供了一种在不同组件之间共享和更新状态的机制。 5. 事件总线：事件总线是一种在不同组件之间发送和接收事件的机制。可以使用第三方库如 event_bus 来实现事件总线功能。 这些是 Flutter 中常用的组件通信方式，具体使用哪种方式取决于应用程序的需求和复杂度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值