响应式设计：一套 UI 适配所有屏幕

在 CrossFly 中，响应式设计不是一个单独的功能——它是按关系度量的结果。只要你遵循下面的原则，屏幕就会自动重新适配尺寸、密度（DPI）、字体缩放和方向，无需媒体查询，也无需手动重新计算。本页是第 36 章面向任务的摘选；其中的“为什么”请见 布局与 Relative 模型。

五大原则

1. 绝不用固定像素定位。 使用分数、Relative 以及 LAY_FILL/LAY_AUTO。
2. 让布局来度量。 LAY_AUTO/Relative.AUTO/RelSize.AUTOSIZE 会报告自然尺寸。
3. 间距也要缩放。 通过 Gap.ofFont(...) 设置 ingap/outgap，绝不用像素。
4. 每个轴一个弹性区域。 用 LAY_FILL 标记一个组件来吸收剩余空间。
5. 调整尺寸是自动的——只要你做到了上述几点。只有手动 setBounds 才需要写代码。

工具箱

用 Screen.minSize 设置断点

使用较短边（Screen.minSize），而非 width——当设备旋转时它保持稳定：

boolean tablet = Screen.minSize >= 600;   // 例如决定 1 列还是 2 列

当（少数情况下）需要改变排布时：onReposition()

如果布局需要因方向而改变结构，请覆写 Window.onReposition()：

@Override protected void onReposition() throws Exception {
   painel.removeAll();
   if (Screen.isLandscape) {                     // 2 列
      painel.setLayout(new HorizontalLayout());
      painel.add(0.5f, lista); painel.add(0.5f, detalhe);
   } else {                                       // 1 列
      painel.setLayout(new VerticalLayout());
      painel.add(LAY_FILL, lista); painel.add(LAY_AUTO, detalhe);
   }
}

响应式检查清单

• 零固定 ofPixels/setBounds（除非有正当理由的例外）。
• 每个弹性轴上恰好一个 LAY_FILL。
• 间距使用 Gap.ofFont/ofScreen。
• 方块/图标使用 ofScreen(v, ScreenSize.MIN)。
• 断点使用 Screen.minSize。

反模式

另请参阅

• 权威来源：第 36 章 · 概念：布局与 Relative
• 布局 · 响应式设计（ui）