adaptive-layout-demo

1. 实验目标

这个 Flutter host 实验专门验证 docs/12-screen-adaptation/02-window-size-class-and-responsive.md 里最关键的判断：

• 375 基准缩放适合手机竖屏的小范围微调。
• 600 / 840dp 断点适合平板、横屏、折叠展开态的布局切换。
• 真正应该增长的是信息密度和栏位结构，而不是把整套手机 UI 等比放大。

为了避免必须依赖一整套真机矩阵，这个 demo 直接在页面里提供 375 / 430 / 600 / 768 / 1024dp 预设宽度，用同一份数据对照两种适配策略。

2. 工程要点

• 通过 _presetWidths 模拟不同设备逻辑宽度，快速观察 compact / medium / expanded 三档行为。
• 只看 375 基准缩放结果 开关故意不切布局，用来暴露“平板整体变大”的问题。
• 默认模式下：
  • < 600dp：手机单列
  • 600~840dp：两栏
  • > 840dp：三列

3. 关键实现速览

3.1 断点判定

为什么看这段：它是 Android WindowSizeClass / Flutter LayoutBuilder 心智的最小版。

_Breakpoint _resolveBreakpoint(double widthDp) {
  if (widthDp < 600) return _Breakpoint.compact;
  if (widthDp < 840) return _Breakpoint.medium;
  return _Breakpoint.expanded;
}

3.2 375 基准只做小屏 clamp

为什么看这段：它体现“缩放是手机补偿，不是平板适配方案”。

final scale = (_simulatedWidth / 375).clamp(1.0, 1.2);

3.3 medium / expanded 切结构而非放大

为什么看这段：大屏增长的是列数和面板密度，不是标题、按钮、卡片一并膨胀。

switch (breakpoint) {
  case _Breakpoint.compact:
    return _PhoneStyleDashboard(...);
  case _Breakpoint.medium:
    return _TwoPaneDashboard(title: 'Medium 600~840dp', columns: 2);
  case _Breakpoint.expanded:
    return _TwoPaneDashboard(title: 'Expanded > 840dp', columns: 3);
}

完整源码：adaptive_layout_demo_page.dart

4. 运行方式

cd labs/flutter/host
flutter pub get
flutter run

启动后从首页进入 屏幕适配断点对照 Demo。

5. 预期现象

• 375 / 430dp 下：纯缩放和断点布局看起来接近，都保持手机单列。
• 768 / 1024dp 下：
  • 纯缩放模式会把卡片、文字、间距一并放大。
  • 断点模式会切为两栏 / 三列，卡片尺寸保持稳定，但信息密度明显提升。

6. 常见误区

误区	实际情况
屏幕越大就该把整套 UI 放大	错。大屏更需要多栏、分区、侧边栏和更高信息密度。
375 基准法天然适配平板	错。它只适合手机竖屏的小范围缩放，平板上会把 UI 放大 2~3 倍。
响应式必须真机跑很多台才看得出问题	不一定。先在 demo 里做逻辑宽度矩阵，就能快速暴露策略是否合理。

7. 对应知识库文档

• 理论主文档：当前窗口、断点与响应式布局：从 375 小屏补偿到多栏结构
• 模块总览：屏幕适配：从清晰显示到动态窗口可用

8. 完整源码

• adaptive_layout_demo_page.dart