跳转到内容

SwitchLoadingPreference

SwitchLoadingPreference 是带加载态的开关偏好设置行,对应 ColorOS 的 COUISwitchLoadingPreference。外观与 SwitchPreference 一致,但当 isLoadingtrue 时,开关滑块上会显示 COUI 加载转圈动画,且整行与开关都无法被切换。适用于异步生效的设置项(例如切换网络功能)。

引入

kotlin
import io.github.suqi8.coui.kmp.preference.SwitchLoadingPreference

基本用法

典型流程:用户点击该行,onCheckedChange 触发,调用方打开加载态并执行异步任务,完成后更新 checked 并关闭加载态。

kotlin
var checked by remember { mutableStateOf(false) }
var target by remember { mutableStateOf(false) }
var isLoading by remember { mutableStateOf(false) }

LaunchedEffect(isLoading) {
    if (isLoading) {
        delay(1500) // 模拟异步任务
        checked = target
        isLoading = false
    }
}

SwitchLoadingPreference(
    checked = checked,
    onCheckedChange = {
        target = it
        isLoading = true
    },
    title = "异步开关",
    summary = "延迟一段时间后应用更改",
    isLoading = isLoading
)

组件状态

加载状态

加载中时,点击整行和开关都会被忽略(COUISwitch 在加载样式下会吞掉触摸事件):

kotlin
SwitchLoadingPreference(
    checked = true,
    onCheckedChange = {},
    title = "加载中的开关",
    isLoading = true
)

禁用状态

kotlin
SwitchLoadingPreference(
    checked = true,
    onCheckedChange = {},
    title = "禁用开关",
    enabled = false
)

属性

SwitchLoadingPreference 属性

属性名类型说明默认值是否必须
checkedBoolean开关的选中状态-
onCheckedChange(Boolean) -> Unit开关状态变化时的回调(加载中不触发)-
titleString设置项标题-
modifierModifier应用于组件的修饰符Modifier
isLoadingBoolean是否显示加载转圈;加载中整行不可切换false
titleColorBasicComponentColors标题文本的颜色配置BasicComponentDefaults.titleColor()
summaryString?设置项摘要null
summaryColorBasicComponentColors摘要文本的颜色配置BasicComponentDefaults.summaryColor()
startAction@Composable (() -> Unit)?左侧显示的自定义内容null
endActions@Composable RowScope.() -> Unit右侧显示的自定义内容(开关前){}
bottomAction@Composable (() -> Unit)?底部显示的自定义内容null
switchColorsSwitchColors开关控件的颜色配置SwitchDefaults.switchColors()
insideMarginPaddingValues组件内部内容的边距BasicComponentDefaults.InsideMargin
cardListPositionCardListPosition该行在卡片组中的位置,圆角外边缘会获得额外内边距CardListPosition.None
holdDownStateBoolean组件是否处于按下状态false
enabledBoolean组件是否可交互true

进阶用法

配合 ViewModel 的异步切换

kotlin
SwitchLoadingPreference(
    checked = uiState.wifiEnabled,
    onCheckedChange = { viewModel.setWifiEnabled(it) }, // 执行期间置位 uiState.isApplying
    title = "WiFi",
    summary = "打开以连接到无线网络",
    isLoading = uiState.isApplying
)

带右侧内容

kotlin
SwitchLoadingPreference(
    checked = checked,
    onCheckedChange = { /* 开始异步任务 */ },
    title = "同步",
    isLoading = isLoading,
    endActions = {
        Text(
            text = if (isLoading) "应用中…" else "",
            color = COUITheme.colorScheme.onSurfaceVariantActions,
            modifier = Modifier.padding(end = 6.dp)
        )
    }
)

变更日志

基于 Apache-2.0 许可发布