Android Academy · 课时

按钮与点击

Q: 「按钮与点击」这节课中我会学到什么？

添加交互式按钮。 你通过在浏览器中直接运行的动手代码来练习 Android Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

添加交互式按钮。

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

什么是按钮

按钮是一种可点击的可组合项。当用户点击它时，应用会运行一些代码。

按钮需要一个 onClick 操作，以及用于显示的内容，通常是一个 Text 标签。

Button(onClick = { }) {
    Text("Tap me")
}

onClick Lambda

onClick 参数接受一个 Lambda，也就是大括号 { } 中的代码。每次按下按钮时，这段代码都会运行。

您可以在其中放入任意逻辑，例如输出信息或更改数据。

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

按钮内容

尾随大括号中的内容属于 RowScope。您可以在其中放置 Text、图标，或同时放置两者。

大多数按钮只包含一个用于描述操作的 Text 标签。

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

使用状态统计点击次数

要响应点按操作，请使用 remember 和 mutableStateOf 保存一个值。值发生变化时，界面会更新。

这里每次点按都会让 count 加一。

var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
    Text("Count: $count")
}

禁用按钮

enabled 参数控制按钮是否可以被点按。将它设为 false，按钮会变灰并阻止点击。

表单尚未填写完整时，这项功能非常有用。

Button(
    onClick = { },
    enabled = false
) {
    Text("Locked")
}

OutlinedButton

OutlinedButton 只绘制边框，不填充颜色。它的工作方式相同，但外观更加轻盈。

可以将它用于主按钮旁边的次要操作。

OutlinedButton(onClick = { }) {
    Text("Cancel")
}

TextButton

TextButton 只显示标签，没有边框或填充色。它是最轻量的按钮样式。

它很适合“跳过”或“了解更多”这类强调程度较低的操作。

TextButton(onClick = { }) {
    Text("Skip")
}

按钮颜色

您可以使用 ButtonDefaults.buttonColors 为 Button 重新着色，并通过 containerColor 指定背景颜色。

请选择符合品牌风格且易于阅读的颜色。

Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.Green
    )
) {
    Text("Go")
}

IconButton

IconButton 是一个小型的圆形可点按区域，用于放置单个图标，例如爱心或菜单图标。

它没有标签，因此可以节省工具栏空间。

IconButton(onClick = { }) {
    Icon(Icons.Default.Favorite, contentDescription = "Like")
}

设置按钮形状

shape 参数可以改变按钮的圆角。使用带有 dp 值的 RoundedCornerShape，即可让边缘更加圆润。

数值越大，按钮就越柔和，越像胶囊形。

Button(
    onClick = { },
    shape = RoundedCornerShape(16.dp)
) {
    Text("Rounded")
}

为点击函数命名

为了让代码整洁，请为 onClick 指定一个命名函数，而不是直接写内联逻辑。这样可以让界面代码更易读。

您可以传入函数引用，也可以在 lambda 中调用该函数。

fun onSave() { println("Saved") }
Button(onClick = { onSave() }) {
    Text("Save")
}

快速检查

检验您对按钮的理解。

回顾

您已经学会了 Button 使用 onClick 指定操作，并使用内容块显示标签。使用 remember 保存的状态可以让点击操作改变界面。

您还了解了 OutlinedButton、TextButton、IconButton，以及如何设置 enabled、颜色和形状。

接下来，您将使用 padding 控制间距。

常见问题解答

「按钮与点击」课时是免费的吗？

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

「按钮与点击」这节课中我会学到什么？

添加交互式按钮。你通过在浏览器中直接运行的动手代码来练习 Android Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Android Academy 需要有经验吗？

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

「按钮与点击」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Android Academy