Android Academy · 课时

Text 与 Column 基础

Q: 「Text 与 Column 基础」这节课中我会学到什么？

显示并堆叠内容。 你通过在浏览器中直接运行的动手代码来练习 Android Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

显示并堆叠内容。

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

Text 可组合函数

在 Compose 中，您能显示的最基本内容就是文本。Text 可组合函数会在屏幕上绘制字符串。

将要显示的字符串作为第一个参数传入即可。这样就能在屏幕上显示文字。

@Composable
fun Hello() {
    Text("Hello, Android!")
}

设置文本样式

Text 接收用于改变外观的参数。您可以设置 fontSize、color 和 fontWeight。

大小使用 sp 单位，会随着用户的字体设置进行缩放。这样可以让所有用户都能清晰地阅读您的应用。

Text(
    "Big Title",
    fontSize = 24.sp,
    fontWeight = FontWeight.Bold
)

为什么需要布局

如果连续调用两次 Text，两段文本都会出现在同一个位置，彼此重叠。可组合函数不会自动排列自己。

要按顺序放置项目，您需要使用能够组织子项的布局可组合函数。用于垂直排列的最常见布局是 Column。

Column 可组合函数

Column 会将子项垂直排列，一个位于另一个下方。您可以将子可组合函数放在它的尾随 lambda 代码块中。

您在大括号内编写的每个可组合函数都会按照编写顺序，成为垂直排列中的一行。

@Composable
fun TwoLines() {
    Column {
        Text("First line")
        Text("Second line")
    }
}

Column 中的顺序很重要

在 Column 中，子项会严格按照列出的顺序从上到下显示。在代码中将某一行上移，它在屏幕上也会随之上移。

这让布局变得可预测：从上到下阅读代码，就能知道屏幕从上到下的显示效果。

Column {
    Text("Title")
    Text("Subtitle")
    Text("Body text")
}

垂直排列

Column 可以使用 verticalArrangement 控制子项之间的间距。例如，Arrangement.spacedBy 会添加均匀的间隔。

这比手动为每个子项添加间距更加简洁，也能让布局保持一致。

Column(
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    Text("One")
    Text("Two")
}

水平对齐

默认情况下，Column 会将子项对齐到起始位置（左侧）。使用 horizontalAlignment 可以将它们居中或对齐到末尾。

将其设置为 Alignment.CenterHorizontally 后，每个子项都会在列的宽度范围内居中。

Column(
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Centered")
    Text("Also centered")
}

认识 Row

Column 会沿垂直方向堆叠内容；它的同级组件 Row 则会沿水平方向将子项排列在一起。它们表达的是相同的布局理念，只是方向不同。

您将混合使用 Row 和 Column 来构建网格和卡片。现在请记住：Column 向下排列，Row 横向排列。

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

嵌套布局

布局可以包含其他布局。您可以将 Row 放在 Column 中，以构建更丰富的设计。

这里的列先显示一个标题，然后在下方显示一个包含两段文字的行。复杂屏幕就是这样由简单部分嵌套构建而成的。

Column {
    Text("Score")
    Row {
        Text("Home")
        Text("Away")
    }
}

在项目之间添加间距

要在两个可组合项之间添加固定间距，可以插入一个 Spacer。它是一个空的可组合项，作用只是占据空间。

您可以通过修饰符为它设置高度，这样它就会将下一个项目向下推移。下一课我们会进一步学习修饰符。

Column {
    Text("Top")
    Spacer(modifier = Modifier.height(16.dp))
    Text("Bottom")
}

组合起来

使用 Text 和 Column，您已经可以构建一个简单的带标签屏幕。将一个标题和几行详细信息依次堆叠起来即可。

这个小模式是您几乎在每个 Compose 屏幕中都会使用的基础。

@Composable
fun InfoBlock() {
    Column {
        Text("Name: Ada")
        Text("Role: Engineer")
    }
}

快速检查

让我们测试一下您对布局方向的理解。

回顾

您学会了使用 Text 显示字符串，并通过 fontSize 和 fontWeight 设置样式。Column 会按照代码顺序沿垂直方向堆叠子项，而 Row 会沿水平方向排列子项。

您可以使用 verticalArrangement 或 Spacer 控制间距，并使用 horizontalAlignment 对齐子项。嵌套 Row 和 Column 可以构建更丰富的布局。接下来，您将在不运行应用的情况下预览这些屏幕。

常见问题解答

「Text 与 Column 基础」课时是免费的吗？

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

「Text 与 Column 基础」这节课中我会学到什么？

显示并堆叠内容。你通过在浏览器中直接运行的动手代码来练习 Android Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Android Academy 需要有经验吗？

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

「Text 与 Column 基础」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Android Academy