按钮 Button

在 Jetpack Compose 中，按钮是常用的交互组件。下面覆盖常见的按钮类型、重要参数、常用 API、可访问性注意事项以及实用示例，便于在实际项目中快速查阅与使用。

目录

• 常见按钮类型
• 核心属性与参数
• 常用 API 与 ButtonDefaults
• 示例（基础、图标、加载态、禁用、样式定制）
• 可访问性与交互提示
• 速查小结

常见按钮类型

• Button：默认的实心按钮（Material）。接受 onClick、enabled、modifier、colors、shape、elevation 等参数。
• TextButton：扁平文本按钮，无边框和阴影，适合次要操作。
• OutlinedButton：带轮廓（边框）的按钮，介于实心与文本按钮之间。
• IconButton：用于仅显示图标的按钮，常用于工具栏或操作栏。
• FloatingActionButton / ExtendedFloatingActionButton：浮动操作按钮，通常用于突出主要操作。
• Material3：在 Material3 中还常见 ElevatedButton、FilledTonalButton 等变体，API 与 Material2 类似但样式不同。

核心属性与参数

• onClick: () -> Unit：必须参数，点击回调。
• enabled: Boolean：是否可用（禁用时变灰且不可点击）。
• modifier: Modifier：常用来设置尺寸、padding、布局行为等。
• shape: Shape：按钮形状（如 RoundedCornerShape(8.dp)）。
• colors: ButtonColors：按钮颜色定制，使用 ButtonDefaults.buttonColors() 或 ButtonDefaults.textButtonColors()。
• contentPadding: PaddingValues：内部内容间距，使用 ButtonDefaults.ContentPadding 可保持一致样式。
• elevation: ButtonElevation：阴影/抬起（仅在某些按钮变体可用）。
• border: BorderStroke（针对 OutlinedButton）：设置边框宽度与颜色。
• interactionSource: MutableInteractionSource：用于自定义交互反馈/状态（悬停、按下等）。
• indication：控制涟漪效果（通常使用 rememberRipple()）。

常用 API 与 ButtonDefaults

• ButtonDefaults.buttonColors(...)：返回 ButtonColors，可自定义 containerColor、contentColor、disabledContainerColor 等（Material3 名称可能为 containerColor / contentColor，Material2 为 backgroundColor / contentColor）。
• ButtonDefaults.elevation()：为按钮提供默认或自定义的阴影参数。
• ButtonDefaults.ContentPadding：默认的按钮内部间距。
• IconButton 与 Icon 结合使用，图标需要 contentDescription 以支持无障碍。

示例：基础 Button

@Composable
fun BasicButtonExample() {
    Button(
        onClick = { /* 点击处理 */ },
        modifier = Modifier.padding(16.dp)
    ) {
        Text("提交")
    }
}

示例：TextButton 与 OutlinedButton

@Composable
fun TextAndOutlinedButtons() {
    Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
        TextButton(onClick = { /* 次要操作 */ }) {
            Text("取消")
        }

        OutlinedButton(onClick = { /* 次要边框操作 */ }) {
            Text("详情")
        }
    }
}

示例：IconButton 与 带图标的 Button

@Composable
fun IconButtons() {
    Row(horizontalArrangement = Arrangement.spacedBy(12.dp), modifier = Modifier.padding(16.dp)) {
        IconButton(onClick = { /* 搜索 */ }) {
            Icon(imageVector = Icons.Default.Search, contentDescription = "搜索")
        }

        Button(onClick = { /* 带图标的主操作 */ }) {
            Icon(imageVector = Icons.Default.Favorite, contentDescription = null)
            Spacer(Modifier.width(8.dp))
            Text("喜欢")
        }
    }
}

示例：OutlinedButton 自定义边框与颜色

@Composable
fun CustomOutlined() {
    OutlinedButton(
        onClick = {},
        border = BorderStroke(1.dp, Color.Gray),
        colors = ButtonDefaults.outlinedButtonColors(
            contentColor = Color(0xFF1E88E5)
        )
    ) {
        Text("自定义边框")
    }
}

示例：禁用与加载态

@Composable
fun DisabledAndLoadingButton() {
    var loading by remember { mutableStateOf(false) }

    Button(
        onClick = { loading = true /* 发起请求 */ },
        enabled = !loading
    ) {
        if (loading) {
            CircularProgressIndicator(
                modifier = Modifier.size(18.dp),
                strokeWidth = 2.dp,
                color = MaterialTheme.colors.onPrimary
            )
            Spacer(Modifier.width(8.dp))
            Text("加载中...")
        } else {
            Text("发送")
        }
    }
}

示例：自定义颜色与形状

@Composable
fun ColoredShapedButton() {
    Button(
        onClick = {},
        colors = ButtonDefaults.buttonColors(
            backgroundColor = Color(0xFF6200EE),
            contentColor = Color.White
        ),
        shape = RoundedCornerShape(12.dp)
    ) {
        Text("自定义样式")
    }
}

注意：在 Material3 中命名与参数可能略有不同（例如 containerColor、contentColor 等），请参考对应库版本的 API 文档。

交互与无障碍（Accessibility）

• contentDescription：对于仅图标的 IconButton，务必提供 contentDescription，以便无障碍工具识别操作含义。
• semantics：可使用 Modifier.semantics { role = Role.Button } 添加或覆盖语义信息。
• enabled：禁用状态会自动降低可访问性交互，但仍建议通过视觉提示（颜色/透明度）明确区分。

进阶：交互反馈与 ripple

• 使用 interactionSource 与 indication = rememberRipple() 可以自定义点击和涟漪效果。MutableInteractionSource 可用于监听按下/释放等交互状态。

@Composable
fun RippleButton() {
    val interactionSource = remember { MutableInteractionSource() }
    Button(
        onClick = {},
        interactionSource = interactionSource,
        indication = rememberRipple(bounded = true, color = Color.White)
    ) {
        Text("Ripple")
    }
}

小结（速查）

• 基本类型：Button、TextButton、OutlinedButton、IconButton、FloatingActionButton
• 关键参数：onClick、enabled、modifier、colors、shape、contentPadding、elevation、border
• 样式工具：ButtonDefaults（buttonColors、outlinedButtonColors、ContentPadding、elevation）
• 可访问性：为图标按钮提供 contentDescription，必要时使用 semantics
• 常见用例：带图标按钮、加载态、禁用态、自定义形状与颜色

简单代码

@Composable
fun ButtonComponents() {

    val myBackgroundColor = remember {
        mutableStateOf(Color.Red)
    }

    Button(
        colors = ButtonDefaults.buttonColors(containerColor = myBackgroundColor.value),
        onClick = {
            if (myBackgroundColor.value == Color.Red) {
                myBackgroundColor.value = Color.Green
            } else {
                myBackgroundColor.value = Color.Red
            }
        }
    ) {
        Text(text = "切换颜色", color = Color.White)
    }

}