# 从 Jetpack Compose 迁移

> @Composable→Component 映射，以及将响应式计数器重写为字段 + repaint()。

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

# 从 Jetpack Compose 迁移

在 Compose（声明式 Kotlin）中，当可观察状态变化时 UI 会**重组**。在 CrossFly 中你
**装配一次**并**变更**。请先阅读 [理念](/docs/migrate/overview)。

## 转换表
| Jetpack Compose | CrossFly |
|---|---|
| `@Composable fun` | 在 `onShow()` 中装配**一次**的方法 |
| `remember { mutableStateOf(...) }` + 重组 | **字段** + `repaint()`（无重组） |
| `Column` / `Row` / `Box` | `VerticalLayout` / `HorizontalLayout` / `RelativeLayout` |
| `Modifier.weight(1f)` | `add(LAY_FILL, c)`（`-1f`） |
| `Modifier.padding(...)` | 样式中的 `ingap` |
| `LazyColumn` | `VirtualListView` |
| `Text` | `Label` |
| `Button` | `Button` |
| `Scaffold` / `TopAppBar` | `Window`（+ `TabBar`） |
| `NavController` / `NavHost` | `Window` 栈（`show()` / `hide()`） |
| `ViewModel` + `StateFlow` | 手动 ViewModel + 回调（无流收集） |
| `LaunchedEffect` / 协程 | `Thread` + `Component.onUI(...)` |
| `Color(0xFF...)` | `int 0xAARRGGBB`（`UIConstants` / `ColorUtils`） |

## 之前/之后——计数器
```kotlin
// Compose: muda o state → recompõe sozinho
@Composable fun Contador() {
   var n by remember { mutableStateOf(0) }
   Column {
      Text("$n")
      Button(onClick = { n++ }) { Text("+") }
   }
}
```
```java
// 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);
   }
}
```

## 最令人意外的地方
`StateFlow`/`collectAsState` 没有对应项：CrossFly **不观察**你的状态。你会
收集流的地方，改为把值保存在字段中并调用 `repaint()`（或在你的 ViewModel 中手动实现一个 `observe(Runnable)`——参见 [应用架构](/docs/best-practices/arquitetura-de-app)）。

## 另请参阅
- [状态与数据流](/docs/concepts/state-and-data-flow) · [应用架构](/docs/best-practices/arquitetura-de-app)