XML 布局 到 Compose 声明式 UI

XML 布局 → Compose 声明式 UI

老写法（XML）

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="标题"
        android:textSize="18sp"
        android:textColor="#333333" />    <Button
        android:id="@+id/btn_action"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_marginTop="8dp"
        android:text="点击" />
</LinearLayout>

Java 中绑定事件：

TextView tvTitle = findViewById(R.id.tv_title);
tvTitle.setText("新标题");Button btnAction = findViewById(R.id.btn_action);
btnAction.setOnClickListener(v -> {
    // 处理点击
});

问题在哪里

XML + Java 绑定是两套独立的东西：布局结构写在一处，行为逻辑写在另一处。找"这个按钮点了会干嘛"需要先查 XML 里的 ID，再去 Java 里搜 ID，中间容易断开。布局和代码之间靠字符串 ID 关联，没有编译期安全保障。

新写法（Compose）

@Composable
fun MyScreen() {
    var title by remember { mutableStateOf("标题") }    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        Text(
            text = title,
            fontSize = 18.sp,
            color = Color(0xFF333333)
        )        Button(
            onClick = { title = "点击了" },
            modifier = Modifier
                    .fillMaxWidth()
                    .height(48.dp)
                    .padding(top = 8.dp)
        ) {
            Text("点击")
        }
    }
}

常用布局对应关系

一句话注意

Compose 的 Modifier 顺序会影响最终效果。Modifier.padding(8.dp).background(Color.Red) 和 Modifier.background(Color.Red).padding(8.dp) 结果不一样——前者 padding 在外面不影响背景范围，后者背景撑满包含 padding 区域。这是 Compose 新人最容易踩的坑之一。

match_parent 在 Compose 里不是直接对应的概念——想撑满宽度用 Modifier.fillMaxWidth()，想撑满高度用 Modifier.fillMaxHeight()，想撑满父容器用 Modifier.fillMaxSize()。

Java Android 老项目迁移系列，持续更新中。