Android Academy · 课时

Column、Row 和 Box

Q: 「Column、Row 和 Box」这节课中我会学到什么？

在常见布局中排列可组合项 你通过在浏览器中直接运行的动手代码来练习 Android Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

在常见布局中排列可组合项

Column、Row 和 Box 是 CoddyKit 上的免费 Android Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Android Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Android Academy 课程共包含 4 节课。

排列可组合项

要让可组合项彼此相对地进行布局，Compose 提供了三种核心布局可组合项：列布局、行布局和盒布局。

列布局：垂直堆叠

Column 会将子项垂直堆叠，从上到下排列。

Column {
    Text("First")
    Text("Second")
    Text("Third")
}

行布局：水平排列

Row 会将子项并排放置，从左到右排列。

Row {
    Text("Left")
    Text("Middle")
    Text("Right")
}

盒布局：重叠放置

Box 会像图层一样将子项一个叠在另一个上面。后添加的子项会绘制在先添加的子项之上。它非常适合制作徽章、叠加层和背景。

Box {
    Image(
        painter = painterResource(R.drawable.photo),
        contentDescription = null
    )
    Text("Caption")
}

子项就是内容 Lambda

每种布局都会接收一个尾随的内容 Lambda。您在其中调用的任何可组合项都会成为该布局的子项。这里没有 XML——子项只是函数调用。

嵌套布局

布局可以自由嵌套。将 Row 放在 Column 中，可以构建类似网格的结构或由多行组成的列表。

Column {
    Row {
        Text("A")
        Text("B")
    }
    Row {
        Text("C")
        Text("D")
    }
}

Column 与 LinearLayout

如果您使用过 XML，那么 Column 类似于垂直的 LinearLayout，而 Row 类似于水平的 LinearLayout。Box 类似于简单的 FrameLayout。

默认尺寸

默认情况下，布局只有其子项那么大（包裹内容）。您可以使用 Modifier.fillMaxSize() 等修饰符让布局填满可用空间，下一课会介绍这一点。

Box 中的 contentAlignment

Box 可以通过 contentAlignment 对齐所有子项。例如，可以让所有内容居中。

Box(contentAlignment = Alignment.Center) {
    Text("Centered")
}

选择合适的布局

请根据方向进行选择：垂直布局使用列布局，水平布局使用行布局，重叠放置或让单个子项居中使用盒布局。大多数屏幕会组合使用这三种布局。

整合应用

一个使用全部三种布局的小型个人资料布局。

@Composable
fun Profile() {
    Column {
        Box(contentAlignment = Alignment.Center) {
            Image(
                painter = painterResource(R.drawable.avatar),
                contentDescription = null
            )
        }
        Row {
            Text("Posts ")
            Text("Followers")
        }
    }
}

快速检查

哪种布局会将子项一个叠在另一个上面（产生重叠效果）？

回顾

三种核心布局：

Column——垂直堆叠。
Row——水平排列。
Box——重叠图层；contentAlignment 可让内容居中。

它们可以自由嵌套，从而构建任意屏幕。

常见问题解答

「Column、Row 和 Box」课时是免费的吗？

是的 — 「Column、Row 和 Box」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Android Academy 课程的其余内容，请升级到 CoddyKit PRO。 Android Academy 课程共包含 4 节课。

「Column、Row 和 Box」这节课中我会学到什么？

在常见布局中排列可组合项你通过在浏览器中直接运行的动手代码来练习 Android Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Android Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Android Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「Column、Row 和 Box」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Android Academy 课中编写并运行代码吗？

能。每节 Android Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Android Academy