在flutter中,屏幕适配非常简单,只需要使用一个扩展即可flutter_screenutil
一 原理分析
flutter_screenutil
的逻辑就是,你设置好你的UI的屏幕尺寸,然后她会根据你后续设置的值
和当前屏幕的比例进行计算并赋值
二 如何使用
- 引入包
使用
flutter pub add flutter_screenutil
命令安装最新版
或者 直接在pubspec.yaml
里手动引入flutter_screenutil: ^5.9.0
- 基本配置
我们需要在
main.dart
文件里进行配置后,才可以在页面中使用
具体配置方法如下、
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'app/routes/app_pages.dart';
void main() {
runApp(
ScreenUtilInit(
designSize: const Size(1080, 2400), //设计稿宽高的px
minTextAdapt: true, //是否根据宽度/高度中的最小值适配文字
splitScreenMode: true, //支持分屏尺寸
builder: (context,child){
return GetMaterialApp(
title: "Application",
initialRoute: AppPages.INITIAL,
getPages: AppPages.routes,
);
},
),
);
}
注意:必须使用
ScreenUtilInit
包裹,才可以使用。接下来,你就可以在页面里进行配置了
- 正式使用
抄袭一下官方文档提供的使用方法
ScreenUtil().setWidth(540) (dart sdk>=2.6 : 540.w) //根据屏幕宽度适配尺寸
ScreenUtil().setHeight(200) (dart sdk>=2.6 : 200.h) //根据屏幕高度适配尺寸(一般根据宽度适配即可)
ScreenUtil().radius(200) (dart sdk>=2.6 : 200.r) //根据宽度或高度中的较小者进行调整
ScreenUtil().setSp(24) (dart sdk>=2.6 : 24.sp) //适配字体
12.sm // 取12和12.sp中的最小值
ScreenUtil.pixelRatio //设备的像素密度
ScreenUtil.screenWidth (dart sdk>=2.6 : 1.sw) //设备宽度
ScreenUtil.screenHeight (dart 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%
20.setVerticalSpacing // SizedBox(height: 20 * scaleHeight)
20.horizontalSpace // SizedBox(height: 20 * scaleWidth)
const RPadding.all(8) // Padding.all(8.r) - 获取到const的优点
EdgeInsets.all(10).w //EdgeInsets.all(10.w)
REdgeInsets.all(8) // EdgeInsets.all(8.r)
EdgeInsets.only(left:8,right:8).r // EdgeInsets.only(left:8.r,right:8.r).
BoxConstraints(maxWidth: 100, minHeight: 100).w //BoxConstraints(maxWidth: 100.w, minHeight: 100.w)
Radius.circular(16).w //Radius.circular(16.w)
BorderRadius.all(Radius.circular(16)).w
当然,看到这篇文章时,你几乎是在使用
3.x
版本的flutter sdk
,所以
//我们设置宽度应该是这样:
200.w
//我们设置高度应该是这样:
200.h
//我们设置字体应该是这样:
24.sp
接下来我们看一段代码
Column(
children: [
Container(
color: Colors.red,
width: 1080.w, //设置宽度
height: 500.h, //设置高度
),
Container(
color: Colors.green,
width: 1080.w,
height: 300.h,
child: Text(
"测试字体",
style: TextStyle(fontSize: 32.sp), //设置字体
),
),
],
),
- 封装类
为了避免包更新导致的用法更改(其实随着
flutter
的更新,这个包用法也变过几次),我们将其封装成类,来使用
我们新建一个ScreenAdapter
类
import 'package:flutter_screenutil/flutter_screenutil.dart';
class ScreenAdapter{
//设置宽度
static width(num v){
return v.w;
}
//设置高度
static height(num v){
return v.h;
}
//设置字体
static fontSize(num v){
return v.sp;
}
//获取屏幕宽度
static getScreenWidth(){
return 1.sw;
}
//获取屏幕高度
static getScreenHeight(){
return 1.sh;
}
}
- 封装类的时候
看下面代码
Container(
color: Colors.red,
width: ScreenAdapter.width(1080),
height: ScreenAdapter.height(500),
),
- 结束