Android Academy · 课时

文本、图像和按钮

Q: 「文本、图像和按钮」这节课中我会学到什么？

使用基础内置可组合项 你通过在浏览器中直接运行的动手代码来练习 Android Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用基础内置可组合项

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

内置可组合函数

Compose 自带了用于常见用户界面的现成可组合函数。您会经常使用的三个函数是 Text、Image 和 Button。

Text 可组合函数

Text 用于显示字符串。它最重要的参数是 text。

@Composable
fun Title() {
    Text(text = "My App")
}

设置文本样式

Text 接受许多样式参数，例如 fontSize、color 和 fontWeight。

Text(
    text = "Big Bold",
    fontSize = 24.sp,
    color = Color.Blue,
    fontWeight = FontWeight.Bold
)

sp 与 dp

字体大小使用 .sp（可缩放像素），因此会遵循用户的字体大小辅助功能设置。布局大小使用 .dp（与密度无关的像素）。

文本使用 sp，其他内容使用 dp。

Image 可组合函数

Image 用于显示图片。使用 painterResource 加载可绘制资源，并始终提供 contentDescription 以支持无障碍功能。

Image(
    painter = painterResource(id = R.drawable.logo),
    contentDescription = "App logo"
)

contentDescription

屏幕阅读器会朗读 contentDescription。对于不传达任何含义的装饰性图片，请传入 null。对于有意义的图片，请提供简短描述。

Button 可组合函数

Button 是可点击元素。它的关键参数是 onClick，这是点按时运行的 lambda。按钮标签应放在其内容 lambda 中，通常使用 Text。

Button(onClick = { /* do something */ }) {
    Text(text = "Tap me")
}

响应点击

您可以在 onClick lambda 中编写逻辑，例如更新状态、导航或调用函数。

Button(onClick = { println("Clicked!") }) {
    Text(text = "Log")
}

内容 lambda

请注意，Button 接受一个尾随的内容 lambda。放在其中的任何内容都会作为按钮内容呈现，因此按钮不仅可以包含标签，还可以同时包含图标和文本。

Button(onClick = { }) {
    Text(text = "Save")
}

组合使用

实际的用户界面会混合使用这些可组合函数。这里，标题、图片和按钮堆叠在 Column 中。

@Composable
fun Card() {
    Column {
        Text(text = "Profile")
        Image(
            painter = painterResource(id = R.drawable.avatar),
            contentDescription = "Avatar"
        )
        Button(onClick = { }) { Text("Follow") }
    }
}

还有更多可组合函数

除了这三个函数之外，Compose 还提供 TextField、Icon、Checkbox、Switch 等许多组件。使用方式相同：传入参数和内容 lambda。

快速检查

用户点击按钮时，Button 的哪个参数会运行您的代码？

回顾

您了解了三个核心可组合项：

Text — 显示字符串；使用 fontSize 和 color 设置样式（使用 sp）。
Image — 使用 painterResource 和 contentDescription。
Button — 使用 onClick lambda 和内容 lambda。

常见问题解答

「文本、图像和按钮」课时是免费的吗？

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

「文本、图像和按钮」这节课中我会学到什么？

使用基础内置可组合项你通过在浏览器中直接运行的动手代码来练习 Android Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Android Academy 需要有经验吗？

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

「文本、图像和按钮」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Android Academy