# 理念：CrossFly 与声明式-响应式

> 从 Flutter、Compose、SwiftUI 或 React Native 迁移过来的人所共有的思维转变。

Source: https://crossfly.dev/zh/docs/migrate/overview — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# 理念：CrossFly 与声明式-响应式

在按来源分类的转换表之前，先看适用于所有情况的**思维契约**。

## 唯一重要的转变
> **声明式-响应式框架**（Flutter、Compose、SwiftUI、React Native）把 UI 描述为
> **状态的函数**，并在状态变化时**重建**它。**CrossFly 是命令式且面向对象的：**你创建
> **可变的** `Component` 对象**一次**（在 `onShow()` 中），**保存引用**、
> **修改属性**并调用 `repaint()`。

没有被重新执行的 `build()`，没有 `setState`，没有 `async/await`。与
Flutter/Compose 的共同点是：**所有内容都通过 GPU 渲染**（OpenGL/WebGL），没有原生控件——外观在
所有平台上完全一致。

## 四大支柱的对照
| 在你的框架中 | 在 CrossFly 中 |
|---|---|
| 被重新执行的 `build()`/`body` | 在 `onShow()` 中装配**一次**；之后你变更对象 |
| `setState`/`@State`/`useState` → 重建 | 修改字段 + **`repaint()`**（若尺寸变化则 + `setValidLayout(false)`） |
| 嵌套的布局控件 | `add(valor, comp)` — **`LAY_AUTO`(0f) / `LAY_FILL`(-1f) / 分数** |
| `async`/`await`/`Future` | **`Thread`** + **`Component.onUI(...)`**（显式线程处理） |

## 计数器，两种模型
```java
// 声明式-响应式（伪代码）：状态改变 → UI 自动重建。
// CrossFly：你保存引用并手动更新。
public class Contador extends Window {
   private int n = 0;
   private Label display;
   @Override public void onShow() throws Exception {
      super.onShow();
      setLayout(new VerticalLayout());
      add(LAY_AUTO, display = new Label("0"));
      Button mais = new Button("+");
      mais.onAction(c -> { n++; display.setText(String.valueOf(n)); });  // 变更 + 重绘
      add(LAY_AUTO, mais);
   }
}
```

## 通用陷阱（适用于所有来源）
- **保存引用**到你要更新的组件（`Window` 的字段）——没有办法通过重建来
  "重新找到它们"。
- **内边距/外边距**不是控件：它们是组件**样式**中的 `ingap`/`outgap`。
- **没有热重载**——这是编译后的 Java（在桌面端循环很快；参见 [platforms](/docs/platforms)）。
- **文本的 i18n 是手动的**——没有内置的字符串目录（参见 [i18n](/docs/best-practices/internacionalizacao)）。
- **颜色是 `int` ARGB `0xAARRGGBB`**——没有 `Color` 类（使用 `UIConstants`/`ColorUtils`）。

## 选择你的来源
[Flutter](/docs/migrate/from-flutter) · [Jetpack Compose](/docs/migrate/from-jetpack-compose) ·
[SwiftUI](/docs/migrate/from-swiftui) · [React Native](/docs/migrate/from-react-native) ·
[TotalCross/SuperWaba](/docs/migrate/from-totalcross)

## 另请参阅
- 概念：[状态与数据流](/docs/concepts/state-and-data-flow) · [一切皆是 Component](/docs/concepts/everything-is-a-component)