Flutter屏幕适配 [flutter_screenutil]

安装依赖:

pub地址:https://pub.dev/packages/flutter_screenutil

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

dependencies:
  flutter_screenutil: ^5.5.2 #屏幕适配

使用的地方导入包:

import 'package:flutter_screenutil/flutter_screenutil.dart';

1.初始化

方法一:

Future<void> main() async {
  runApp(ScreenUtilInit(
    child: GetMaterialApp(
      title: "Application",
      initialRoute: AppPages.INITIAL,
      getPages: AppPages.routes,
    ),
  ));
}
//使用ScreenUtilInit 组件包裹

方法二:

  Widget build(BuildContext context) {
    ScreenUtil.init(context);//初始化
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'HomeView',
          style: TextStyle(
            fontSize: 20,
            // fontSize: ScreenUtil().setSp(20),
          ),
        ),
        // centerTitle: true,
      ),
      body: Container(
        color: Colors.red,
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Column(
          children: [
            Container(
              color: Colors.black45,
              width: MediaQuery.of(context).size.width,
              // height: ScreenUtil().setWidth(20),
              height: 20,
            ),
          ],
        ),
      ),
    );
  }
//在需要的地方,widget的build方法下面调用一次。

属性:

属性 类型 默认值 描述
designSize Size Size(360, 690) 设计稿中设备的尺寸(单位随意,建议dp,但在使用过程中必须保持一致)
builder Widget Function() Container() 一般返回一个MaterialApp类型的Function()
orientation Orientation portrait 屏幕方向
splitScreenMode bool false 支持分屏尺寸
minTextAdapt bool false 是否根据宽度/高度中的最小值适配文字
context BuildContext null 传入context会更灵敏的根据屏幕变化而改变

使用api:

    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)【*】

    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; //屏幕方向
    12.sm; // 取12和12.sp中的最小值
    0.2.sw; //屏幕宽度的0.2倍
    0.5.sh; //屏幕高度的50%
    20; // SizedBox(height: 20 * scaleHeight)
    20.horizontalSpace; // SizedBox(height: 20 * scaleWidth)

dart sdk>=2.6

可以使用扩展函数: example: 不用这个:

    Container(
      width: ScreenUtil().setWidth(50),
      height: ScreenUtil().setHeight(200),
    );

而是用这个:

Container( 
    width: 50.w,
    height:200.h
 )
图片[1]-Flutter屏幕适配 [flutter_screenutil]-IT网络技术分享
图片[2]-Flutter屏幕适配 [flutter_screenutil]-IT网络技术分享
THE END
喜欢就支持一下吧
点赞7 分享