[Flutter] flutter刘海屏处理、flutter沉浸式状态栏

最新推荐文章于 2024-04-11 15:16:35 发布
最新推荐文章于 2024-04-11 15:16:35 发布
阅读量5.4k 收藏 1
点赞数 3
分类专栏： Flutter 文章标签： flutter 移动开发 dart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yongshiaoteman/article/details/104199012
版权
本文介绍了Flutter中如何处理刘海屏问题，包括使用SafeArea组件的简便方法和手动获取屏幕刘海高度的复杂方式。同时，文章还讨论了实现iOS和Android系统的沉浸式状态栏的设置方法。
摘要由CSDN通过智能技术生成

针对于非传统矩形屏幕(如刘海屏等), flutter需要进行处理, 否则会出现重叠, 遮挡等问题

刘海屏普通处理

方法一: 使用SafeArea组件

  • flutter提供了SafeArea内置组件
  • 将需要放在可视区域的组件包裹进入即可
    示例:
	// 将文字"123"放进可视区域内
	SafeArea(
        child: Text("123"),
      );

此方式较为方便, 代码美观. 方便快捷, 一步到位

方法二: 手动获取屏幕刘海高度

使用如下方法获取:
最低0.47元/天 解锁文章
阿航_
关注
专栏目录
解决Flutter旋转屏幕状态栏空缺的问题
weixin_44354735的博客
09-02 1084
【flutter】解决打孔屏旋转屏幕，原状态栏位置空缺的问题。
《Flutter入门疑难杂症》 Flutter的UI适配方案
Jda_简单爱
08-08 672
参考了大神的，直接贴代码： import 'package:flutter/material.dart'; import 'dart:ui' as ui show window; /** * @Author: thl * @GitHub: https://github.com/Sky24n * @Email: 863764940@qq.com * @Email: sky24no@gmail.com * @Description: Screen Util. * @Date: 2018/9/8
Flutter 使用SafeArea终结沉浸式状态栏、刘海屏与虚拟键之乱（竖屏篇）
流浪的独角兽的博客
03-11 1万+
Iphone普通系列 待测 IphoneX系列： 未使用SafeArea的状况：充满全屏，顶部状态栏和底部操作区都被背景图片充满 使用SafeArea的状况：顶部状态栏和底部操作区背景变成白色，MediaQuery.of(context).padding的top值为顶部高度，bottom值为底部高度 宽高固定不变 模拟器Pixel 2 XL，Android P，模拟刘海屏，底部为虚拟按键 全屏代码...
Flutter iPhoneX 刘海屏适配
ly410726的专栏
12-19 1503
对于Flutter来说，刘海屏主要适配的是上下的边距， 需要把不可点击的区域留出来，同时要把背景颜色和图片放上去。 对于上面的边距， 如果使用 Scaffold ， appBar已经自动为我们做好了适配，直接使用就行了。 如果使用的是自定义布局的话， Flutter 提供了媒体查询的接口， 可与获取到上边距和下边距的值。 final double topPadding = MediaQue...
Flutter 刘海屏全屏
唐僧的专栏
12-05 2271
Flutter 刘海屏全屏
flutter 获取屏幕宽度高度 通知栏高度等屏幕信息
卓原的进化之旅
09-14 3万+
MediaQuery MediaQuery.of(context) 包含了一些屏幕的属性： size ： 一个包含宽度和高度的对象，单位是px print(MediaQuery.of(context).size); //输出： Size(411.4, 683.4) devicePixelRatio : 返回设备的像素密度 print(MediaQuery.of(...
Flutter适配安卓刘海、水滴屏显示全屏
adojayfan的博客
03-09 2994
配置Android 找到android/app/src/main/res/values目录,打开styles.xml 将shortEdges放到style标签内。 <?xml version="1.0" encoding="utf-8"?> <resources> <!-- Theme applied to the Android Window while the process is starting --> <style name="Laun.
Android 沉浸式(透明)状态栏细研-超级细还附 Demo
ZeroFlutter
04-21 689
前言 在 Android 4.4 中引入了沉浸模式的功能，但这个版本非真正的沉浸模式，应该说是透明模式。Android 5.0 以后才可以在系统层面实现真正的沉浸式状态栏。 沉浸式状态栏是为了与当前使用的 App 页面风格统一，不会显的那么突兀，保持友好且一致的用户体验而设计，是现在主流 App 必备的适配内容。今天我们就细细的研究一下沉浸式状态栏的适配。 先看效果 实现的功能 真透明状态栏（个别机型无法适配全透明，如锤子） 动态改变 ToolBar 或者自定义的 TitleBar 颜色，修改背景色即.
flutter 解决 iPhone X 等刘海屏手机导航栏/底部黑线遮挡布局的方法
zhumj_zhumj的专栏
10-30 7756
在上一节（改变 TabBar 背景颜色的方法）中有发现的一个问题：在 iPhone X 等刘海屏手机中，会出现页面被导航栏或者底部黑线遮挡的问题： 解决办法有两种： 使用以下代码获取手机状态栏和底部黑线的高度，然后设置 Widget 的 Padding 或者 Margin： //获取状态栏高度（上边距） final double topPadding = MediaQuery.of(cont...
flutter 屏幕尺寸适配和字体大小适配的实现
08-25
* `ScreenUtil.statusBarHeight`：状态栏高度，刘海屏会更高 单位 px * `ScreenUtil.textScaleFactory`：系统字体缩放比例 * `ScreenUtil().scaleWidth`：实际宽度的 dp 与设计稿 px 的比例 * `ScreenUtil()....
flutter全屏背景图(包括appbar和状态栏)以及沉浸状态栏的设置
新技术革命
04-23 8586
设置背景图还是挺简单的，直接container里加个decration然后加个图片就行了，就像这样 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: '
Flutter-刘海屏适配SafeArea
IT技术专栏
08-01 2100
SafeArea:能很好的解决刘海，不规则屏幕的显示问题。
flutter SafeArea 用来解决刘海屏适配问题
senkai123的博客
11-14 1220
class FlutterAlign extends StatelessWidget { @override Widget build(BuildContext context) { return Align( alignment: Alignment(-1, -1), child: Container( child: Text( ...
Flutter AppBar、BottomNavigationBar及状态栏的高度；屏幕宽高
androidhyf的博客
12-30 8225
1.AppBar、BottomNavigationBar 高度 flutter插件包位置:/flutter/src/material/constans.dart 中代码 /// * [kMinInteractiveDimensionCupertino] /// * The Material spec on touch targets at <https://material.io/design/usability/accessibility.html#layout-typography>.
[译] Flutter —— 根据不同屏幕尺寸高效的适配 UI
最新发布
2401_84121573的博客
04-11 1151
都说三年是程序员的一个坎，能否晋升或者提高自己的核心竞争力，这几年就十分关键。技术发展的这么快，从哪些方面开始学习，才能达到高级工程师水平，最后进阶到Android架构师/技术专家？我总结了这 5大块；我搜集整理过这几年阿里，以及腾讯，字节跳动，华为，小米等公司的面试题，把面试的要求和技术点梳理成一份大而全的“ Android架构师”面试 PDF（实际上比预期多花了不少精力），包含知识脉络 + 分支细节。Java语言与原理；大厂，小厂。Android面试先看你熟不熟悉Java语言高级UI与自定义view。
flutter 获取appbar高度，状态栏高度
python4_1的博客
02-08 1146
AppBar高度，状态栏高度
flutter 屏幕适配 字体大小适配
热门推荐
卓原的进化之旅
09-21 5万+
前言: 现在的手机品牌和型号越来越多，导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同， 比如我们的设计稿一个View的大小是300px，如果直接写300px，可能在当前设备显示正常，但到了其他设备可能就会偏小或者偏大，这就需要我们对屏幕进行适配。 安卓原生的话有自己的适配规则，可以根据不同的尺寸建立不同的文件夹，系统会根据当前的设备尺寸取对应的大小的布局。而flutter本身并没有适...
Flutter SafeArea - 异形屏适配利器
weixin_33834910的博客
05-24 2168
相信现在大部分的人已经了解过 Flutter. 如果还没有，那么可以去 Flutter官网 了解一下 现有手机可能会出现的问题 现在的手机已经不是方方正正的屏幕了，所以我们在写一些UI的时候可能会出现如下问题： Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Tex...
Flutter实现沉浸式状态栏：SafeArea应用
"在 Flutter 开发中，处理沉浸式状态栏是一个常见的需求，特别是在设计时需要考虑全面屏幕体验的应用中。本文将介绍如何使用 Flutter 的 `SafeArea` 来解决这个问题。 首先，让我们回顾一下什么是沉浸式状态栏。在 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值