flutter 屏幕适配的几种方式

在 Flutter 中进行屏幕适配，可以通过以下方法进行：

1. 使用 Flutter 自带的 Widgets，如 MediaQuery 和 FractionallySizedBox，以及自定义 Widgets 进行布局。

MediaQuery 可以用于获取当前设备的屏幕尺寸和方向等信息，以便根据不同的屏幕尺寸和方向进行布局。

FractionallySizedBox` 可以用于实现相对于父 Widget 的百分比布局，以便在不同的屏幕尺寸上保持相对的布局比例。

使用 Flutter 自带的 Widgets 进行屏幕适配，具体步骤如下：

1. 在布局中使用 MediaQuery 获取当前设备的屏幕尺寸和方向等信息。

MediaQuery 是一个 Widget，可以用于获取当前设备的屏幕尺寸和方向等信息。可以将它作为布局的根节点，然后在子 Widget 中使用它获取屏幕尺寸和方向等信息，以便根据不同的屏幕尺寸和方向进行布局。

例如，可以在布局的根节点使用 MediaQuery，并通过 MediaQuery.of(context) 获取 MediaQueryData 对象，然后根据 MediaQueryData.size 获取屏幕尺寸信息，如下所示：

Widget build(BuildContext context) {
  final mediaQueryData = MediaQuery.of(context);
  final screenWidth = mediaQueryData.size.width;
  final screenHeight = mediaQueryData.size.height;
  // 根据 screenWidth 和 screenHeight 进行布局
  return Container(
    // ...
  );
}

2. 使用 FractionallySizedBox 实现相对于父 Widget 的百分比布局。

```FractionallySizedBox是一个 Widget，可以用于实现相对于父 Widget 的百分比布局。可以将它作为子 Widget 使用，并通过设置widthFactor和heightFactor` 属性实现相对于父 Widget 的百分比布局。

例如，可以使用 FractionallySizedBox 实现一个占据父 Widget 50% 宽度和高度的 Widget，如下所示：

FractionallySizedBox(
  widthFactor: 0.5,
  heightFactor: 0.5,
  child: Container(
    // ...
  ),
)

需要注意的是，使用 Flutter 自带的 Widgets 进行屏幕适配需要手动计算和设置 Widget 的尺寸和间距等属性，比较繁琐。但是这种方法可以实现比较精细的适配效果，适用于需要对布局进行精细控制的场景。

2. 使用第三方库进行屏幕适配，如 flutter_screenutil 和 flutter_screentype 等。

flutter_screenutil可以根据不同的屏幕尺寸和密度系数进行自动适配，并提供了一个全局的尺寸单位screenUtil，以便在代码中直接使用。

flutter_screentype可以根据屏幕尺寸和设备类型等信息进行适配，并提供了一些常用的布局 Widget，如ResponsiveContainer和ResponsivePadding等。 使用第三方库进行屏幕适配，可以使用flutter_screenutil或flutter_screentype` 等库，具体步骤如下：

1. 引入第三方库并初始化。

在 pubspec.yaml 文件中添加第三方库，并运行 flutter packages get 安装库。然后在程序的入口处初始化库，如下所示：

import 'package:flutter_screenutil/flutter_screenutil.dart';

void main() {
  // 初始化 flutter_screenutil
  ScreenUtil.init(
    designSize: Size(375, 667),
    allowFontScaling: false,
  );
  runApp(MyApp());
}

ScreenUtil.init() 方法用于初始化 flutter_screenutil，并设置 designSize 和 allowFontScaling 等参数。

2. 在布局中使用 ScreenUtil 提供的 Widget 和尺寸单位。

ScreenUtil 提供了一些布局 Widget，如 ScreenUtilInit 和 AspectRatioWidget 等，可以直接使用。同时，ScreenUtil 也提供了一些尺寸单位，如 setWidth、setHeight 和 setSp 等，可以用于设置 Widget 的宽度、高度和字体大小等属性。

例如，可以使用 ScreenUtilInit 将布局尺寸适配到当前设备上，如下所示：

ScreenUtilInit(
  designSize: Size(375, 667),
  builder: () => MaterialApp(
    home: Scaffold(
      body: Container(
        width: ScreenUtil().setWidth(200),
        height: ScreenUtil().setHeight(200),
        child: AspectRatioWidget(
          aspectRatio: 1,
          child: Container(
            // ...
          ),
        ),
      ),
    ),
  ),
);

在这个示例中，使用 ScreenUtil().setWidth 和 ScreenUtil().setHeight 设置 Widget 的宽度和高度，使用 AspectRatioWidget 设置 Widget 的宽高比，以便在不同的屏幕上保持相对的布局比例。

需要注意的是，使用第三方库进行屏幕适配可以自动适配不同的屏幕尺寸和密度系数等因素，比较方便。但是这种方法也有一些缺点，例如会增加程序的体积和复杂度等。因此，在选择第三方库进行屏幕适配时，需要根据具体的情况进行权衡和选择。

3. 手动计算和设置 Widget 的尺寸和间距等属性，以便在不同的屏幕尺寸上保持相对的布局比例。

这种方法需要手动计算和设置 Widget 的尺寸和间距等属性，比较繁琐，但可以达到比较精细的适配效果。 手动计算和设置 Widget 的尺寸和间距等属性，可以根据不同的屏幕尺寸和方向等因素，手动计算和设置 Widget 的尺寸和间距等属性，以便在不同的设备上保持相对的布局比例。具体步骤如下：

1. 获取当前设备的屏幕尺寸和方向等信息。

可以使用 MediaQuery 获取当前设备的屏幕尺寸和方向等信息，以便根据不同的屏幕尺寸和方向进行布局。

例如，可以在布局的根节点使用 MediaQuery，并通过 MediaQuery.of(context) 获取 MediaQueryData 对象，然后根据 MediaQueryData.size 获取屏幕尺寸信息，如下所示：

Widget build(BuildContext context) {
  final mediaQueryData = MediaQuery.of(context);
  final screenWidth = mediaQueryData.size.width;
  final screenHeight = mediaQueryData.size.height;
  // 根据 screenWidth 和 screenHeight 进行布局
  return Container(
    // ...
  );
}

2. 根据屏幕尺寸和方向等信息手动计算和设置 Widget 的尺寸和间距等属性。

可以根据当前设备的屏幕尺寸和方向等信息，手动计算和设置 Widget 的尺寸和间距等属性以便在不同的设备上保持相对的布局比例。

例如，可以根据屏幕宽度和高度等比例计算 Widget 的尺寸和间距等属性，如下所示：

Widget build(BuildContext context) {
  final mediaQueryData = MediaQuery.of(context);
  final screenWidth = mediaQueryData.size.width;
  final screenHeight = mediaQueryData.size.height;
  // 计算 Widget 的尺寸和间距等属性
  final width = screenWidth * 0.8;
  final height = screenHeight * 0.5;
  final padding = screenWidth * 0.1;
  // 使用计算出来的属性值进行布局
  return Container(
    width: width,
    height: height,
    padding: EdgeInsets.symmetric(horizontal: padding),
    child: Container(
      // ...
    ),
  );
}