Element 系列组件之 EColorPicker 颜色选择器组件
老孟Flutter
共 1592字，需浏览 4分钟
·
2022-01-03 00:29
介绍
「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,
)
评论