0Pricing
Android Academy · 课时

构建个人资料卡片

将可组合函数组合成一个屏幕。

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

我们的目标

现在是综合所学内容的时候了。我们将构建一个简单的个人资料卡片：在样式化的方框中整齐地堆叠姓名和职位。

在此过程中，您将认识 Modifier，它可以控制可组合项的大小、间距和外观。

认识 Modifier

Modifier 可以改变可组合项的外观和行为。您可以通过大多数可组合项都支持的 modifier 参数传入它。

修饰符可以处理内边距、尺寸、背景颜色、边框等内容。它们是在 Compose 中装饰界面的主要方式。

Text(
    "Ada Lovelace",
    modifier = Modifier.padding(16.dp)
)

链接修饰符

您可以使用点号链接多个调用来构建修饰符。每次调用都会返回一个新的修饰符，因此可以将多个修饰符组合起来。

顺序很重要：先设置内边距再设置背景，与先设置背景再设置内边距的效果不同。请像阅读菜谱一样从左到右阅读这条调用链。

Modifier
    .padding(16.dp)
    .fillMaxWidth()

填充宽度

fillMaxWidth 修饰符会让可组合项延伸到所有可用的水平空间。它非常适合需要横跨整个屏幕的卡片。

此外还有可以覆盖两个方向的 fillMaxSize，以及用于设置固定宽度和高度的 size。

Column(
    modifier = Modifier.fillMaxWidth()
) {
    Text("Profile")
}

添加内边距

内边距会在可组合项内部添加空间，也就是在边缘与内容之间留出距离。请将 Modifier.padding 与一个 dp 值结合使用。

内边距可以避免文字贴近卡片边缘，让布局更舒适、整洁。

Column(
    modifier = Modifier.padding(16.dp)
) {
    Text("Ada Lovelace")
    Text("Mathematician")
}

为卡片添加背景

背景颜色可以让卡片更加醒目。请使用 background 修饰符和一个颜色值来应用背景。

将它与内边距结合使用，可以让文字周围的着色区域留出适当空间。

Column(
    modifier = Modifier
        .background(Color.LightGray)
        .padding(16.dp)
) {
    Text("Ada Lovelace")
}

堆叠姓名和职位

在卡片的 Column 内，我们将两段文字上下堆叠：上方是粗体姓名，下方是较细的职位。

为它们设置不同的 fontSize 和 fontWeight 值，可以形成清晰的视觉层次。

Column {
    Text("Ada Lovelace", fontSize = 20.sp, fontWeight = FontWeight.Bold)
    Text("Mathematician", fontSize = 14.sp)
}

让它可复用

让我们将卡片转换为可复用的可组合项，使其接受 name 和 title 参数。这样它就能显示任何人的信息。

这与第一课中的理念相同：传入数据，在各处复用界面。

@Composable
fun ProfileCard(name: String, title: String) {
    Column {
        Text(name)
        Text(title)
    }
}

完整的个人资料卡片

下面是组合了所有部分的卡片：一个全宽的列、灰色背景、内边距，以及两行经过样式设置的文字。

请注意，修饰符链和列中的子项如何将前几课的内容组合成一个整洁的可组合项。

@Composable
fun ProfileCard(name: String, title: String) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.LightGray)
            .padding(16.dp)
    ) {
        Text(name, fontSize = 20.sp, fontWeight = FontWeight.Bold)
        Text(title, fontSize = 14.sp)
    }
}

预览卡片

添加一个 @Preview 包装函数，就可以在 Android Studio 中查看卡片。它会使用示例数据调用 ProfileCard，并显示背景。

现在，您可以调整内边距或颜色，并立即看到结果更新。

@Preview(showBackground = true)
@Composable
fun ProfileCardPreview() {
    ProfileCard("Ada Lovelace", "Mathematician")
}

在屏幕上显示

要在运行中的应用里显示卡片，请在活动的 setContent 中调用它。这样就能将您的可组合项接入实时屏幕。

现在，您已经从一个可组合项构建出了完整且可复用的界面组件。

setContent {
    ProfileCard("Ada Lovelace", "Mathematician")
}

快速检查

让我们复习可组合项如何获得内边距、尺寸和背景。

回顾

您通过组合 Text、Column 和 Modifier，构建了一个完整的个人资料卡片。修饰符可以让您链接 padding、fillMaxWidth 和 background，从而调整界面形状并设置样式。

您使用 name 和 title 参数让卡片可复用，使用 @Preview 预览它，并通过 setContent 将它显示出来。这就是从头到尾构建一个完整的可组合屏幕。恭喜您！

常见问题解答

「构建个人资料卡片」课时是免费的吗？

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

「构建个人资料卡片」这节课中我会学到什么？

将可组合函数组合成一个屏幕。 你通过在浏览器中直接运行的动手代码来练习 Android Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Android Academy 需要有经验吗？

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

「构建个人资料卡片」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. 什么是可组合函数
  2. Text 与 Column 基础
  3. 预览您的 UI
  4. 构建个人资料卡片
← 返回 Android Academy