002 布局、Modifier 与常用组件对照：从 View 到 Compose 的思维转换

大家好，我是你们的技术伙伴。今天我想和大家分享一下，当我从传统的 Android View 体系转向 Jetpack Compose 时，是如何理解其核心概念——布局和 Modifier 的。这个过程就像学习一门新的语言，语法变了，但表达的思想是相通的。我会用我自己的实战经验，带大家快速建立新旧知识之间的桥梁。

1. 重新认识“修饰”：什么是 Modifier？

在以前写 XML 布局的日子里，我们习惯性地给 View 设置 android:padding、layout_width 或者 background 这些属性。它们是一个个独立的键值对。但在 Compose 的世界里，我花了点时间才适应：绝大多数外观和交互行为，都是通过一个叫 Modifier 的链式调用来表达的。

这里有个非常重要的细节，也是我早期常踩的坑：Modifier 链的顺序会影响最终效果。通常，靠外（写在前面）的修饰符会先被应用。比如下面这个例子，fillMaxWidth() 先执行，然后是 padding，最后才是 background。这个顺序决定了背景色是画在 padding 区域之内还是之外，具体效果大家一定要亲手试试，印象才深刻。

Modifier
    .fillMaxWidth()
    .padding(16.dp)
    .background(MaterialTheme.colorScheme.surface)

几个小提示来自我的经验：
* 单位：请务必使用 androidx.compose.ui.unit.dp 和 sp。直接使用裸的 Float 值是个坏习惯，Compose 的这套单位系统能更好地处理屏幕密度。
* 填充父布局：fillMaxSize()、fillMaxWidth() 和 fillMaxHeight() 这几个函数，就相当于我们熟悉的 match_parent，意思是“在父容器给出的约束条件下，尽可能占满空间”。

2. 线性布局：老朋友的新面孔

下面这个对照表对我帮助巨大，它让我能快速将脑海中的 XML 布局“翻译”成 Compose 代码：

实战：用 Column 构建一个标题栏

这就像构建一个垂直的 LinearLayout。verticalArrangement 参数可以方便地控制子项之间的间距，比 XML 里写一堆 margin 要优雅多了。

@Composable
fun ProfileHeader(title: String, subtitle: String) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        Text(text = title, style = MaterialTheme.typography.titleLarge)
        Text(text = subtitle, style = MaterialTheme.typography.bodyMedium)
    }
}

实战：用 Row 和 weight 实现左右分布

还记得怎么用 weight 让一个文本标签把箭头“挤”到最右边吗？在 Compose 里，思路完全一致。给左边的 Text 加上 Modifier.weight(1f)，它就会占据剩余的所有空间。

@Composable
fun SettingRow(label: String) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp, vertical = 12.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(label, modifier = Modifier.weight(1f))
        Text(">", color = MaterialTheme.colorScheme.outline)
    }
}

3. 层叠布局：Box 的妙用

Box 是 Compose 里的 FrameLayout，用于将组件叠放在一起。它的 align 修饰符特别强大，可以轻松实现诸如“右上角小红点”这样的效果。

@Composable
fun BadgeIcon() {
    Box {
        Icon(Icons.Default.Notifications, contentDescription = null)
        Box(
            modifier = Modifier
                .align(Alignment.TopEnd) // 关键在这里：对齐到父 Box 的右上角
                .size(8.dp)
                .background(Color.Red, shape = CircleShape)
        )
    }
}

4. 处理滚动：简单与复杂之分

对于一小段需要滚动的文字，我们不需要动用“重型武器”。一个 Column 配合 Modifier.verticalScroll 就足够了，这让我想起了给 ScrollView 里套一个 LinearLayout。

@Composable
fun LongTextBlock(body: String) {
    val scroll = rememberScrollState()
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(scroll) // 添加滚动修饰符
            .padding(16.dp)
    ) {
        Text(body)
    }
}

当然，如果是长列表（比如聊天记录、商品列表），LazyColumn 才是性能最优解。这个话题我们留到下一篇专门讨论。

5. 常用控件的“Compose 式”写法

按钮 (Button)

变得异常简洁，点击事件直接作为参数。

Button(onClick = { /* TODO */ }) {
    Text("确定")
}

输入框 (OutlinedTextField)

对应以前的 EditText。Compose 的文本框是声明式且状态驱动的，value 和 onValueChange 是黄金搭档。

@Composable
fun EmailField(value: String, onValueChange: (String) -> Unit) {
    OutlinedTextField(
        value = value,
        onValueChange = onValueChange,
        modifier = Modifier.fillMaxWidth(),
        label = { Text("邮箱") },
        singleLine = true
    )
}

图片 (Image)

加载资源图片的 API 很直观。

import androidx.compose.foundation.Image
import androidx.compose.ui.res.painterResource

Image(
    painter = painterResource(id = R.drawable.sample),
    contentDescription = "示例图", // 无障碍描述很重要！
    modifier = Modifier.size(120.dp)
)

点击事件

任何可组合项，只要加上 .clickable 修饰符，就能响应点击。再也不用先 findViewById 再 setOnClickListener 了。

import androidx.compose.foundation.clickable

Text(
    text = "点我",
    modifier = Modifier
        .clickable { /* 处理点击 */ }
        .padding(8.dp)
)

6. 占位空间：向 Spacer 说你好

终于不用再为了撑开间距而定义一个看不见的 View 了！Spacer 就是为此而生，非常语义化。

Spacer(modifier = Modifier.height(16.dp))

7. 我的练习建议：动手才能真学会

理论看再多，不如动手写一行。我建议大家尝试以下练习，这能极大地巩固今天的知识：

1. 复刻列表项：使用 Row 和 Column 组合，实现一个常见的设置项条目（左侧图标，中间是标题和副标题上下排列，右侧是箭头）。
2. 实现通知红点：用 Box 布局，在一个图标（比如铃铛）的右上角叠加一个红色圆形小点。
3. 探索 Modifier 顺序：刻意地调换同一个 Modifier 链中 .padding() 和 .background() 的顺序，然后在预览中观察UI的变化。这个实验对我理解 Compose 的绘制顺序至关重要。

好了，今天我们主要解决了“界面长什么样”的问题。但一个真正的应用是动态的，数据变了，UI也要变。下一篇，我们将进入 Compose 最核心也最迷人的部分——状态管理与ViewModel，一起来探索如何让界面“活”起来。