包含flutter显示屏的词条

本篇文章给大家谈谈flutter显示屏，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 今天给各位分享flutter显示屏的知识，其中也会对进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、Flutter实践--屏幕适配
• 2、Flutter中屏幕适配，尺寸设置
• 3、Flutter全屏效果实现
• 4、Flutter 屏幕适配 -- 百分比
• 5、Flutter应用启动页设置,解决 白/黑 屏情况

Flutter实践--屏幕适配

做移动端开发flutter显示屏的小伙伴都知道flutter显示屏，针对不同型号和尺寸的手机要进行页面适配flutter显示屏，且Android和iOS适配方案各不相同，那flutter端如何进行适配呢？以下为近期flutter开发过程中关于适配的一些学习和记录~~~~

说到flutter屏幕适配，就不得不提到插件 flutter_screenutil ，提到flutter_screenutil就不得不说以下几点🥶

   默认宽1080px
   默认高1920px
   allowFontScaling为false，即不跟随系统字体大小设置变化
   初始化单位为px

需要把context传进去，因为内部是通过 MediaQuery 来获取屏幕尺寸等相关信息的

无需再传context，因为内部是通过单例 window 来获取屏幕尺寸等相关信息的

作为iOS开发，之前都是以pt为参照进行比例适配的，且架构组已经定义了一套适配相关常量，传px进去不太方便，所以需要对flutter_screenutil进行扩展

公司设计图是以iPhone X的尺寸提供的即物理设备尺寸为375x812，像素比例为750x1624,像素密度比为2

初始化仍用px来初始化

dart sdk 2.7正式支持 extension-method ，即为已有类扩展方法，从 flutter_screenutil 这种 540.w 写法点进去，我们可以看到

flutter_screenutil为num类扩展了一系列简写方法，那我们当然可以按照它这种方式进行扩展

网上提供的解决方案：
第一步：修改 pubspec.yaml

第二步：执行 flutter pub get
第三步：重启 AndroidStudio

解决方案：去掉const即可

UI设计中px、pt、ppi、dpi、dp、sp之间的关系
Dart/Flutter - 扩展方法(ExtensionMethod)

Flutter中屏幕适配，尺寸设置

1、 新版本Flutter SDK 引入flutter显示屏了 extensionflutter显示屏的机制。可以对某个class 进行扩展。（swift中有类似机制）
2、屏幕适配一直是一个老生常谈的问题flutter显示屏，随着机型越来越多，适配的场景也越来越复杂。
3、之前有flutter显示屏了解过 微信小程序的适配方案，个人一直感觉是一个比较好的方式（ iPhone6为标准尺寸）下面👇将引用小程序的方案来进行对 Flutter的尺寸设置。

size_fit.dart 文件

double_extension.dart 文件

int_extension.dart 文件

通过上面的设置，在不同设备上，展示的widget的尺寸就会不一样了。

Flutter全屏效果实现

调用SystemChrome.setEnabledSystemUIOverlays([]);
把状态栏和虚拟按键隐藏掉，
跳转到其他页面后需要调用
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay-]);把状态栏显示出来，
需要一起调用底部虚拟按键
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay-, SystemUiOverlay.bottom])

Flutter 屏幕适配 -- 百分比

本文是根据 Daniele Cambi flutter显示屏的文章 Flutter — Effectively scale UI according to different screen sizes 总结而来 ：

文章地址 ： https://medium.com/flutter-community/flutter-effectively-scale-ui-according-to-different-screen-sizes-2cb7c115ea0a （自备扶梯）

本文核心思想 ：

作者创建一个矩形 ：

在iPhone 5s (4" Display) and on an iPhone XS Max (6,46" Display)，

显示效果flutter显示屏的差异 ！！！ 如何解决这个问题呢 ？

注： Flutter 使用flutter显示屏的 逻辑像素 logical pixels 为单位 ，和 Android的 dp还是不一样

具体 lp 有什么效果，网上也没查到具体资料😢

如何解决这个问题呢 ？

作者认为可以把屏幕认为是一个 ， 100 * 100 的格子（或者认为水平方向和竖直方向，平均分成100个单位 ，恩 ，是不是就是Android中的百分比布局了）

作者新建一个帮助类 ：

初始化方法 ：

使用帮助类来设置widget大小 ：

效果图 ：

在Flutter中有一个非常方便的小部件，可以有效地处理这些问题，它被称为“安全区域”( SafeArea)。

个人理解，flutter , 把 异形屏 ，导航栏相关区域称为 安全区域 。

作者的思想 ：屏幕的长宽去掉安全区域的大小，然后分成 100份 ，算出每一块的单位长度 。

flutter显示屏我们可以使用 SizeConfig.safeBlockHorizontal or SizeConfig.safeBlockVertical为单位 ，对文字进行缩放 。

真实的软件开发过程，一般是设计人员先设计好设计图 or 设计稿（一般是1080px * 1920px为基准），然后研发人员进行开发

那我们就把屏幕宽和长 ，分成 1080 和 1920 个单位 ，然后按设计图上的标注去填写相应widgets的大小

所以我认为 flutter 非常适合百分比布局（天生适合按比例布局）

而Android 百分比布局，适配工作量非常大，兼容性差

在网上发现了一个开源库 ，原理我觉得差不多，大家可以学习一下

flutter_screenutil

https://github.com/OpenFlutter/flutter_screenutil/

如果觉得文章有用，帮忙点个喜欢❤️ ，😘😘😘

Flutter应用启动页设置,解决 白/黑 屏情况

出现此情况的原因有两种

解决:
找到 \app\src\main\res\drawable\launch_background.xml 文件，这个里面初始化了布局标签,只需要把图片替换为我们自己的就可以。

或者根据不同手机的分辨率 在mipmap下放置图片例如：

之后前往 styles.xml 文件设置启动页

重新打包就可以看到 刚刚设置的启动页了
效果例如：
[图片上传失败...(image-7e5c2-1586668143446)]

至此可以流畅的打开启动页了

关于flutter显示屏和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 flutter显示屏的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于、flutter显示屏的信息别忘了在本站进行查找喔。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。