让任意 Composable 支持 clickable
让非按钮元素也可以点击。
让任意 Composable 支持 clickable 是 CoddyKit 上的免费 Jetpack Compose Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Jetpack Compose Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Jetpack Compose Academy 课程共包含 4 节课。
任何内容都可以点击
有时您希望整张卡片或整行内容响应点击，而不是使用按钮。clickable修饰符可以让任何可组合项响应点击。👆
clickable 修饰符
将Modifier.clickable添加到任何元素，并传入一个 onClick lambda。现在，该元素就能像按钮一样处理点击。
Text(
"Open profile",
modifier = Modifier.clickable { open() }
)点击会显示波纹
默认情况下，clickable会添加 Material 波纹，提供即时的视觉反馈，让用户知道点击已被识别。
Box(Modifier.clickable { toggle() }) {
Text("Tap this box")
}让整张卡片都可以点击
这种方式非常适合列表项：将 clickable 添加到行的容器上，这样点击任意位置都可以打开详情屏幕。
Row(Modifier.clickable { openItem(id) }) {
Text(item.title)
}添加内容描述
为了支持无障碍，请传入描述点击行为的onClickLabel，这样屏幕阅读器就能清楚地读出该操作。
Modifier.clickable(
onClickLabel = "Open profile"
) { open() }链中的顺序很重要
将clickable放在 padding 之前，可以让带内边距的区域也能点击；放在 padding 之后，则会将点击范围限制在内部内容上。
Modifier
.clickable { go() }
.padding(16.dp)点击时切换状态
将 clickable 与状态结合，可以构建自定义切换控件，例如点击标题后展开的卡片。
Modifier.clickable { expanded = !expanded }禁用 clickable
clickable 修饰符同样接受一个enabled标志。将它设为 false 后，该元素就会停止响应，和禁用按钮一样。
Modifier.clickable(enabled = isReady) { next() }使用 combinedClickable 支持更多操作
还需要长按或双击吗？请使用combinedClickable，它除了 onClick 外，还提供 onLongClick 和 onDoubleClick。
Modifier.combinedClickable(
onClick = { open() },
onLongClick = { showMenu() }
)按钮与 clickable 的区别
明确的主要操作应使用真正的按钮；当卡片等任意表面需要支持点击时，再使用 clickable。
确保点击目标足够大
带有 clickable 的小段文本可能很难点击。请为它添加内边距，使触摸目标的高度至少约为 48dp。
快速检查
您希望点击列表行中的任意位置都能打开其详情屏幕。
回顾：点击任意内容
您学会了使用clickable修饰符让任何可组合项都支持点击，并添加波纹、标签和 enabled 标志。卡片和行也可以响应操作。🎉
用 AI 导师学习 Kotlin — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 30
- 课程
- 120
常见问题解答
「让任意 Composable 支持 clickable」课时是免费的吗？
是的 — 「让任意 Composable 支持 clickable」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Jetpack Compose Academy 课程的其余内容，请升级到 CoddyKit PRO。 Jetpack Compose Academy 课程共包含 4 节课。
「让任意 Composable 支持 clickable」这节课中我会学到什么？
让非按钮元素也可以点击。 你通过在浏览器中直接运行的动手代码来练习 Jetpack Compose Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Jetpack Compose Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Jetpack Compose Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「让任意 Composable 支持 clickable」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Jetpack Compose Academy 课中编写并运行代码吗？
能。每节 Jetpack Compose Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- Button 与 onClick
- 文本、轮廓与图标按钮
- 启用、禁用与加载状态
- 让任意 Composable 支持 clickable