compose列表选择

代码

@Composable
fun<T> SelectBox(
    items: List<T>, // 所有元素
    modifier: Modifier = Modifier, // 外观
    initialIndex: Int = -1, // 默认项，-1表示空
    onItemSelect: (T) -> Unit = {}, // 选择回调
    onItemIndexSelect: (Int, T) -> Unit = {i1,i2->}, // 带索引的选择回调
    label: (T) -> String = {it.toString()} // 每一项元素的标签
) {
    var expanded by remember { mutableStateOf(false) }
    var selected by remember { mutableStateOf( if(initialIndex in items.indices) items[initialIndex] else null as T?) }
    Surface(
        color = MaterialTheme.colorScheme.surface,
        shape = RoundedCornerShape(16.dp),
        modifier = modifier,
        border = BorderStroke(1.dp, MaterialTheme.colorScheme.secondaryContainer),
    ) {
        Box(
            modifier = Modifier.fillMaxWidth().clickable {
                expanded = !expanded
            }.padding(horizontal = 8.dp, vertical = 2.dp),
            contentAlignment = Alignment.Center
        ) {
            Text(if(selected == null) "请选择" else label(selected!!), style = MaterialTheme.typography.bodySmall)
            DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
                items.forEachIndexed { index, item ->
                    DropdownMenuItem(
                        text = {
                            Text(label(item), style = MaterialTheme.typography.bodySmall)
                        },
                        onClick = {
                            selected = item
                            onItemSelect(item)
                            onItemIndexSelect(index, item)
                            expanded = false
                        }
                    )
                }
            }
        }
    }
}     

使用

val codecs by mutableStateOf(listOf("H264", "H265", "VP9", "AV1"))
var t_codec by remember { mutableStateOf("H265") }
Row(verticalAlignment = Alignment.CenterVertically) {
    Text("编码", modifier = Modifier.width(100.dp))
    Spacer(Modifier.width(4.dp))
    SelectBox(codecs, onItemSelect = {
        t_codec = it
    }, initialIndex = 1)
}