7、按钮与交互：Button、TextButton、OutlinedButton、IconButton、点击事件处理、手势检测

按钮，是任何UI界面里最基础、也最关键的交互元素。用户点一下，应用就得有反应。在Jetpack Compose里，按钮的种类和交互方式比传统View时代丰富了不少。今天我们就来把这些按钮挨个捋一遍，再聊聊点击事件和手势检测的那些坑。

7.1 四大按钮组件：各司其职

Compose提供了几种开箱即用的按钮，每种都有自己适合的场景。我个人的习惯是：先想清楚这个按钮要传达什么意图，再选对应的组件。

7.1.1 Button——默认的主力按钮

Button是带填充背景的按钮，视觉权重最高。适合「提交」、「确认」、「保存」这类主要操作。

@Composable
fun PrimaryButtonExample() {
    Button(
        onClick = { /* 处理点击 */ },
        colors = ButtonDefaults.buttonColors(
            containerColor = MaterialTheme.colorScheme.primary
        )
    ) {
        Text("提交订单")
    }
}

我在项目中遇到过一个问题：按钮文字太长时，默认的Button会直接截断。后来发现可以设置minWidth和height，或者用IntrinsicSize.Min来让按钮自适应。嗯，这里要注意，Button默认有最小尺寸，别让文字被吃了。

7.1.2 TextButton——轻量级文字按钮

TextButton没有背景，只有文字。适合「取消」、「查看详情」这类次要操作。说白了，就是告诉用户「你可以点，但我不那么显眼」。

@Composable
fun TextButtonExample() {
    TextButton(onClick = { /* 处理点击 */ }) {
        Text("查看详情")
    }
}

你想想看，如果一个页面上全是Button，用户会眼花缭乱。把次要操作做成TextButton，主次分明，用户体验会好很多。

7.1.3 OutlinedButton——带边框的按钮

OutlinedButton有边框但无填充，视觉权重介于Button和TextButton之间。适合「注册」、「下一步」这类中等重要的操作。

@Composable
fun OutlinedButtonExample() {
    OutlinedButton(onClick = { /* 处理点击 */ }) {
        Text("下一步")
    }
}

我曾经在一个登录页面上，把「登录」用Button，「注册」用OutlinedButton，效果很不错。用户一眼就能看出哪个是主要操作。

7.1.4 IconButton——纯图标按钮

IconButton只显示图标，没有文字。适合工具栏、导航栏里的操作，比如「搜索」、「设置」、「返回」。

@Composable
fun IconButtonExample() {
    IconButton(onClick = { /* 处理点击 */ }) {
        Icon(
            imageVector = Icons.Default.Search,
            contentDescription = "搜索"
        )
    }
}

这里有个坑：contentDescription一定要写。无障碍功能依赖它，而且你想想看，如果用户开了屏幕阅读器，没有描述的话，图标按钮就变成「不可见」的了。

7.2 点击事件处理：不止是onClick

按钮最核心的交互就是点击。但Compose里的点击事件处理，比传统View要灵活得多。

7.2.1 基础点击：onClick lambda

所有按钮组件都接受一个onClick参数，类型是() -> Unit。这是最常用的方式。

Button(onClick = {
    // 你的点击逻辑
    viewModel.submitOrder()
}) {
    Text("提交")
}

我个人习惯把点击逻辑放在ViewModel里，按钮只负责调用。这样UI层干净，测试也方便。

7.2.2 带参数的点击事件

有时候你需要把某个数据传进去，比如列表项的ID。可以用lambda捕获变量：

@Composable
fun ItemList(items: List<Item>) {
    LazyColumn {
        items(items) { item ->
            Button(onClick = { onItemClick(item.id) }) {
                Text(item.name)
            }
        }
    }
}

嗯，这里要注意闭包捕获的问题。如果item是可变状态，点击时拿到的可能是旧值。我建议用remember或者直接把ID传进去。

7.2.3 防重复点击

用户手抖点两下，你的网络请求就发了两次。这很常见。我曾经在一个支付页面上，用户连续点了两次「确认支付」，结果扣了两笔钱……后来我加了一个防重复点击的机制。

@Composable
fun rememberClickable(
    onClick: () -> Unit,
    debounceMs: Long = 500L
): () -> Unit {
    val lastClickTime = remember { mutableLongStateOf(0L) }
    return {
        val now = System.currentTimeMillis()
        if (now - lastClickTime.longValue > debounceMs) {
            lastClickTime.longValue = now
            onClick()
        }
    }
}

// 使用
Button(onClick = rememberClickable(onClick = {
    viewModel.submitOrder()
})) {
    Text("提交")
}

说白了，就是记录上次点击时间，间隔太短就忽略。这个技巧我几乎每个项目都会用。

7.3 手势检测：更丰富的交互

除了点击，用户还有长按、双击、滑动等手势。Compose提供了Modifier.pointerInput来检测各种手势。

7.3.1 检测点击和长按

@Composable
fun GestureDetectExample() {
    var text by remember { mutableStateOf("点击或长按我") }

    Text(
        text = text,
        modifier = Modifier
            .pointerInput(Unit) {
                detectTapGestures(
                    onTap = { text = "单击" },
                    onLongPress = { text = "长按" },
                    onDoubleTap = { text = "双击" }
                )
            }
    )
}

