基于Jetpack Compose实现的Android Preference

Jetpack Compose实现的Android偏好Preference实现，实现了CheckBoxPreference、EditTextPreference、SingleChoicePreference、SliderPreference等常见的 Preference 类型， 代码如下：

1. 基类Preference ：
   @Composable
   fun Preference(
   title: String,
   modifier: Modifier = Modifier,
   summary: (@Composable () -> Unit)? = null,
   control: (@Composable () -> Unit)? = null,
   ) {
   Surface(modifier = modifier) {
   Row(
   modifier = Modifier.padding(16.dp),
   verticalAlignment = Alignment.CenterVertically,
   ) {
   Column(
   modifier = Modifier.weight(1f),
   verticalArrangement = Arrangement.spacedBy(2.dp),
   ) {
   Text(
   text = title,
   style = MaterialTheme.typography.bodyLarge,
   ) if (summary != null) { ProvideTextStyle( MaterialTheme.typography.bodyMedium.copy( color = MaterialTheme.colorScheme.onSurfaceVariant, ), ) { summary() } } }control?.invoke()} }
   }
2. 编辑框 Preference：
   @Composable
   fun EditTextPreference(
   value: String,
   onValueChange: (String) -> Unit,
   title: String,
   modifier: Modifier = Modifier,
   summary: String? = null,
   placeholder: String = “”,
   ) {
   var showDialog by remember { mutableStateOf(false) }
   var tempValue by remember { mutableStateOf(value) } Preference(
   title = title,
   summary = { if (summary != null) Text(summary) else Text(value) },
   modifier = modifier.clickable { showDialog = true }
   ) if (showDialog) {
   AlertDialog(
   onDismissRequest = { showDialog = false },
   title = { Text(title) },
   text = {
   OutlinedTextField(
   value = tempValue,
   onValueChange = { tempValue = it },
   placeholder = { Text(placeholder) },
   singleLine = true
   )
   },
   confirmButton = {
   TextButton(onClick = {
   onValueChange(tempValue)
   showDialog = false
   }) {
   Text(“确定”)
   }
   },
   dismissButton = {
   TextButton(onClick = { showDialog = false }) {
   Text(“取消”)
   }
   }
   )
   }
   }
3. 单选 Preference：
   @Composable
   fun SingleChoicePreference(
   selectedKey: String,
   onSelectionChanged: (String) -> Unit,
   title: String,
   entries: Map,
   modifier: Modifier = Modifier,
   summary: String? = null,
   ) {
   var showDialog by remember { mutableStateOf(false) }
   var tempSelection by remember { mutableStateOf(selectedKey) } Preference(
   title = title,
   summary = {
   if (summary != null) Text(summary)
   else Text(entries[selectedKey] ?: “”)
   },
   modifier = modifier.clickable { showDialog = true }
   ) if (showDialog) {
   AlertDialog(
   onDismissRequest = { showDialog = false },
   title = { Text(title) },
   text = {
   Column {
   entries.forEach { (key, value) ->
   Row(
   Modifier
   .fillMaxWidth()
   .selectable(
   selected = (key == tempSelection),
   onClick = { tempSelection = key }
   )
   .padding(vertical = 8.dp),
   verticalAlignment = Alignment.CenterVertically
   ) {
   RadioButton(
   selected = (key == tempSelection),
   onClick = null
   )
   Text(
   text = value,
   modifier = Modifier.padding(start = 16.dp)
   )
   }
   }
   }
   },
   confirmButton = {
   TextButton(onClick = {
   onSelectionChanged(tempSelection)
   showDialog = false
   }) {
   Text(“确定”)
   }
   },
   dismissButton = {
   TextButton(onClick = { showDialog = false }) {
   Text(“取消”)
   }
   }
   )
   }
   }
4. 滑动条 Preference：
   @Composable
   fun SliderPreference(
   value: Float,
   onValueChange: (Float) -> Unit,
   title: String,
   modifier: Modifier = Modifier,
   valueRange: ClosedFloatingPointRange = 0f..1f,
   steps: Int = 0,
   summary: (Float) -> String = { it.toString() }
   ) {
   Preference(
   title = title,
   summary = { Text(summary(value)) },
   control = {
   Slider(
   value = value,
   onValueChange = onValueChange,
   valueRange = valueRange,
   steps = steps,
   modifier = Modifier.width(150.dp)
   )
   },
   modifier = modifier
   )
   }
5. 列表 Preference：
   @Composable
   fun ListPreference(
   title: String,
   items: List,
   onItemSelected: (String) -> Unit,
   modifier: Modifier = Modifier,
   summary: String? = null
   ) {
   var expanded by remember { mutableStateOf(false) } Preference(
   title = title,
   summary = { if (summary != null) Text(summary) },
   modifier = modifier.clickable { expanded = true }
   ) DropdownMenu(
   expanded = expanded,
   onDismissRequest = { expanded = false }
   ) {
   items.forEach { item ->
   DropdownMenuItem(
   text = { Text(item) },
   onClick = {
   onItemSelected(item)
   expanded = false
   }
   )
   }
   }
   }
6. CheckBoxPreference实现代码：
   @Composable
   fun CheckboxPreference(
   checked: Boolean,
   onCheckClicked: () -> Unit,
   title: String,
   modifier: Modifier = Modifier,
   summaryOff: String? = null,
   summaryOn: String? = null,
   ) {
   Preference(
   title = title,
   summary = {
   if (summaryOff != null && summaryOn != null) {
   AnimatedContent(checked) { target ->
   Text(text = if (target) summaryOn else summaryOff)
   }
   } else if (summaryOff != null) {
   Text(text = summaryOff)
   }
   },
   control = {
   Switch(
   checked = checked,
   onCheckedChange = { onCheckClicked() },
   )
   },
   modifier = modifier,
   )
   }
   这些实现都基于您提供的 Preference 基础组件，并根据不同类型的 Preference 需求进行了扩展。您可以根据实际需要进一步调整和优化这些组件。

使用这些组件时，您可以像这样在您的设置界面中组合它们：

@Composable
fun SettingsScreen() {
Column {
CheckboxPreference(
checked = true,
onCheckClicked = { /* 处理复选框点击 */ },
title = “启用通知”,
summaryOn = “通知已启用”,
summaryOff = “通知已禁用”
)

    EditTextPreference(
        value = "用户名",
        onValueChange = { /* 处理用户名更改 */ },
        title = "设置用户名",
        summary = "点击修改用户名"
    )

    SingleChoicePreference(
        selectedKey = "dark",
        onSelectionChanged = { /* 处理主题更改 */ },
        title = "选择主题",
        entries = mapOf("light" to "浅色", "dark" to "深色", "system" to "跟随系统"),
        summary = "选择应用主题"
    )

    SliderPreference(
        value = 0.5f,
        onValueChange = { /* 处理音量更改 */ },
        title = "音量",
        summary = { "当前音量: ${(it * 100).toInt()}%" }
    )

    ListPreference(
        title = "选择语言",
        items = listOf("简体中文", "English", "日本語"),
        onItemSelected = { /* 处理语言选择 */ },
        summary = "选择应用界面语言"
    )
}

}
这样，您就可以创建一个功能丰富的设置界面，包含各种类型的 Preference。