Flutter屏幕响应式适配插件responsive_screen_utils的使用

responsive_screen_utils

A flutter插件用于适应屏幕、动态宽度和高度以及字体大小。让您的UI在不同屏幕尺寸上合理布局！

注意：responsive_screen_utils插件仍在开发中，某些API可能尚未可用。

使用

添加依赖

请在安装前检查最新版本。如果新版本有问题，请使用旧版本：

dependencies:
  flutter:
    sdk: flutter
  # 添加 responsive_screen_utils
  responsive_screen_utils: ^{latest version}

导入到Dart代码

import 'package:responsive_screen_utils/responsive_screen_utils.dart';

属性

初始化并设置适合的大小和字体大小以根据系统的“字体大小”可访问性选项进行缩放

在使用之前，请设置设计草案的大小，即设计草案的宽度和高度。

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 设置适合的大小（填写设计草案中的设备屏幕大小，单位为dp）
    return ResponsiveScreenUtilInit(
      designSize: Size(360, 690),
      allowFontScaling: false,
      child: MaterialApp(
        // 其他配置...
      ),
    );
  }
}

使用

API

传递设计草案中的dp大小

ResponsiveScreenUtil().setWidth(540.0)  (dart sdk>=2.6 : 540.w) // 适应屏幕宽度
ResponsiveScreenUtil().setHeight(200.0) (dart sdk>=2.6 : 200.h) // 适应屏幕高度，在一般情况下，高度仍然使用x.w
ResponsiveScreenUtil().radius(200.0) (dart sdk>=2.6 : 200.r)    // 适应宽度或高度较小的一方
ResponsiveScreenUtil().setSp(24.0)      (dart sdk>=2.6 : 24.sp) // 适配字体
ResponsiveScreenUtil().setSp(24.0, allowFontScalingSelf: true)  (dart sdk>=2.6 : 24.ssp) // 适配字体（字体将根据文本大小可访问性设置进行缩放）
ResponsiveScreenUtil().setSp(24.0, allowFontScalingSelf: false) (dart sdk>=2.6 : 24.nsp) // 适配字体（字体不会根据文本大小可访问性设置进行缩放）

ResponsiveScreenUtil().pixelRatio       // 设备像素密度
ResponsiveScreenUtil().screenWidth   (dart sdk>=2.6 : 1.sw)    // 设备宽度
ResponsiveScreenUtil().screenHeight  (dart sdk>=2.6 : 1.sh)    // 设备高度
ResponsiveScreenUtil().bottomBarHeight  // 底部安全区域距离，适用于全屏按钮
ResponsiveScreenUtil().statusBarHeight  // 状态栏高度，刘海屏会更高
ResponsiveScreenUtil().textScaleFactor  // 系统字体缩放因子

ResponsiveScreenUtil().scaleWidth // 实际宽度与UI设计的比例
ResponsiveScreenUtil().scaleHeight // 实际高度与UI设计的比例

0.2.sw  // 屏幕宽度的0.2倍
0.5.sh  // 屏幕高度的50%

适应屏幕大小

传递设计草案中的dp大小（初始化时的单位相同）：

适应屏幕宽度：ResponsiveScreenUtil().setWidth(540)，

适应屏幕高度：ResponsiveScreenUtil().setHeight(200)，一般来说，高度最好适应宽度

如果您的dart sdk>=2.6，可以使用扩展函数：

例如：

代替：

Container(
width: ResponsiveScreenUtil().setWidth(50.0),
height:ResponsiveScreenUtil().setHeight(200.0),
)

您可以这样使用：

Container(
width: 50.w,
height:200.h
)

注意：

高度也可以使用setWidth来确保它不发生变形（当您想要一个正方形时）

setHeight方法主要用于适应高度，当您希望控制UI上的屏幕高度与实际显示的高度一致时使用。

一般来说，50.w != 50.h。

// 例如：

/// 如果您想显示一个正方形：
/// UI可能会显示一个矩形：
Container(
           width: 375.0.w,
           height: 375.0.h,
            ),
            
/// 如果您想显示一个正方形：
Container(
           width: 300.0.w,
           height: 300.0.w,
            ),

或者

Container(
           width: 300.0.r,
           height: 300.0.r,
            ),

适配字体

// 接收字体大小（单位与初始化时相同），字体不会根据系统字体大小进行缩放
//(在初始化ResponsiveScreenUtil时允许allowFontScaling)
ResponsiveScreenUtil().setSp(28) 
28.sp   

// 接收字体大小，单位为像素，字体将根据系统字体大小进行缩放
//(如果某个地方遵循全局allowFontScaling设置)
ResponsiveScreenUtil().setSp(24, allowFontScalingSelf: true)
28.ssp

//(如果某个地方不遵循全局allowFontScaling设置)
ResponsiveScreenUtil().setSp(24, allowFontScalingSelf: false)
28.nsp

// 例如：
Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                    '我的字体大小在设计草案中是24dp，不会随着系统变化。',
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: ResponsiveScreenUtil().setSp(24),
                    )),
                Text(
                    '我的字体大小在设计草案中是24dp，会随着系统变化。',
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: ResponsiveScreenUtil()
                            .setSp(24, allowFontScalingSelf: true))),
              ],
            )