# Vindo do Jetpack Compose

> Mapeamento @Composable→Component e o contador reativo reescrito como campo + repaint().

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

# Vindo do Jetpack Compose

No Compose (Kotlin declarativo) a UI **recompõe** quando o estado observável muda. No CrossFly você
**monta uma vez** e **muta**. Leia primeiro [a filosofia](/docs/migrate/overview).

## Tabela de tradução
| Jetpack Compose | CrossFly |
|---|---|
| `@Composable fun` | método que monta **uma vez** em `onShow()` |
| `remember { mutableStateOf(...) }` + recomposição | **campo** + `repaint()` (sem recomposição) |
| `Column` / `Row` / `Box` | `VerticalLayout` / `HorizontalLayout` / `RelativeLayout` |
| `Modifier.weight(1f)` | `add(LAY_FILL, c)` (`-1f`) |
| `Modifier.padding(...)` | `ingap` no estilo |
| `LazyColumn` | `VirtualListView` |
| `Text` | `Label` |
| `Button` | `Button` |
| `Scaffold` / `TopAppBar` | `Window` (+ `TabBar`) |
| `NavController` / `NavHost` | pilha de `Window` (`show()` / `hide()`) |
| `ViewModel` + `StateFlow` | ViewModel manual + callback (sem coleta de fluxo) |
| `LaunchedEffect` / coroutines | `Thread` + `Component.onUI(...)` |
| `Color(0xFF...)` | `int 0xAARRGGBB` (`UIConstants` / `ColorUtils`) |

## Como era / como fica — o contador
```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: guarda a referência e atualiza na mão
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)); });   // sem recomposição
      add(LAY_AUTO, mais);
   }
}
```

## O ponto que mais surpreende
`StateFlow`/`collectAsState` não têm equivalente: o CrossFly **não observa** seu estado. Onde você
coletaria um fluxo, guarde o valor num campo e chame `repaint()` (ou um `observe(Runnable)` manual no
seu ViewModel — ver [arquitetura de app](/docs/best-practices/arquitetura-de-app)).

## Veja também
- [Estado e fluxo de dados](/docs/concepts/state-and-data-flow) · [Arquitetura de app](/docs/best-practices/arquitetura-de-app)