Flutter 不同设备适配

最新推荐文章于 2024-09-26 20:17:03 发布

郭文武

最新推荐文章于 2024-09-26 20:17:03 发布

阅读量1k

点赞数

分类专栏： flutter 文章标签： flutter屏幕适配

本文链接：https://blog.csdn.net/isusjjyy/article/details/102799825

版权

本文介绍了如何使用flutter_screenutil插件解决Flutter应用在不同分辨率和像素比设备上的适配问题。通过在pubspec.yaml中引入插件，并在MaterialApp的home页面设置设计稿的宽度和高度，可以确保适配效果。参考flutter_screenutil中文文档以了解更多详细信息。

摘要由CSDN通过智能技术生成

屏幕适配

引入flutter_screenutil插件

pubspec.yaml文件中引入：

dependencies:
  flutter_screenutil: ^0.5.3

作用及使用

解决不同分辨率，不同像素比屏幕适配问题

参考网址：flutter_screenutil中文文档

注意事项：在使用之前请设置好设计稿的宽度和高度，传入设计稿的宽度和高度(单位px) 一定在MaterialApp的home中的页面设置(即入口文件，只需设置一次),以保证在每次使用之前设置好了适配尺寸：

 //填入设计稿中设备的屏幕尺寸
 //默认 width : 1080px , height:1920px , allowFontScaling:false
 ScreenUtil.instance = ScreenUtil.getInstance()..init(context);

 //假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) 
 ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);

 //设置字体大小根据系统的“字体大小”辅助选项来进行缩放,默认为false
 ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context