Element 系列组件之 EColorPicker 颜色选择器组件

介绍

「EColorPicker」 组件是 「Flutter Element」 组件系列中的颜色选择器组件。

引入

在 「pubspec.yaml」 中依赖

代码语言：javascript复制

element_ui: ^lastversion

最新的版本到pub上查看，pub地址：https://pub.dev/packages/element_ui

import

代码语言：javascript复制

import 'package:element_ui/widgets.dart';

用法

基础用法：

代码语言：javascript复制

Container(
  height: 250,
  width: 300,
  color: Colors.white,
  child: EColorPicker(),
)

颜色选择区域的大小是可伸缩的，其他区域固定。

「color」:设置初始颜色。

代码语言：javascript复制

EColorPicker(
  color: Color(0xFF00FF00),
)

「showAlpha」：显示透明度设置。

代码语言：javascript复制

EColorPicker(
  color: Color(0xFF00FF00),
  showAlpha: true,
)

「onChange」：颜色发生变化回调，返沪当前的颜色。

代码语言：javascript复制

EColorPicker(
  color: Color(0xFF00FF00),
  showAlpha: true,
  onChange: (color){},
)

「showTextField」 是否显示颜色值的文本输入框，默认显示，文本输入框可以直接输入颜色的RGB值。

代码语言：javascript复制

EColorPicker(
    showTextField: false,
  ),
)

「showConfirmButton」: 是否显示确认按钮。

「confirmButtonTxt」：确认按钮的文本。

「onConfirm」：点击确认按钮的回调。

代码语言：javascript复制

EColorPicker(
  showConfirmButton: true,
  confirmButtonTxt: 'Ok',
  onConfirm: (color){},
)

「showClearButton」: 是否显示清空按钮。

「clearButtonTxt」：清空按钮的文本。

「onClear」：点击清空按钮的回调。

点击清空按钮，颜色值变为 null。

代码语言：javascript复制

EColorPicker(
  showClearButton: true,
  clearButtonTxt: '清空',
  onClear: (color){},
)

「predefineColors」 : 是预定义的一些颜色，可供用户直接选择。

代码语言：javascript复制

EColorPicker(
  predefineColors: [
    Color(0xFFff4500),
    Color(0xFFff8c00),
    Color(0xFFffd700),
    Color(0xFF90ee90),
    Color(0xFF00ced1),
    Color(0xFF1e90ff),
    Color(0xFFc71585),
    Color(0xFFc71585),
    Color(0x88c71585),
    Color(0x11c71585),
    Color(0xFF00ced1),
    Color(0xFF1e90ff),
  ],
)

「EColorPickerButton」 是颜色选择器按钮，点击后弹出「EColorPicker」

代码语言：javascript复制

EColorPickerButton(
 height: 45,
 width: 45,
 color: Colors.blue,
)

flutter element import null yaml

0 人点赞