不使用Fragment的纯Compose方式构建偏好设置页面的最优方案是什么

完全可以不借助Fragment实现纯Compose的偏好设置页面，若你的项目已经完成Compose全栈迁移，完全不需要沿用旧的Fragment实现方案，纯Compose方案不管是开发效率还是后续可维护性都更优，核心实现逻辑如下：

核心实现思路 #

• 数据存储层使用Jetpack DataStore（Preferences版本）替代原有SharedPreferences，支持响应式读取，完美适配Compose的State更新机制
• UI层完全基于Compose组件自定义，按Material Design规范封装不同类型的偏好项组件，支持开关、列表选择、输入框等所有常见偏好类型
• 整体逻辑完全在Compose作用域内完成，不需要处理Fragment生命周期、嵌套导航等额外问题

完整实现示例 #

第一步：添加依赖 #

在模块级build.gradle中添加所需依赖：

// DataStore Preferences 存储依赖
implementation "androidx.datastore:datastore-preferences:1.0.0"
// Compose Material3 组件依赖（也可替换为Material2）
implementation "androidx.compose.material3:material3:1.2.0"
// 生命周期感知State收集依赖（可选，推荐添加）
implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.6.2"
implementation "androidx.lifecycle:lifecycle-viewmodel-compose:2.6.2"

第二步：定义全局配置 #

// 全局扩展初始化DataStore，避免重复创建实例
val Context.dataStore by preferencesDataStore(name = "app_preferences")

// 定义各个偏好配置的键
val darkModeKey = booleanPreferencesKey("dark_mode")
val notificationEnabledKey = booleanPreferencesKey("notification_enabled")
val userNameKey = stringPreferencesKey("user_name")

第三步：封装通用偏好项组件 #

// 开关类型偏好项组件
@Composable
fun SwitchPreference(
    title: String,
    description: String? = null,
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit
) {
    ListItem(
        headlineContent = { Text(title) },
        supportingContent = description?.let { { Text(it) } },
        trailingContent = {
            Switch(
                checked = checked,
                onCheckedChange = onCheckedChange
            )
        },
        modifier = Modifier.clickable { onCheckedChange(!checked) }
    )
    HorizontalDivider()
}

// 可点击跳转/弹窗的文本偏好项
@Composable
fun TextPreference(
    title: String,
    description: String? = null,
    onClick: () -> Unit
) {
    ListItem(
        headlineContent = { Text(title) },
        supportingContent = description?.let { { Text(it) } },
        modifier = Modifier.clickable(onClick = onClick)
    )
    HorizontalDivider()
}

第四步：偏好设置页面主实现 #

@Composable
fun SettingsScreen(context: Context) {
    val lifecycleScope = rememberCoroutineScope()
    // 响应式读取偏好值，变化后自动更新UI
    val darkMode by context.dataStore.data
        .map { preferences -> preferences[darkModeKey] ?: false }
        .collectAsStateWithLifecycle(initialValue = false)
    val notificationEnabled by context.dataStore.data
        .map { preferences -> preferences[notificationEnabledKey] ?: true }
        .collectAsStateWithLifecycle(initialValue = true)

    Scaffold(topBar = { TopAppBar(title = { Text("设置") }) }) { padding ->
        Column(modifier = Modifier
            .fillMaxSize()
            .padding(padding)
        ) {
            SwitchPreference(
                title = "深色模式",
                description = "开启后应用将使用深色主题",
                checked = darkMode,
                onCheckedChange = { newValue ->
                    lifecycleScope.launch {
                        context.dataStore.edit { preferences ->
                            preferences[darkModeKey] = newValue
                        }
                    }
                }
            )
            SwitchPreference(
                title = "推送通知",
                description = "开启后将接收应用推送的消息提醒",
                checked = notificationEnabled,
                onCheckedChange = { newValue ->
                    lifecycleScope.launch {
                        context.dataStore.edit { preferences ->
                            preferences[notificationEnabledKey] = newValue
                        }
                    }
                }
            )
            TextPreference(
                title = "关于应用",
                description = "版本号 1.0.0",
                onClick = { /* 跳转关于页面逻辑 */ }
            )
        }
    }
}

方案优势对比 #

• 完全符合Compose声明式UI开发范式，不需要处理Fragment的生命周期、嵌套导航等复杂问题
• 响应式数据更新，偏好值变化后UI自动刷新，不需要手动监听SharedPreferences的变化回调
• 自定义程度更高，可根据需求任意修改偏好项的样式，不需要适配原有Preference库的定制限制
• 性能更优，避免了Fragment的创建开销，页面加载速度更快

内容的提问来源于stack exchange，提问作者Raw Hasan