XML 布局 → Compose 声明式 UI

老写法（XML）

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 中绑定事件：

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）

kotlin 复制代码

@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("点击")
        }
    }
}

常用布局对应关系

XML	Compose	备注
LinearLayout vertical	Column	子项从上到下排列
LinearLayout horizontal	Row	子项从左到右排列
FrameLayout	Box	子项可以层叠，用 `Modifier.align()` 定位
ConstraintLayout	Box + Modifier.align() 或 Compose 版 ConstraintLayout	简单层叠用 Box，复杂约束才用 Compose ConstraintLayout
RecyclerView	LazyColumn / LazyRow	只渲染可见项，自带复用
ScrollView	Column + Modifier.verticalScroll()	垂直滚动
Space / 空白 View	Spacer(modifier = Modifier.height(8.dp))	只占空间不渲染内容的占位

一句话注意

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 老项目迁移系列，持续更新中。