Flutter 应用如何做屏幕适配

26 min read

Flutter 提供了多种方式来做屏幕适配，以下是常用的几种方式：

  1. 使用 media query

Flutter 提供了 media query API 来获取当前设备的屏幕尺寸、像素密度等信息，通过这些信息，可以实现不同设备上的 UI 适配。

final mediaQueryData = MediaQuery.of(context);
final screenWidth = mediaQueryData.size.width;
final screenHeight = mediaQueryData.size.height;
final pixelRatio = mediaQueryData.devicePixelRatio;
  1. 使用构建器

Flutter 的构建器（Builder）可以将一个部件的上下文（BuildContext）传递给一个 widget，从而获取当前屏幕的信息并实现相应的适配。

return Builder(
  builder: (BuildContext context) {
    final mediaQueryData = MediaQuery.of(context);
    final screenWidth = mediaQueryData.size.width;
    final screenHeight = mediaQueryData.size.height;
    final pixelRatio = mediaQueryData.devicePixelRatio;

    // 在这里进行 UI 的适配
    return Container(
      width: screenWidth / 2,
      height: screenHeight / 2,
    );
  },
);
  1. 使用第三方库

Flutter 社区中有很多针对屏幕适配的第三方插件和库，如 flutter_screenutil、flutter_screemutil_plus 等，这些插件提供了更便捷的方式进行屏幕适配。

import 'package:flutter_screenutil/flutter_screenutil.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 进行屏幕适配
    ScreenUtil.init(context,
        width: 750, height: 1334, allowFontScaling: true);

    return Container(
      width: ScreenUtil().setWidth(375),
      height: ScreenUtil().setWidth(200),
      child: Text(
        'Hello, Flutter',
        style: TextStyle(
          fontSize: ScreenUtil().setSp(24),
        ),
      ),
    );
  }
}

以上是三种常用的 Flutter 屏幕适配方式，具体使用哪一种方式，需要根据实际情况来选择。