Flutter之SafeArea

最新推荐文章于 2025-01-14 15:24:40 发布

郭梧悠

最新推荐文章于 2025-01-14 15:24:40 发布

阅读量1.5k

点赞数 1

分类专栏： Flutter从入门到精通文章标签： SafeArea flutter

本文链接：https://blog.csdn.net/chunqiuwei/article/details/106329882

版权

Flutter从入门到精通专栏收录该内容

100 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文通过对比未使用和使用SafeArea的代码，详细解释了Flutter中SafeArea组件的作用。 SafeArea可以帮助开发者避免内容被设备的边框，如刘海屏的刘海部分，遮挡。通过实例展示了如何使用SafeArea包裹Container和Image，确保内容显示完整。

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

本篇博文相关资料：
Flutter之MediaQuery

本篇博文比较简单，用四张图来对比说明下SafeArea的作用！

1、未使用SafeArea的代码：

Widget build(BuildContext context) {
   
   return Container(
     color: Colors.green,///绿色背景
      child

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

郭梧悠

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

Flutter开发：使用SafeArea（安全区域）

全沾软贱开发攻城狮

02-12

1万+

前言在Flutter开发中，对于各种手机机型的适配是一个非常重要的事情，尤其是Android系统的机型太多太杂，适配起来不是易事，而且对于iOS系统的iPhone手机的“刘海”适配也是关键的一个知识点。那么本篇博文就来分享一下关于SafeArea的使用，SafeArea也是各种稀奇古怪不规则的屏幕适配的最佳利器，方便查阅使用。原理 SafeArea是通过MediaQuery来检测屏幕尺寸，让应用程序的大小能与屏幕适配，然后返回了一个Padding Widget 来包裹住编写的页面，这样页面

《Flutter 控件大全》第七十八：SafeArea

老孟Flutter

04-04

648

如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。 Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。现如今的手机已经不能提供给应用程序规整的矩形界面了，一些带圆角或者是刘海屏让应用程序的布局更...

参与评论您还未登录，请先登录后发表或查看评论

Flutter 安全区域SafeArea

丿灬安之若死

02-02

4434

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

Flutter 组件分析之SafeArea

Eqiqi的博客

01-13

5172

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

Flutter SafeArea

flutterall.com

03-09

874

博客地址：flutterall.com 先看代码： class FlutterAlign extends StatelessWidget { @override Widget build(BuildContext context) { return Align( alignment: Alignment(-1, -1), child: Container...

Flutter 沉浸式状态栏安全区域 SafeArea以外的刘海屏设置颜色

丿灬安之若死

03-25

3637

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

【Flutter】四十一、Flutter解决沉浸式状态栏——SafeArea

MAXLZ的博客

11-05

1万+

SafeArea

Flutter 使用SafeArea终结沉浸式状态栏、刘海屏与虚拟键之乱（竖屏篇）

热门推荐

流浪的独角兽的博客

03-11

1万+

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

Flutter Widgets 之 SafeArea

老孟Flutter

02-20

1977

注意：无特殊说明，Flutter版本及Dart版本如下： Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 现如今的手机已经不能提供给应用程序规整的矩形界面了，一些带圆角或者是刘海屏让应用程序的布局更加复杂，甚至是需要单独适配，这对开发者来来太糟糕了。因此SafeArea控件应用而生，SafeArea通过MediaQuery检测屏幕的尺寸使应用程序的大...

Flutter 透明状态栏及字体颜色的设置方法

08-19

主要介绍了Flutter 透明状态栏及字体颜色的设置方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

Flutter 组件之 safeArea

Tools_are的博客

02-11

848

safeArea组件

flutter SafeArea 用来解决刘海屏适配问题

senkai123的博客

11-14

1313

class FlutterAlign extends StatelessWidget { @override Widget build(BuildContext context) { return Align( alignment: Alignment(-1, -1), child: Container( child: Text( ...

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

鹏多多的博客

12-26

2233

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

Flutter的SafeArea 和 MediaQuery的用法及其应用场景

最新发布

low神

01-14

533

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

Flutter 中的 SafeArea 小部件：全面指南

smileKH的博客

05-15

2942

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

flutter组件之SafeArea

u011511057的专栏

11-24

1685

#flutter组件之SafeArea ###自我理解：把布局始终显示在首页页面的安全区域，用于适配各种异型屏幕（但是我试了一下手机有限用的华为荣耀的刘海屏没有什么作用呀） [官网api地址]https://api.flutter.dev/flutter/widgets/SafeArea-class.html api里的视频把效果说的很明白，但是需要自备梯子 ###上代码: class Saf...

Flutter开发 13.Widget-TextField、Flex、Expanded、SafeArea

xuanwenchao的专栏

04-11

2615

爪爪

flutter 状态栏颜色显示问题

郭栋的专栏

02-15

2117

...

Flutter实现沉浸式状态栏：SafeArea应用

而在第二段代码中，通过在 `Scaffold` 之上添加 `SafeArea` 并设置 `top: false`，我们告诉 Flutter 不要在顶部保留安全区域，从而让页面内容上移，达到沉浸式效果。使用 `SafeArea` 可以帮助开发者更好地管理布局...