flutter rpx屏幕适配方案

rpx是小程序中的适配方案，它将750px作为设计稿，1rpx=屏幕宽度/750，其它所有的单位都使用rpx单位。不管是什么屏幕，统一分成750份在iPhone8上： 1rpx = 375/750 = 0.5px在iPhone12proMax 上：1rpx = 428/750 = 0.571px所以我们就可以通过上面的计算方式，算出一个rpx，再将自己的size和rpx单位相乘即可：比如300p

imHere·

2301人浏览 · 2022-01-30 16:02:19

imHere· · 2022-01-30 16:02:19 发布

rpx是小程序中的适配方案，它将750px作为设计稿，1rpx=屏幕宽度/750，其它所有的单位都使用rpx单位。

不管是什么屏幕，统一分成750份
在iPhone8上： 1rpx = 375/750 = 0.5px
在iPhone12proMax 上：1rpx = 428/750 = 0.571px

所以我们就可以通过上面的计算方式，算出一个rpx，再将自己的size和rpx单位相乘即可：比如300px的宽度：3002rpx

在iPhone8上计算出的结果是300px
在在iPhone12proMax上计算出的结果是342.6px

通过计算可以看出，还是有明显数据上的差别的。

这里也是封装一个类 Adapt，直接可以获取屏幕的信息

class Adapt {
  static MediaQueryData _mediaQueryData = MediaQueryData();
  static double screenWidth = 0;
  static double screenHeight = 0;
  static double rpx = 0;
  static double px = 0;

  static void initialize(BuildContext context, {double standardWidth = 750}) {
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData.size.width;
    screenHeight = _mediaQueryData.size.height;
    rpx = screenWidth / standardWidth;
    px = screenWidth / standardWidth * 2;
  }

  // 按照像素来设置
  static double setPx(double size) {
    return Adapt.rpx * size * 2;
  }

  // 按照rxp来设置
  static double setRpx(double size) {
    return Adapt.rpx * size;
  }
}

示例代码

@override
Widget build(BuildContext context) {
  Adapt.initialize(context);
  return Scaffold(
    appBar: AppBar(
      title: const Text('屏幕适配'),
    ),
    body: Center(
      child: Container(
        width: Adapt.setPx(300),
        height: Adapt.setPx(300),
        color: Colors.orange,
        alignment: Alignment.center,
        child: Text(
          'Hello Word',
          style: TextStyle(fontSize: Adapt.setPx(30)),
          textAlign: TextAlign.center,
        ),
      ),
    ),
  );
}

注意：一定要在已经有 MaterialApp 的 Widget 中使用 context ，否则是无效的。这里定义默认效果图的尺寸是 375*667，这里是可以自定义传入效果图的宽度的。

原文链接：https://juejin.cn/post/7039868577658175524