Flutter 多端适配实践：屏幕尺寸与分辨率适配技巧

在 Flutter 中实现多端适配，核心是通过响应式设计和动态计算确保应用在不同尺寸设备上保持良好体验。以下是关键技巧与实践方法：

---

1. 基础屏幕信息获取

使用 MediaQuery 获取屏幕尺寸和像素密度：

final size = MediaQuery.of(context).size;
final width = size.width;   // 屏幕宽度
final height = size.height; // 屏幕高度
final pixelRatio = MediaQuery.of(context).devicePixelRatio; // 像素密度

---

2. 尺寸适配策略

(1) 百分比布局 使用 FractionallySizedBox 按比例分配空间：

FractionallySizedBox(
  widthFactor: 0.8, // 占据父容器80%宽度
  child: Container(color: Colors.blue),
)

(2) 相对单位适配 创建自适应尺寸工具类：

class SizeConfig {
  static late double screenWidth;
  static late double screenHeight;
  
  static void init(BuildContext context) {
    screenWidth = MediaQuery.of(context).size.width;
    screenHeight = MediaQuery.of(context).size.height;
  }
  
  // 按屏幕宽度比例缩放
  static double w(double percent) => screenWidth * (percent / 100);
  
  // 按屏幕高度比例缩放
  static double h(double percent) => screenHeight * (percent / 100);
}

// 使用：
Container(
  width: SizeConfig.w(50), // 屏幕宽度的50%
  height: SizeConfig.h(20), // 屏幕高度的20%
)

(3) 约束布局 使用 LayoutBuilder 响应父容器约束：

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 600) {
      return _buildTabletLayout(); // 平板布局
    } else {
      return _buildPhoneLayout(); // 手机布局
    }
  },
)

---

3. 分辨率适配技巧

(1) 像素密度处理

// 根据像素密度调整尺寸
double dp(double value) {
  return value * MediaQuery.of(context).devicePixelRatio;
}

(2) 图片资源适配 在 pubspec.yaml 配置多分辨率资源：

flutter:
  assets:
    - images/
  uses-material-design: true

按分辨率创建目录：

images/
├── image.png
├── 2.0x/
│   └── image.png
└── 3.0x/
    └── image.png

(3) SVG 矢量图 使用 flutter_svg 包实现无损缩放：

SvgPicture.asset(
  'assets/icon.svg',
  width: SizeConfig.w(10),
)

---

4. 响应式布局组件

组件	作用描述
AspectRatio	强制子组件保持宽高比
FittedBox	自动缩放内容适应容器
Wrap	自动换行的流式布局
Flexible/Expanded	在 Row/Column 中动态分配空间

---

5. 多端断点设计

定义设备类型断点：

enum DeviceType { Phone, Tablet, Desktop }

DeviceType getDeviceType() {
  final width = MediaQuery.of(context).size.width;
  if (width > 1200) return DeviceType.Desktop;
  if (width > 600) return DeviceType.Tablet;
  return DeviceType.Phone;
}

// 使用：
switch(getDeviceType()) {
  case DeviceType.Desktop:
    return _buildDesktopUI();
  case DeviceType.Tablet:
    return _buildTabletUI();
  default:
    return _buildMobileUI();
}

---

6. 字体适配方案

Text(
  "自适应文本",
  style: TextStyle(
    fontSize: SizeConfig.w(4), // 按屏幕宽度比例缩放
  ),
)

---

最佳实践总结：

1. 优先使用约束布局：避免固定尺寸，利用父容器约束
2. 组合使用适配策略：百分比+断点+相对单位
3. 横竖屏适配：通过 OrientationBuilder 处理方向变化
4. 测试工具：使用 DevTools 的 "Device Preview" 插件模拟多设备

通过动态计算和响应式组件，Flutter 可高效实现从手机到桌面端的无缝适配，核心公式可表示为： $$ \text{实际尺寸} = \frac{\text{设计稿尺寸}}{\text{设计稿基准宽度}} \times \text{屏幕宽度} $$ 此方法确保元素比例在不同设备上保持一致。