【Flutter】屏幕像素适配方案 ( flutter_screenutil 插件 )
文章目录
- 一、推荐使用 flutter_screenutil 插件
- 二、flutter_screenutil 插件使用
- 1、导入 flutter_screenutil 插件依赖
- 2、 flutter_screenutil 初始化
- 3、 flutter_screenutil 使用 API
- 4、 设置字体
- 5、 设置宽高
- 三、代码示例
- 四、博客资源
一、推荐使用 flutter_screenutil 插件
flutter_screenutil 插件相关资料 :
- 插件地址 : https://pub.dev/packages/flutter_screenutil
- 插件使用案例 : https://pub.dev/packages/flutter_screenutil/example
- 插件安装文档 : https://pub.dev/packages/flutter_screenutil/install
- GitHub 地址 : https://github.com/OpenFlutter/flutter_screenutil
- 中文文档 ( 强烈推荐看这个文档 ) : https://github.com/OpenFlutter/flutter_screenutil/blob/master/README_CN.md
- 插件作者博客 : https://blog.csdn.net/u011272795/article/details/82795477
二、flutter_screenutil 插件使用
1、导入 flutter_screenutil 插件依赖
在 pubspec.yaml 中添加依赖 ;
dependencies:flutter_screenutil: ^5.0.0+2
点击右上角的 " Pub get " 按钮 , 下载该依赖 ;
导入 Dart 包后 , 可以在文件中使用该插件包的函数 ;
import 'package:flutter_screenutil/flutter_screenutil.dart';
2、 flutter_screenutil 初始化
在 MyApp 中 , 使用 ScreenUtilInit 作为最顶层的组件 , 包裹 MaterialApp 组件 ;
设置其 designSize 参数 , 用于设置设计稿的宽度和高度 ;
代码示例 :
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {/// 在 MaterialApp 组件外层包裹一层 ScreenUtilInit 组件return ScreenUtilInit(/// 设置设计稿宽高designSize: Size(750, 1334),/// 设置原本要显示的 MaterialAppbuilder: ()=>MaterialApp(),);}
}
3、 flutter_screenutil 使用 API
flutter_screenutil API 用法 :
在 750 x 1337 的设计稿中 , 获取 540 对应的宽度
ScreenUtil().setWidth(540)
也可以使用
540.w
获取相同的值 ;
API 参考 :
ScreenUtil().setWidth(540) (sdk>=2.6 : 540.w) //根据屏幕宽度适配尺寸ScreenUtil().setHeight(200) (sdk>=2.6 : 200.h) //根据屏幕高度适配尺寸(一般根据宽度适配即可)ScreenUtil().radius(200) (sdk>=2.6 : 200.r) //根据宽度或高度中的较小者进行调整ScreenUtil().setSp(24) (sdk>=2.6 : 24.sp) //适配字体ScreenUtil.pixelRatio //设备的像素密度ScreenUtil.screenWidth (sdk>=2.6 : 1.sw) //设备宽度ScreenUtil.screenHeight (sdk>=2.6 : 1.sh) //设备高度ScreenUtil.bottomBarHeight //底部安全区距离，适用于全面屏下面有按键的ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高ScreenUtil.textScaleFactor //系统字体缩放比例ScreenUtil().scaleWidth // 实际宽度设计稿宽度的比例ScreenUtil().scaleHeight // 实际高度与设计稿高度度的比例ScreenUtil().orientation //屏幕方向0.2.sw //屏幕宽度的0.2倍0.5.sh //屏幕高度的50%
4、 设置字体
Text("顶部内容", style: TextStyle(fontSize: 40.sp),)
5、 设置宽高
/// 宽高是宽度的 0.5 倍 , 显示正方形
Container(width: 0.5.sw,height: 0.5.sw,color: Colors.green,
),
三、代码示例
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';/// 使用 MediaQuery 进行全面屏适配
void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {/// 在 MaterialApp 组件外层包裹一层 ScreenUtilInit 组件return ScreenUtilInit(/// 设置设计稿宽高designSize: Size(750, 1334),/// 设置原本要显示的 MaterialAppbuilder: ()=>MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: HomePage(),),);}
}class HomePage extends StatelessWidget{@overrideWidget build(BuildContext context) {/// 获取当前的 padding 信息final EdgeInsets edgeInsets = MediaQuery.of(context).padding;return Container(decoration: BoxDecoration(color: Colors.white,),padding: EdgeInsets.fromLTRB(0, edgeInsets.top, 0, edgeInsets.bottom),child: Column(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [Text("顶部内容", style: TextStyle(fontSize: 40.sp),),/// 宽高是宽度的 0.5 倍 , 显示正方形Container(width: 0.5.sw,height: 0.5.sw,color: Colors.green,),Text("底部内容", style: TextStyle(fontSize: 20.sp),),],),);}
}/*ScreenUtil().setWidth(540) (sdk>=2.6 : 540.w) //根据屏幕宽度适配尺寸ScreenUtil().setHeight(200) (sdk>=2.6 : 200.h) //根据屏幕高度适配尺寸(一般根据宽度适配即可)ScreenUtil().radius(200) (sdk>=2.6 : 200.r) //根据宽度或高度中的较小者进行调整ScreenUtil().setSp(24) (sdk>=2.6 : 24.sp) //适配字体ScreenUtil.pixelRatio //设备的像素密度ScreenUtil.screenWidth (sdk>=2.6 : 1.sw) //设备宽度ScreenUtil.screenHeight (sdk>=2.6 : 1.sh) //设备高度ScreenUtil.bottomBarHeight //底部安全区距离，适用于全面屏下面有按键的ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高ScreenUtil.textScaleFactor //系统字体缩放比例ScreenUtil().scaleWidth // 实际宽度设计稿宽度的比例ScreenUtil().scaleHeight // 实际高度与设计稿高度度的比例ScreenUtil().orientation //屏幕方向0.2.sw //屏幕宽度的0.2倍0.5.sh //屏幕高度的50%*/
运行效果 :
四、博客资源
GitHub 地址 : https://github.com/han1202012/flutter_screen_adaption
【Flutter】屏幕像素适配方案 ( flutter_screenutil 插件 )相关推荐
- uni-app 对照设计稿还原不同屏幕像素适配（iPhone X）
最近项目中需要高频度使用单位像素换算,以适配不同屏幕大小的需求,这里我以蓝湖为例,下面我给出换算步骤: 1.把蓝湖设计稿选到 ios 端,这时候页面单位变成了pt,因为我们iPhone X的屏幕和这个 ...
- flutter 屏幕尺寸适配 字体大小适配，android面试常用算法
width: ScreenUtil().setWidth(375), height: ScreenUtil().setHeight(200), ), 适配字体: ScreenUtil().setSp( ...
- 移动端与大屏幕自适应适配方案
vue3+cli4.x+lib-flexible+postcss-pxtorem的移动端与大屏幕适配方案 一.安装并配置相应插件 1.安装lib-flexible与postcss-pxtorem 2. ...
- 摩客怎么设置安卓的dp_安卓屏幕完美适配方案——独家秘笈
一.为什么要适配 由于Android系统的开放性,任何用户.开发者.硬件厂商.运营商都可以对Android系统和硬件进行定制,修改成他们想要的样子. 但是这种"碎片化"到达什么程度 ...
- 安卓屏幕完美适配方案——独家秘笈
一.为什么要适配 由于Android系统的开放性,任何用户.开发者.硬件厂商.运营商都可以对Android系统和硬件进行定制,修改成他们想要的样子. 但是这种"碎片化"到达什么程度 ...
- 安卓屏幕完美适配方案，成功入职网易月薪35K
2.分辨率: 手机在横向.纵向上的像素点数总和,一般描述成 宽*高 , 即横向像素点个数*纵向像素点个数. 3.屏幕尺寸(in): 手机对角线的物理尺寸,单位 英寸(inch),一英寸大约2.54cm ...
- 【可视化大屏】屏幕多分辨率适配方案
一.任意屏幕下保持16:9的比例等比缩放 https://blog.csdn.net/weixin_57756140/article/details/123681114 1.背景 数据大屏项目,需要适 ...
- 数据可视化大屏，屏幕多分辨率适配方案，且在任意屏幕下保持16:9的比例等比缩放
背景 数据大屏项目,需要适配不同屏幕,且在任意屏幕下保持16:9的比例,保持显示效果一致,屏幕比例不一致两边留黑即可 分析 不同屏幕宽高比例(和设计稿16:9)相比会有两种情况: 1.更宽:(wind ...
- Android性能优化—屏幕适配方案
为什么要做适配?Android碎片化 Android系统碎片化:基于Google原生系统,小米定制的MIUI.魅族定制的flyme.华为定制的EMUI等等: Android机型屏幕尺寸碎片化:5寸.5 ...
最新文章
- 图解 SQL，这也太形象了吧！
- MySQL的查询性能优化——《深究MySQL》
- DEDE 字符串操作常见问题
- mac 使用Karabiner配置键盘映射(2)-核心标签的解读
- 省选＋NOI 第三部分 树上问题
- 简单好用的sshfs -- 通过ssh映射远程路径（转）
- activemq linux教程,Linux及Windows下ActiveMQ下载与安装教程
- Python爬虫系列：使用selenium+Edge查询指定城市天气情况
- mysql分页下表_有关Mysql分表分页问题
- Perl 脚本命令行传入参数
- [软件工程基础实验]生命游戏
- 用户和计算机硬盘系统的接口,硬盘接口类型,教您怎么看硬盘接口的类型
- SCL编写的阀门块实例
- 计算机电源原如何确定正常,如何判断笔记本电脑电源是否工作 要点在这里
- 学计算机的人可以定位找人吗,电脑如何实现查找“附近的人”？
- html5 按钮效果,7款外观迷人的HTML5/CSS3 3D按钮特效
- 云锁和悬镜服务器哪个好,安全狗、悬镜、云锁、云帮手建议用哪个比较好？
- 如何查看电脑操作系统及系统类型
- javascript 去掉html标签,js怎么去掉html标签
- iOS中assign和weak修饰符的区别