Flutter库:flutter_screenutil 【屏幕适配】

Pub地址:flutter_screenutil       Github地址:flutter_screenutil       Github中文文档:flutter_screenutil

一、初始化

flutter_screenutil结合Getx,入口如下。

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
        // 传入UI设计图的尺寸大小
        designSize: const Size(375, 812),
        builder: (context, child) {
          return GetMaterialApp(
            title: 'app title',
            initialRoute: '/splash',
            initialBinding: SplashBinding(),
            getPages: Routes.routePage,
            builder: ((context, child) {
              return MediaQuery(
                // 全局设置文字大小不随系统设置改变
                data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
                child: child!,
              );
            }),
          );
        });
  }
}

 

二、使用

    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  

 

三、实例

class SplashPage extends GetView<SplashController> {
  const SplashPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: 180.w,
        height: 320.h,
        color: Colors.black54,
        child: Text(
            '设备宽度${ScreenUtil().screenWidth},设备高度${ScreenUtil().screenHeight},状态栏高度${ScreenUtil().statusBarHeight}'),
      ),
    );
  }
}
除非注明,否则均为呆小猴博客原创文章,转载必须以链接形式标明本文链接!付费资源为虚拟物品,一经出售,概不退款!
呆小猴 » Flutter库:flutter_screenutil 【屏幕适配】

发表回复

呆小猴 · 专注安全学习与分享

关于作者 联系作者