M3E 设计系统
M3E 设计系统 · androidx.compose.material3
SplitButton：一个主动作，一个相关动作1.5.0-alpha25
理解 leading/trailing 两个点击目标、匹配的内侧圆角，以及 Filled、Tonal、Elevated、Outlined 变体。
最后更新 2026-08-01
不是一个按钮切成两块
SplitButton 接收两个独立 composable：leading 执行主动作，trailing 执行与它相关的次动作，常见情况是打开选项菜单。
SplitButton(
leadingButton = {
SplitButtonDefaults.LeadingButton(onClick = { save() }) {
Text("保存")
}
},
trailingButton = {
SplitButtonDefaults.TrailingButton(
checked = expanded,
onCheckedChange = { expanded = it },
) { Icon(Icons.Default.ArrowDropDown, "更多保存选项") }
},
)为什么必须用配套 Defaults
源码对 x-small 到 x-large 分别定义内侧角、按压角、padding 和 trailing icon size。自行拼两个 Button 很容易出现高度不一致、阴影重叠或触摸区域不足。
SplitButtonLayout 已被重命名并 deprecated，新代码使用 SplitButton。
变体
Defaults 提供 Filled、Tonal、Elevated、Outlined 的 leading/trailing 构造器。选择原则与普通按钮一致；Elevated 只应在确实需要从复杂背景上分离时使用。
复制即用
保存 + 更多选项的分割按钮：
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDropDown
import androidx.compose.material3.Icon
import androidx.compose.material3.SplitButton
import androidx.compose.material3.SplitButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
@Composable
fun SaveSplitButton(onSave: () -> Unit) {
var expanded by remember { mutableStateOf(false) }
SplitButton(
leadingButton = {
SplitButtonDefaults.LeadingButton(onClick = onSave) {
Text("保存")
}
},
trailingButton = {
SplitButtonDefaults.TrailingButton(
checked = expanded,
onCheckedChange = { expanded = it },
) {
Icon(Icons.Default.ArrowDropDown, "更多保存选项")
}
},
)
}变体：SplitButtonDefaults 提供 Filled、Tonal、Elevated、Outlined 的 leading/trailing 构造器。