M3E 设计系统
M3E 设计系统 · androidx.compose.material3
Lists：普通条目、选择模式与 SegmentedListItem1.5.0-alpha25
用 ListItem 的不同重载表达点击、子控件、单选、多选与分段容器，避免语义冲突。
最后更新 2026-08-01
catalog 覆盖的 Expressive 场景
包括标准列表、ClickableListItem、带可点击子控件、单选、多选、长按进入模式，以及对应的 SegmentedListItem。
整行点击与子控件点击
如果整行与 trailing switch 都可点击，必须避免一次手势触发两个动作，并给各自清晰语义。源码提供相应 ListItem 重载，不要简单在整个 Row 外再包 clickable。
SegmentedListItem
它用于一组视觉连接的列表项，并根据首、中、尾位置处理容器形状。展开条目还需要保存 expansion state，不能把高度动画当作数据状态。
选择模式
- 单选：一个 selected id，并使用 radio 语义。
- 多选：集合或每项 Boolean，并使用 checkbox 语义。
- 长按进入模式：模式状态与项目选择状态分开保存。
复制即用
可点击的 ListItem 与单选列表：
import androidx.compose.material3.ListItem
import androidx.compose.material3.RadioButton
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 ClickableRow() {
ListItem(
headlineContent = { Text("条目") },
supportingContent = { Text("副标题") },
onClick = { /* 整行点击 */ },
)
}
@Composable
fun SingleChoiceList(options: List<String>) {
var selectedId by remember { mutableStateOf<String?>(null) }
options.forEach { option ->
ListItem(
headlineContent = { Text(option) },
leadingContent = {
RadioButton(
selected = selectedId == option,
onClick = { selectedId = option },
)
},
onClick = { selectedId = option },
)
}
}单选用 radio 语义，多选用 checkbox 语义；整行与 trailing 控件都可点击时避免一次手势触发两个动作。