189 8069 5689

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 扩展NestedScrollView (三)下拉刷新的解决

但是在使用官方的下拉刷新 RefreshIndicator 发现没法使用。

默默打开了源码,我们再来看一看。

首先,我调试到这个,发现notification.depth不为0,其实也好理解,因为NestedScrollView里面有很多能滚动的东西。默认的RefreshIndicator要求的是必须是第一层的它才其效果。

那么我改成,再试试呢?

在_handleScrollNotification方法中,我们可以看到会有很多ScrollNotification进来,不同的,当你滑动在一个不能滚动的list里面的时候,获取的viewportDimension是为0.。这会覆盖掉之前有viewportDimension的值。

所以我做了以下改动

对于NestedScrollView 来说。我们只需要关注最大能滚动viewportDimension,用这个来驱动整个下拉刷新.

用法跟官方一致

最后放上 Github extended_nested_scroll_view ,如果你有更好的方式解决这个问题或者有什么不明白的地方,都请告诉我,由衷感谢。

Flutter_图片分辨率适配及批量拓展使用

flutter开发中,图片的引用是必不可少的,所以为了提高效率和精准度,我们需要对不同分辨率的手机使用相对应的切图图片,本章介绍如何进行 图片分辨率适配 和 图片批量拓展处理 。

flutter中会首先根据系统的devicePixelRatio(每一个逻辑像素包含多少个原始像素,可以通过MediaQueryData.devicePixelRatio来得到)来找对应倍数的文件夹下的图片,如果没有对应倍数,找最接近的。

所以在flutter项目中,我们需要构建对应的倍数像素文件夹

之后再pubspec.yaml中,配置assets文件后就可以使用了(如使用"assets/images/jay.png",会自动适配该像素下最接近的jay图片)。

使用flutter-img-sync插件批量化处理,具体操作如下

目前还不能处理gif、webp等格式的图片,而且如果和上边介绍的不同像素比适配方案一起使用的话,由于进行了精准定位,所以指定图片后就不能进行像素适配,这是目前还存在的较大问题,所以目前两者方案只能暂时取一使用。


网站题目:flutter扩展,Flutter 框架
路径分享:http://jkwzsj.com/article/dsdhdde.html

其他资讯