Flutter颜色选择器插件hsv_color_pickers的使用

Flutter 开发中，颜色选择是一个常见的需求。hsv_color_pickers 是一个专门用于创建可定制HSV颜色选择器的插件，它允许开发者轻松地让用户通过滑块选择色相（Hue）、饱和度（Saturation）和亮度（Brightness）。本文将详细介绍如何使用这个插件，并提供完整的示例代码。

插件介绍

• 版本信息：
• 分析状态：
• 在线演示：查看演示

hsv_color_pickers 提供了多种颜色选择器组件，如Hue Picker等，它们可以灵活配置以满足不同的设计需求。

Hue Picker

使用方式

1. 使用 initialColor

HuePicker(
  initialColor: HSVColor.fromColor(Colors.green),
  onChanged: (HSVColor color) {
      // do something with color
  },
)

2. 使用 controller

// 创建控制器
_controller = HueController(HSVColor.fromColor(Colors.green));

// 在 HuePicker 中使用控制器
HuePicker(
  controller: _controller,
  onChanged: (HSVColor color) {
      // do something with color
  },
)

// 从外部设置 HuePicker 的值
_controller.value = HSVColor.fromColor(Colors.blue);

自定义样式

• 调整滑块高度

HuePicker(
  ...
  trackHeight: 50,
)

• 自定义滑块按钮形状

HuePicker(
  ...
  thumbOverlayColor: Colors.green.withOpacity(0.3),
  thumbShape: HueSliderThumbShape(
    color: Colors.black,
    strokeWidth: 8,
    filled: false,
    showBorder: true
  ),
)

其中 HueSliderThumbShape 支持以下属性：

• radius: 按钮半径
• filled: 是否填充按钮内部
• color: 主要颜色
• strokeWidth: 边框宽度（当未填充时）
• showBorder: 是否显示边框
• borderColor: 边框颜色
• borderWidth: 边框宽度

完整示例

下面是一个包含两个例子的应用程序，分别展示了如何使用 initialColor 和 controller 来控制颜色选择器的行为。

import 'package:flutter/material.dart';
import 'package:hsv_color_pickers/hsv_color_pickers.dart';

void main() {
  runApp(const ExampleApp());
}

class ExampleApp extends StatelessWidget {
  const ExampleApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
          appBar: AppBar(
            title: const Text("HSV Colors Pickers"),
          ),
          body: const Column(
            children: [
              Expanded(
                child: InitialColorExample(),
              ),
              Divider(thickness: 2),
              Expanded(
                child: ControllerExample(),
              ),
            ],
          )),
    );
  }
}

class InitialColorExample extends StatefulWidget {
  const InitialColorExample({Key? key}) : super(key: key);

  @override
  State<InitialColorExample> createState() => _InitialColorExampleState();
}

class _InitialColorExampleState extends State<InitialColorExample> {
  Color _color = Colors.green;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Text(
          "Example using initialColor",
          style: Theme.of(context).textTheme.titleLarge,
        ),
        CircleAvatar(
          radius: 32,
          backgroundColor: _color,
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: HuePicker(
            initialColor: HSVColor.fromColor(_color),
            onChanged: (color) {
              setState(() {
                _color = color.toColor();
              });
            },
            thumbShape: const HueSliderThumbShape(
              color: Colors.white,
              borderColor: Colors.black,
              filled: false,
              showBorder: true,
            ),
          ),
        ),
      ],
    );
  }
}

class ControllerExample extends StatefulWidget {
  const ControllerExample({Key? key}) : super(key: key);

  @override
  State<ControllerExample> createState() => _ControllerExampleState();
}

class _ControllerExampleState extends State<ControllerExample> {
  late HueController _controller;

  @override
  void initState() {
    super.initState();
    _controller = HueController(HSVColor.fromColor(Colors.green));
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Text(
          "Example using controller",
          style: Theme.of(context).textTheme.titleLarge,
        ),
        CircleAvatar(
          radius: 32,
          backgroundColor: _controller.value.toColor(),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: HuePicker(
            controller: _controller,
            onChanged: (color) {
              setState(() {});
            },
            thumbShape: const HueSliderThumbShape(
              color: Colors.white,
              borderColor: Colors.black,
              filled: false,
              showBorder: true,
            ),
          ),
        ),
        ElevatedButton(
            onPressed: () {
              _controller.value = HSVColor.fromColor(Colors.blue);
            },
            child: const Text("Reset to blue from outside"))
      ],
    );
  }
}

以上代码展示了如何在Flutter应用中集成 hsv_color_pickers 插件来实现颜色选择功能。你可以根据实际需要进一步调整和扩展这些例子。希望这篇文章对你有所帮助！如果你有任何问题或建议，请随时提出。