【读书活动感悟分享】特爱读《大前端三剑客》Flutter的跨平台能力-UI适配

      特来电App在这么多年的技术积累中也运用了和多的跨平台的能力，ReactNative、Flutter。外还有在开发鸿蒙应用时学习了ArkTS语言，是在继承自 TypeScript 核心语法特性的基础上实现的，同样具备了跨平台的能力。之前只是了解和运用，读完《大前端三剑客：Vue+React+Flutter》，加深了我对整个跨平台生态发展的理解。下面针对其中一点总结下自己学习到的内容

    随着Android各种各样设备的出现，如何做好简单方便的适配非常重要。在Flutter开发中，使用像素，系统会处理在各平台上的转换。但面对非正常屏幕，如折叠屏，还需要做对应的适配方案。

    1、设备信息的获取：MediaQuery类。获取设备的尺寸、密度、方向等信息
    

// 获取屏幕宽度和高度（逻辑像素）
double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;

// 获取像素密度
double pixelRatio = MediaQuery.of(context).devicePixelRatio;

// 获取文本缩放因子
double textScaleFactor = MediaQuery.of(context).textScaleFactor;

   2、 rpx适配方案，借鉴小程序rpx

class MySizeFit {
  static late double screenWidth;
  static late double screenHeight;
  static late double designWidth; // 设计稿基准宽度（如750）
  
  static void initialize(BuildContext context, {double designWidth = 750}) {
    MediaQueryData mediaQuery = MediaQuery.of(context);
    screenWidth = mediaQuery.size.width;
    screenHeight = mediaQuery.size.height;
    MySizeFit.designWidth = designWidth;
  }
  
  static double rpx(double size) {
    return (size * screenWidth) / designWidth;
  }
}

// 在MaterialApp下的Widget中初始化
MySizeFit.initialize(context, designWidth: 750);

// 设置尺寸：设计稿100px → 100 * rpx
Container(
  width: MySizeFit.rpx(100),
  height: MySizeFit.rpx(200),
)

  3、第三方库flutter_screenutil

dependencies:
  flutter_screenutil: ^5.0.0

MaterialApp(
  home: MyHomePage(),
  builder: (context, child) {
    ScreenUtil.init(context, designSize: const Size(750, 1334)); // 设计稿尺寸
    return child;
  },
)

// 尺寸适配
Container(
  width: 100.w,  // 100单位宽度（基于设计稿）
  height: 200.h, // 200单位高度
),
Text('Hello', style: TextStyle(fontSize: 24.sp)), // 字体适配