Compose Color Picker 使用教程

Compose Color Picker 使用教程

compose-color-picker Jetpack Compose Android Color Picker 🎨 项目地址: https://gitcode.com/gh_mirrors/co/compose-color-picker

1. 项目介绍

Compose Color Picker 是一个基于 Jetpack Compose 的 Android 颜色选择器组件。该项目由 GoDaddy 开发并开源，提供了两种不同类型的颜色选择器：

• ClassicColorPicker: 经典的方形颜色选择器，支持透明度通道。
• HarmonyColorPicker: 圆形颜色选择器，支持多种颜色和谐模式（如互补色、三色、类似色等）。

该项目的目标是为开发者提供一个简单易用的颜色选择器组件，适用于各种 Android 应用场景。

2. 项目快速启动

2.1 添加依赖

首先，在你的 build.gradle 文件中添加以下依赖：

implementation 'com.godaddy.android.colorpicker:compose-color-picker:<latest-version>'

如果你需要 Android 的 ColorInt 扩展，可以添加以下依赖：

implementation 'com.godaddy.android.colorpicker:compose-color-picker-android:<latest-version>'

2.2 使用 ClassicColorPicker

在你的 Compose 布局中添加 ClassicColorPicker：

import com.godaddy.android.colorpicker.HsvColor
import com.godaddy.android.colorpicker.ClassicColorPicker

Column {
    ClassicColorPicker(
        onColorChanged = { color: HsvColor ->
            // 处理颜色变化
        }
    )
}

2.3 使用 HarmonyColorPicker

同样，你可以在 Compose 布局中添加 HarmonyColorPicker：

import com.godaddy.android.colorpicker.HarmonyColorPicker
import com.godaddy.android.colorpicker.ColorHarmonyMode

HarmonyColorPicker(
    harmonyMode = ColorHarmonyMode.SHADES,
    modifier = Modifier.size(400.dp),
    onColorChanged = { color ->
        // 处理颜色变化
    }
)

3. 应用案例和最佳实践

3.1 自定义颜色选择器

你可以通过修改 Modifier 来调整颜色选择器的大小：

ClassicColorPicker(
    modifier = Modifier.height(200.dp),
    onColorChanged = { color: HsvColor ->
        // 处理颜色变化
    }
)

3.2 隐藏透明度条

如果你不需要透明度条，可以通过设置 showAlphaBar 参数来隐藏它：

ClassicColorPicker(
    showAlphaBar = false,
    onColorChanged = { color: HsvColor ->
        // 处理颜色变化
    }
)

4. 典型生态项目

4.1 Jetpack Compose

Compose Color Picker 是基于 Jetpack Compose 开发的，因此它与 Jetpack Compose 生态系统完美兼容。你可以将其集成到任何使用 Jetpack Compose 构建的 Android 应用中。

4.2 Kotlin Multiplatform

虽然 Compose Color Picker 主要针对 Android 平台，但它也可以与其他 Kotlin Multiplatform 项目结合使用，以实现跨平台颜色选择功能。

4.3 其他颜色选择器库

如果你需要更多的颜色选择器功能，可以考虑以下项目：

• skydoves/colorpicker-compose: 一个 Kotlin Multiplatform 颜色选择器库，支持从图像中选择颜色。
• V-Abhilash-1999/ComposeColorPicker: 另一个基于 Jetpack Compose 的颜色选择器项目，提供了不同的颜色选择器实现。

通过这些项目，你可以进一步扩展和定制你的颜色选择器功能。

compose-color-picker Jetpack Compose Android Color Picker 🎨 项目地址: https://gitcode.com/gh_mirrors/co/compose-color-picker