Compose 中 Button 超详细使用总结
Jetpack Compose 的 Button 是 Material Design 3 风格的基础按钮组件，完全声明式写法，无需传统 XML 布局，支持自定义样式、点击事件、形状、颜色、大小等所有常用配置。
Compose 提供了多种按钮样式，以区分操作的优先级和重要性：
- Button (填充按钮):
- 外观: 具有实心背景色，通常与品牌色一致。
- 用途: 用于页面上最重要的主要操作，例如“提交”、“保存”、“购买”。
- ElevatedButton (凸起按钮):
- 外观: 在 Button 基础上增加了阴影，使其在背景上更加突出。
- 用途: 当需要在一个非纯色背景或内容区域上强调一个主要操作时使用。
- FilledTonalButton (填充色调按钮):
- 外观: 背景色为次级色调，介于 Button 和 OutlinedButton 之间。
- 用途: 用于次要操作，以避免与主要按钮竞争视觉注意力。
- OutlinedButton (轮廓按钮):
- 外观: 仅有边框，背景透明。
- 用途: 用于中等重要性的选项或作为主要操作的替代选项，例如“取消”。
- TextButton (文本按钮):
- 外观: 无背景，无边框，仅显示文本。
- 用途: 用于低优先级的辅助操作，例如“帮助”、“了解更多”。
一、基础依赖
确保项目已引入 Compose Material3 依赖（默认新项目已配置）：
implementation "androidx.compose.material3:material3:1.2.0"
二、核心基础用法
1. 最简单的 Button
@Composable
fun BasicButton() {
Button(
// 点击事件（必填）
onClick = {
// 点击后执行逻辑
println("按钮被点击了")
}
) {
// 按钮内部内容：文字、图标、组合布局（必填）
Text(text = "基础按钮")
}
}
✅ 必须参数：
onClick：点击回调（不能为空）- 内容 lambda：按钮内部显示的组件（文字 / 图标 / 布局）
三、Button 常用完整参数（全解析）
这是最全参数模板，所有可配置项都在这里：
@Composable
fun FullButton() {
Button(
onClick = { /* 点击事件 */ },
// 1. 启用状态：true 可点击，false 不可点击（默认 true）
enabled = true,
// 2. 形状：圆角、椭圆、矩形等
shape = MaterialTheme.shapes.medium,
// 3. 按钮颜色（容器色 + 内容色）
colors = ButtonDefaults.buttonColors(
containerColor = MaterialTheme.colorScheme.primary, // 背景色
contentColor = MaterialTheme.colorScheme.onPrimary, // 文字/图标色
disabledContainerColor = Color.Gray, // 禁用状态背景
disabledContentColor = Color.White // 禁用状态文字
),
// 4. 边框
border = BorderStroke(
width = 1.dp,
color = MaterialTheme.colorScheme.primary
),
// 5. 内边距（按钮内部间距）
contentPadding = ButtonDefaults.ContentPadding,
// 6. 宽高/大小修饰符
modifier = Modifier
.width(200.dp)
.height(50.dp)
.clip(RoundedCornerShape(8.dp)),
// 7. 点击涟漪效果（默认开启）
interactionSource = remember { MutableInteractionSource() }
) {
Text(text = "完整配置按钮")
}
}
四、Button 官方标准变体（Material3）
Compose 提供 4 种官方按钮样式，直接使用即可：
1. 普通主按钮（Button）
最常用，强调主要操作
Button(onClick = {}) {
Text("主按钮")
}
2. 文字按钮（TextButton）
无背景，只有文字，用于次要操作
TextButton(onClick = {}) {
Text("文字按钮")
}
3. 轮廓按钮（OutlinedButton）
带边框、透明背景，用于次要操作
kotlin
OutlinedButton(onClick = {}) {
Text("轮廓按钮")
}
4. 图标按钮（IconButton）
仅图标，无文字，用于工具栏 / 导航
kotlin
IconButton(onClick = {}) {
Icon(Icons.Default.Favorite, contentDescription = "收藏")
}
五、高级自定义用法
1. 带图标的按钮
文字 + 图标 是最常用组合：
Button(onClick = {}) {
// 图标
Icon(
imageVector = Icons.Default.Add,
contentDescription = null,
modifier = Modifier.size(18.dp)
)
// 间距
Spacer(modifier = Modifier.width(4.dp))
// 文字
Text("添加")
}
2. 自定义形状：圆角 / 圆形 / 矩形
Column {
// 超大圆角
Button(
shape = RoundedCornerShape(20.dp),
onClick = {}
) { Text("大圆角按钮") }
// 圆形按钮
Button(
shape = CircleShape,
modifier = Modifier.size(60.dp),
onClick = {}
) { Icon(Icons.Default.Check, null) }
}
3. 自定义大小
用 modifier 控制宽高、填充、边距：
kotlin
Button(
modifier = Modifier
.fillMaxWidth() // 宽度铺满父布局
.height(56.dp), // 固定高度
onClick = {}
) { Text("全屏宽按钮") }
4. 禁用状态按钮
只需设置 enabled = false，自动变灰不可点击：
kotlin
Button(
enabled = false,
onClick = {}
) { Text("禁用按钮") }
5. 自定义颜色（完全自定义）
kotlin
Button(
colors = ButtonDefaults.buttonColors(
containerColor = Color(0xFFFF5722), // 自定义背景
contentColor = Color.White // 自定义文字
),
onClick = {}
) { Text("橙色按钮") }
六、状态监听（点击 / 按压 / 悬停）
监听按钮按压、释放、禁用等交互状态：
@Composable
fun StateButton() {
val interactionSource = remember { MutableInteractionSource() }
// 判断是否按压
val isPressed by interactionSource.collectIsPressedAsState()
Button(
onClick = {},
interactionSource = interactionSource,
// 按压时变色
colors = ButtonDefaults.buttonColors(
containerColor = if (isPressed) Color.Red else Color.Blue
)
) {
Text(if (isPressed) "按压中" else "常态按钮")
}
}
七、封装可复用按钮（最佳实践）
项目中建议封装通用按钮，统一样式：
// 封装通用主按钮
@Composable
fun CommonButton(
text: String,
modifier: Modifier = Modifier,
enabled: Boolean = true,
onClick: () -> Unit
) {
Button(
modifier = modifier
.fillMaxWidth()
.height(50.dp),
onClick = onClick,
enabled = enabled,
shape = RoundedCornerShape(8.dp),
colors = ButtonDefaults.buttonColors()
) {
Text(text = text, fontSize = 16.sp)
}
}
// 使用
CommonButton(text = "提交订单") {
// 点击逻辑
}
八、常见问题 & 注意事项
-
Button 不设置 onClick 会报错：onClick 是必传参数
-
内容溢出：按钮内容过长会自动换行，可用
modifier.clip()裁剪 -
点击范围：Button 默认自带最小触摸区域（48x48dp），符合安卓规范
-
Material2 vs Material3：
- 老项目：
import androidx.compose.material.Button - 新项目 / 推荐：
import androidx.compose.material3.Button
- 老项目：
-
无边距：Compose Button 默认无外边距，用
Spacer或modifier.padding()控制间距
九、完整示例代码（可直接运行）
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
@Composable
fun ButtonDemoScreen() {
Column(
modifier = Modifier
.fillMaxSize()
.padding(20.dp),
verticalArrangement = Arrangement.spacedBy(16.dp)
) {
// 1. 基础按钮
Button(onClick = {}) {
Text("基础按钮")
}
// 2. 带图标按钮
Button(onClick = {}) {
Icon(Icons.Default.Add, null, Modifier.size(18.dp))
Spacer(Modifier.width(4.dp))
Text("带图标按钮")
}
// 3. 轮廓按钮
OutlinedButton(onClick = {}) {
Text("轮廓按钮")
}
// 4. 禁用按钮
Button(enabled = false, onClick = {}) {
Text("禁用按钮")
}
// 5. 自定义形状按钮
Button(
shape = RoundedCornerShape(20.dp),
onClick = {}
) {
Text("大圆角按钮")
}
// 6. 封装通用按钮
CommonButton(text = "通用按钮") {}
}
}
// 封装复用按钮
@Composable
fun CommonButton(
text: String,
modifier: Modifier = Modifier,
enabled: Boolean = true,
onClick: () -> Unit
) {
Button(
modifier = modifier
.fillMaxWidth()
.height(50.dp),
onClick = onClick,
enabled = enabled,
shape = RoundedCornerShape(8.dp)
) {
Text(text = text, fontSize = 16.sp)
}
}
总结
- 核心：
Button(onClick={}){ 内容 }，必传点击事件 + 内部组件 - 4 种官方样式：Button / TextButton / OutlinedButton / IconButton
- 自定义项：形状、颜色、大小、边框、内边距、状态、图标
- 最佳实践：封装通用按钮，统一项目样式
- Material3：新项目优先使用，适配最新设计规范
