「EColorPicker」 组件是 「Flutter Element」 组件系列中的颜色选择器组件。
在 「pubspec.yaml」 中依赖
element_ui: ^lastversion
最新的版本到pub上查看,pub地址:https://pub.dev/packages/element_ui
import
import 'package:element_ui/widgets.dart';
基础用法:
Container(
height: 250,
width: 300,
color: Colors.white,
child: EColorPicker(),
)
颜色选择区域的大小是可伸缩的,其他区域固定。
「color」:设置初始颜色。
EColorPicker(
color: Color(0xFF00FF00),
)
「showAlpha」:显示透明度设置。
EColorPicker(
color: Color(0xFF00FF00),
showAlpha: true,
)
「onChange」:颜色发生变化回调,返沪当前的颜色。
EColorPicker(
color: Color(0xFF00FF00),
showAlpha: true,
onChange: (color){},
)
「showTextField」 是否显示颜色值的文本输入框,默认显示,文本输入框可以直接输入颜色的RGB值。
EColorPicker(
showTextField: false,
),
)
「showConfirmButton」: 是否显示确认按钮。
「confirmButtonTxt」:确认按钮的文本。
「onConfirm」:点击确认按钮的回调。
EColorPicker(
showConfirmButton: true,
confirmButtonTxt: 'Ok',
onConfirm: (color){},
)
「showClearButton」: 是否显示清空按钮。
「clearButtonTxt」:清空按钮的文本。
「onClear」:点击清空按钮的回调。
点击清空按钮,颜色值变为 null。
EColorPicker(
showClearButton: true,
clearButtonTxt: '清空',
onClear: (color){},
)
「predefineColors」 : 是预定义的一些颜色,可供用户直接选择。
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」
EColorPickerButton(
height: 45,
width: 45,
color: Colors.blue,
)