从 Flutter 迁移

Flutter 是与 CrossFly 在理念上最接近的对应者——两者都通过 GPU 渲染，没有原生控件，因此外观在所有平台上完全一致。差别在于模型：Flutter 从状态重建；CrossFly 你变更对象。请先阅读理念。

转换表

Flutter	CrossFly
`Widget`	`Component`
`StatelessWidget` / `StatefulWidget`	`Component` / `Window` 的子类
`build(context)`	`onShow()`（装配）/ `onPaint()`（绘制）
`setState(() => ...)`	修改字段 + `repaint()`（若尺寸变化则 + `setValidLayout(false)`）
`Scaffold`	`Window`（+ `TabBar` 用于标签页）
`Navigator.push` / `pop`	`window.show()` / `hide()`
`Column` / `Row`	`VerticalLayout` / `HorizontalLayout`
`Expanded` / `Flexible`	`add(LAY_FILL, c)`（`-1f`）
`Padding`	样式中的 `ingap`（`ComponentStyle`）
`SizedBox` / `Spacer`	布局中的 `Gap` / 分数
`ListView.builder`	`VirtualListView`
`Text`	`Label`
`ElevatedButton` / `TextButton`	`Button`
`TextField`	`TextField`
`showDialog` / `AlertDialog`	`Alert`
`SnackBar` / `Tooltip`	`Hint`
`Theme` / `ThemeData`	`Theme` / `ColorScheme` / `Skin`
`Future` / `async` / `await`	`Thread` + `Component.onUI(...)`
`Color(0xFF2196F3)`	`int 0xFF2196F3`（`UIConstants` / `ColorUtils`）
`shared_preferences`	无对应项 → SQLite（指南）

带动作的按钮

// Flutter
ElevatedButton(onPressed: salvar, child: Text("Salvar"))

// CrossFly
new Button("Salvar").onAction(c -> salvar());

带列表的界面

// Flutter
ListView.builder(itemCount: itens.length,
   itemBuilder: (ctx, i) => ListTile(title: Text(itens[i].nome)));

// CrossFly — 虚拟化，在 onShow() 中挂载
VirtualListView lista = new VirtualListView(Relative.ofFont(3f), new DataAdapter() {
   public int getCount() { return itens.size(); }
   public Component createView() { return new Label(""); }
   public void bindView(Component v, int i) { ((Label) v).setText(itens.get(i).nome); }
});
add(LAY_FILL, lista);

确认对话框

// Flutter
showDialog(context: ctx, builder: (_) => AlertDialog(
   title: Text("Excluir"), content: Text("Confirma?"),
   actions: [ TextButton(onPressed: excluir, child: Text("Excluir")) ]));

// CrossFly — 文本在构造函数中；按索引执行动作
Alert a = new Alert("Excluir", "Confirma?", "Cancelar", "Excluir");
a.buttonAction(1, c -> excluir());
a.show();

迁移时的最佳实践

你会用 setState 的地方，改为变更 + repaint()——保存控件的引用。
之前有 FutureBuilder/async 的地方，使用 Thread + Component.onUI（参见后台）。
Expanded 变为 LAY_FILL；Padding 变为样式中的 ingap。

另请参阅

快速开始 · 布局 · 导航