文本、轮廓与图标按钮
根据需求选择合适的按钮变体。
文本、轮廓与图标按钮 是 CoddyKit 上的免费 Jetpack Compose Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Jetpack Compose Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Jetpack Compose Academy 课程共包含 4 节课。
按钮各有不同风格
并非每个操作都需要醒目的实心按钮。Compose 提供了多种按钮变体，分别表示不同程度的强调。🎨
实心按钮
标准按钮是实心且高强调度的。它很容易吸引注意力，因此每个屏幕只应将它留给一个主要操作。
Button(onClick = { pay() }) {
Text("Pay now")
}用于次要操作的 OutlinedButton
OutlinedButton只有边框，没有填充。它表示一个清晰但次要的选择，通常与实心按钮并列显示。
OutlinedButton(onClick = { cancel() }) {
Text("Cancel")
}用于低强调度操作的 TextButton
TextButton只显示标签，没有边框或填充。它非常适合“了解更多”或对话框选项等不那么醒目的操作。
TextButton(onClick = { dismiss() }) {
Text("Not now")
}强调度具有层次
您可以把它理解为一条强调度阶梯：实心样式最醒目，描边样式居中，文本样式最低调。请根据操作的重要程度选择相应变体。
在按钮中放置图标
任何按钮都可以在其内容行中放置一个图标和一个标签。请添加一个小间隔，避免图标和文本相互贴紧。
Button(onClick = { add() }) {
Icon(Icons.Default.Add, null)
Spacer(Modifier.width(8.dp))
Text("Add")
}IconButton
IconButton是一个紧凑的无标签点击目标，只包含一个图标。它非常适合工具栏和应用栏中的操作。
IconButton(onClick = { share() }) {
Icon(Icons.Default.Share, "Share")
}始终描述您的图标
请为仅包含图标的按钮提供contentDescription，这样屏幕阅读器才能读出它的含义。将描述设为 null 会使其从无障碍服务中隐藏。
IconButton(onClick = { favorite() }) {
Icon(Icons.Default.Favorite, "Favorite")
}使用 FilledIconButton 提高强调度
需要一个更醒目的图标按钮吗？FilledIconButton会添加纯色背景，使其强调度高于普通版本。
FilledIconButton(onClick = { record() }) {
Icon(Icons.Default.Mic, "Record")
}选择合适的变体
正确的选择可以引导用户：确认操作使用实心按钮，替代选项使用描边按钮，关闭操作使用文本按钮，空间紧张时使用IconButton。
相同的 onClick，不同的外观
每种变体都共享相同的onClick契约。您只需改变视觉上的强调程度，不要改变连接操作的方式。
快速检查
您想要一个安静、低强调度的操作，它只有标签，没有边框或填充。
回顾：选择合适的工具，完成正确的点击
现在您已经拥有一套工具：实心按钮、OutlinedButton、TextButton 和 IconButton。请让强调度匹配操作，并为图标添加描述。✨
用 AI 导师学习 Kotlin — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 30
- 课程
- 120
常见问题解答
「文本、轮廓与图标按钮」课时是免费的吗？
是的 — 「文本、轮廓与图标按钮」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Jetpack Compose Academy 课程的其余内容，请升级到 CoddyKit PRO。 Jetpack Compose Academy 课程共包含 4 节课。
「文本、轮廓与图标按钮」这节课中我会学到什么？
根据需求选择合适的按钮变体。 你通过在浏览器中直接运行的动手代码来练习 Jetpack Compose Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Jetpack Compose Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Jetpack Compose Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「文本、轮廓与图标按钮」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Jetpack Compose Academy 课中编写并运行代码吗？
能。每节 Jetpack Compose Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。