M3E 设计系统
M3E 设计系统 · androidx.compose.material3
Chips：选中状态的角形变1.5.0-alpha25
为 FilterChip、ElevatedFilterChip 和 InputChip 启用状态形状，并正确管理 selected。
最后更新 2026-08-01
哪些 Chip 有 Expressive 示例
catalog 把以下三个示例标成 Expressive：FilterChip、ElevatedFilterChip 与 InputChip 的 corner morphing。关键同样是使用接收 ChipShapes 的重载，而不是只传一个静态 shape。
FilterChip(
selected = selected,
onClick = { selected = !selected },
label = { Text("收藏") },
shapes = FilterChipDefaults.shapes(),
)ChipShapes 保存未选中和选中形状。形状均为 CornerBasedShape 时，组件可以插值；否则按状态直接切换。
Chip 与 ToggleButton 怎么选
- 用标签过滤内容：FilterChip。
- 表示紧凑实体，例如联系人或输入项：InputChip。
- 表达一个明确的模式开关：ToggleButton。
它们都能有 selected 状态，但语义和布局密度不同，不能只按外观选择。
复制即用
带选中形状形变的 FilterChip：
import androidx.compose.material3.FilterChip
import androidx.compose.material3.FilterChipDefaults
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 FavoriteFilterChip() {
var selected by remember { mutableStateOf(false) }
FilterChip(
selected = selected,
onClick = { selected = !selected },
label = { Text("收藏") },
shapes = FilterChipDefaults.shapes(),
)
}ElevatedFilterChip、InputChip 使用相同的 shapes 重载；选中形状同为 CornerBasedShape 时才会平滑插值。