按钮 (Button)

源：Material Design 按钮

M3 提供了 5 种基本类型的按钮，以及悬浮按钮 (FAB) 和图标按钮 (IconButton)。

1. 常规按钮

所有按钮都遵循相同的 API 结构：onClick 回调和 content 内容。

Button (Filled)

// 高强调：主要操作
Button(onClick = { /* ... */ }) {
    Icon(Icons.Default.Add, null)
    Spacer(Modifier.width(8.dp)) // 图标和文字间距
    Text("添加项目")
}

FilledTonalButton

// 中强调：次要操作
FilledTonalButton(onClick = { /* ... */ }) {
    Text("确认")
}

OutlinedButton

// 低强调：带边框
OutlinedButton(onClick = { /* ... */ }) {
    Text("取消")
}

ElevatedButton

// 带阴影的按钮
ElevatedButton(onClick = { /* ... */ }) {
    Text("Elevated")
}

TextButton

// 最低强调：通常用于 Dialog 或卡片内
TextButton(onClick = { /* ... */ }) {
    Text("了解更多")
}

2. 交互状态

您可以通过 enabled 参数禁用按钮，也可以通过 colors 自定义不同状态下的颜色。

Button(
    onClick = { },
    enabled = false, // 禁用状态
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.Blue,
        contentColor = Color.White,
        disabledContainerColor = Color.Gray,
        disabledContentColor = Color.DarkGray
    ),
    shape = RoundedCornerShape(8.dp) // 自定义形状
) {
    Text("自定义样式")
}

3. 图标按钮 (IconButton)

用于仅显示图标的操作。

IconButton(onClick = { /* ... */ }) {
    Icon(Icons.Filled.Favorite, contentDescription = "收藏")
}

// M3 新增：带背景的图标按钮
FilledIconButton(onClick = { /* ... */ }) {
    Icon(Icons.Filled.Lock, contentDescription = "锁定")
}

4. 悬浮按钮 (FAB)

通常用于屏幕上的主要操作，常与 Scaffold 配合使用。

FloatingActionButton

FloatingActionButton(
    onClick = { },
    containerColor = MaterialTheme.colorScheme.secondaryContainer,
    contentColor = MaterialTheme.colorScheme.onSecondaryContainer
) {
    Icon(Icons.Filled.Add, "Add")
}

ExtendedFloatingActionButton

// 扩展 FAB：带文字和图标
ExtendedFloatingActionButton(
    onClick = { },
    icon = { Icon(Icons.Filled.Edit, "Edit") },
    text = { Text("Compose") },
)