第6篇：屏幕适配实战：鸿蒙多设备下的 Flutter 响应式布局

Flutter × 鸿蒙实战30讲（6）：屏幕适配实战：鸿蒙多设备下的 Flutter 响应式布局

作者：烟云任平生
发布时间：2025年12月6日
标签：#Flutter #OpenHarmony #响应式布局 #多端适配 #CSDN

一、挑战：设备碎片化

OpenHarmony 支持：

• 手机（360x720 ~ 480x1080）
• 平板（600x960 ~ 800x1280）
• PC（1920x1080+）

同一套 Flutter Web 如何自适应？

二、Flutter 侧：响应式设计策略

1. 使用 MediaQuery

Widget build(BuildContext context) {
  final size = MediaQuery.of(context).size;
  final isPad = size.shortestSide > 600;

  return Scaffold(
    body: isPad 
      ? Row(children: [Sidebar(), MainContent()]) 
      : MainContent(),
  );
}
. 字体与间距按比例缩放
double scale(double base) {
  return base * (MediaQuery.of(context).size.width / 360);
}
. 禁用固定宽高
避免写死 Container(width: 300)，改用 FractionallySizedBox 或 Expanded。
三、OpenHarmony 侧：容器适配
确保 Web 组件占满可用空间：
Web({ ... })
.width('100%')
.height('100%')
.layoutWeight(1) // 在 Column 中自动伸缩
✅ 不要写死像素值（如 .width(800)），否则在小屏设备会溢出。
四、测试建议
在 DevEco Studio 中切换不同设备模拟器：

Phone (360x720)
Tablet (800x1280)
PC (1920x1080)
观察布局是否合理。
五、高级技巧：动态加载不同 UI 包
可通过 URL 参数区分设备类型：
// ArkTS 获取设备类型
const deviceType = isPC ? 'pc' : isTablet ? 'tablet' : 'phone';
Web({ src: `http://.../index.html?device=${deviceType}` })
Flutter 侧读取参数并加载不同 Widget。

🔜 下一篇预告：《第7讲：资源管理：如何在 OpenHarmony 中加载 Flutter 的 assets 与字体》

🌟 你的 Flutter 应用适配了几种设备？欢迎留言分享经验！