ColorPicker

ColorPicker 是 Miuix 中的颜色选择组件，允许用户通过调整色相、饱和度、明度和透明度来选择颜色。组件提供了直观的滑块界面，支持触觉反馈和实时颜色预览。

引入

import top.yukonga.miuix.kmp.basic.ColorPicker

基本用法

ColorPicker 组件可以让用户选择自定义颜色：

var selectedColor by remember { mutableStateOf(Color.Red) }

ColorPicker(
    initialColor = selectedColor,
    onColorChanged = { newColor ->
        selectedColor = newColor
    }
)

组件变体

不带颜色预览

默认情况下，ColorPicker 会显示当前选择的颜色预览，如果不想显示默认的颜色预览，可以将 showPreview 设置为 false：

ColorPicker(
    initialColor = Color.Blue,
    onColorChanged = { /* 处理颜色变化 */ },
    showPreview = false
)

触觉反馈

ColorPicker 支持触觉反馈，可以通过 hapticEffect 参数自定义反馈效果，详见 SliderHapticEffect。

ColorPicker(
    initialColor = Color.Green,
    onColorChanged = { /* 处理颜色变化 */ },
    hapticEffect = SliderHapticEffect.Step
)

属性

ColorPicker 属性

属性名	类型	说明	默认值	是否必须
initialColor	Color	初始颜色	-	是
onColorChanged	(Color) -> Unit	颜色变化时的回调函数	-	是
showPreview	Boolean	是否显示颜色预览	true	否
hapticEffect	SliderDefaults.SliderHapticEffect	滑块的触觉反馈效果	SliderDefaults.DefaultHapticEffect	否
modifier	Modifier	应用于组件的修饰符	Modifier	否
colorSpace	ColorSpace	选择使用的颜色空间	ColorSpace.HSV	否

单独使用滑块组件

ColorPicker 提供了四种不同的滑块组件，可以单独使用：

HueSlider - 色相滑块

var hue by remember { mutableStateOf(0f) }

HueSlider(
    currentHue = hue,
    onHueChanged = { newHue -> 
        hue = newHue * 360f 
    }
)

SaturationSlider - 饱和度滑块

var saturation by remember { mutableStateOf(0.5f) }

SaturationSlider(
    currentHue = 180f, // 当前色相
    currentSaturation = saturation,
    onSaturationChanged = { newSaturation ->
        saturation = newSaturation
    }
)

ValueSlider - 明度滑块

var value by remember { mutableStateOf(0.5f) }

ValueSlider(
    currentHue = 180f, // 当前色相
    currentSaturation = 0.5f, // 当前饱和度
    currentValue = value,
    onValueChanged = { newValue ->
        value = newValue
    }
)

AlphaSlider - 透明度滑块

var alpha by remember { mutableStateOf(1f) }

AlphaSlider(
    currentHue = 180f, // 当前色相
    currentSaturation = 0.5f, // 当前饱和度
    currentValue = 0.5f, // 当前明度
    currentAlpha = alpha,
    onAlphaChanged = { newAlpha ->
        alpha = newAlpha
    }
)

进阶用法

颜色空间

ColorPicker 通过 colorSpace 支持多种颜色空间：

• ColorSpace.HSV — 经典 HSV 滑条（色相、饱和度、明度、透明度）。
• ColorSpace.OKHSV — 基于 OkLCH 的感知 HSV 变体，色相步进更均匀。
• ColorSpace.OKLAB — OkLab 滑条（亮度 L、a、b、透明度），更符合人眼的感知。
• ColorSpace.OKLCH — OkLCH 滑条（亮度 L、色度 C、色相 H、透明度）。为保证 sRGB 色域，色度会在常见范围内进行约束。

示例：使用 OKLCH 颜色空间

ColorPicker(
    initialColor = Color(0xFF4CAF50),
    onColorChanged = { /* 处理颜色变化 */ },
    colorSpace = ColorSpace.OKLCH
)

在表单中使用

结合其他输入控件，创建颜色选择表单：

var currentColor by remember { mutableStateOf(Color.Red) }
var hexValue by remember(currentColor) {
    mutableStateOf(
            "#${(currentColor.red * 255).toInt().toString(16).padStart(2, '0').uppercase()}" +
                (currentColor.green * 255).toInt().toString(16).padStart(2, '0').uppercase() +
                (currentColor.blue * 255).toInt().toString(16).padStart(2, '0').uppercase()
    )
}

Surface {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        Text(
            text = "选择颜色",
            style = MiuixTheme.textStyles.title2
        )
        Spacer(modifier = Modifier.height(16.dp))
        ColorPicker(
            initialColor = currentColor,
            onColorChanged = {
                currentColor = it
                hexValue = "#${(it.red * 255).toInt().toString(16).padStart(2, '0').uppercase()}" +
                        (it.green * 255).toInt().toString(16).padStart(2, '0').uppercase() +
                        (it.blue * 255).toInt().toString(16).padStart(2, '0').uppercase()
            }
        )
        Spacer(modifier = Modifier.height(16.dp))
        TextField(
            value = hexValue,
            onValueChange = { /* 可以添加十六进制值解析逻辑 */ },
            label = "十六进制值",
            modifier = Modifier.fillMaxWidth()
        )
    }
}

与对话框结合使用

在对话框中使用 ColorPicker 创建颜色选择器：

var showColorDialog = remember { mutableStateOf(false) }
var selectedColor by remember { mutableStateOf(Color.Red) }

Scaffold { 
    TextButton(
        text = "选择颜色",
        onClick = { showColorDialog.value = true }
    )
    SuperDialog(
        title = "选择颜色",
        show = showColorDialog,
        onDismissRequest = { showColorDialog.value = false } // 关闭对话框
    ) {
        Column {
            ColorPicker(
                initialColor = selectedColor,
                onColorChanged = { selectedColor = it }
            )
            Spacer(modifier = Modifier.height(16.dp))
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.spacedBy(8.dp),
            ) {
                TextButton(
                    modifier = Modifier.weight(1f),
                    text = "取消",
                    onClick = { showColorDialog.value = false } // 关闭对话框
                )
                TextButton(
                    modifier = Modifier.weight(1f),
                    text = "确认",
                    colors = ButtonDefaults.textButtonColorsPrimary(), // 使用主题颜色
                    onClick = {
                        showColorDialog.value = false // 关闭对话框
                        // 处理确认逻辑
                        // 例如：保存选中的颜色
                    })
            }
        }
    }
}