你想想看，一个文本也可以响应多种手势。这在传统View里需要写一堆监听器，Compose里一个pointerInput就搞定了。

7.3.2 检测滑动和拖拽

@Composable
fun SwipeToDismissExample() {
    var offsetX by remember { mutableFloatStateOf(0f) }

    Box(
        modifier = Modifier
            .offset { IntOffset(offsetX.roundToInt(), 0) }
            .pointerInput(Unit) {
                detectHorizontalDragGestures { _, dragAmount ->
                    offsetX += dragAmount
                }
            }
            .background(Color.LightGray)
            .size(200.dp, 100.dp)
    ) {
        Text("滑动我", modifier = Modifier.align(Alignment.Center))
    }
}

我在项目中做过一个「滑动删除」的效果，就是用detectHorizontalDragGestures实现的。配合AnimatedOffset，动画效果很流畅。

7.3.3 多点触控与缩放

@Composable
fun PinchToZoomExample() {
    var scale by remember { mutableFloatStateOf(1f) }

    Image(
        painter = painterResource(id = R.drawable.sample),
        contentDescription = "可缩放图片",
        modifier = Modifier
            .graphicsLayer(scaleX = scale, scaleY = scale)
            .pointerInput(Unit) {
                detectTransformGestures { _, _, zoom, _ ->
                    scale = (scale * zoom).coerceIn(0.5f, 3f)
                }
            }
    )
}

嗯，这里要注意coerceIn限制缩放范围，不然用户把图片缩到无限大或者缩没了，体验会很差。

7.4 按钮状态与样式定制

按钮不只是「可点击」和「不可点击」两种状态。Compose支持enabled、loading等状态，还可以自定义颜色、形状、阴影。

7.4.1 禁用状态

var isFormValid by remember { mutableStateOf(false) }

Button(
    onClick = { /* 提交 */ },
    enabled = isFormValid
) {
    Text("提交")
}

表单没填完时，按钮应该是灰色的。这个enabled参数就是干这个的。我曾经见过有人手动改按钮透明度来实现禁用效果，其实完全没必要。

7.4.2 加载状态

@Composable
fun LoadingButton(
    isLoading: Boolean,
    onClick: () -> Unit,
    text: String
) {
    Button(
        onClick = onClick,
        enabled = !isLoading
    ) {
        if (isLoading) {
            CircularProgressIndicator(
                modifier = Modifier.size(20.dp),
                color = MaterialTheme.colorScheme.onPrimary,
                strokeWidth = 2.dp
            )
        } else {
            Text(text)
        }
    }
}

用户点击后，按钮显示转圈动画，同时禁用再次点击。这个模式在登录、支付等场景很常见。我建议把LoadingButton封装成可复用组件，省得每个页面都写一遍。

7.4.3 自定义形状和颜色

Button(
    onClick = { /* 处理点击 */ },
    shape = RoundedCornerShape(8.dp),
    colors = ButtonDefaults.buttonColors(
        containerColor = Color(0xFF6200EE),
        contentColor = Color.White,
        disabledContainerColor = Color.Gray
    ),
    elevation = ButtonDefaults.buttonElevation(
        defaultElevation = 4.dp,
        pressedElevation = 8.dp
    )
) {
    Text("自定义按钮")
}

你想想看，一个按钮的颜色、形状、阴影都可以单独控制。Compose的ButtonDefaults提供了默认值，但你完全可以覆盖。我一般会在主题里统一配置，而不是每个按钮单独写。

7.5 知识体系总览

下面这张图把本章的核心知识点串了起来，方便你回顾。

按钮与交互知识体系 按钮与交互 按钮类型 Button TextButton OutlinedButton IconButton 点击事件处理 onClick 参数传递 防重复点击 状态管理 手势检测 点击/长按 滑动/拖拽 多点触控 缩放旋转 样式定制 颜色 形状 阴影 状态

7.6 避坑指南与最佳实践

最后，分享几个我在实际项目中踩过的坑，希望能帮你少走弯路。

⚠️ 注意：

  • 不要滥用Button：一个页面上如果有超过3个Button，用户会感到压迫。把次要操作换成TextButton或OutlinedButton。
  • IconButton一定要加contentDescription：无障碍不是可选项，是必选项。我曾经因为漏掉这个被QA打回。
  • 防重复点击是刚需：网络请求、支付、提交表单等场景，一定要做防重复处理。用户手抖不是用户的错，是开发者的锅。
  • 手势检测要谨慎：不要在一个组件上叠加太多手势，容易冲突。比如同时检测点击和滑动，用户可能分不清。

💡 我的建议：

  • 把常用的按钮样式封装成主题级别的组件，比如PrimaryButton、SecondaryButton，统一管理。
  • 手势检测用pointerInput时，记得用remember缓存，避免重组时重复创建。
  • 按钮的onClick里不要写复杂逻辑，交给ViewModel或回调。

好了，按钮与交互这部分就聊到这里。记住，按钮是用户和你的应用对话的入口，设计得好，用户用得舒服；设计得不好，用户会摔手机。嗯，希望你能做出让用户「忍不住想点」的按钮。

← 上一章 📖 返回目录 下一章 →