Flutter颜色处理插件tinycolor的使用
Flutter颜色处理插件tinycolor的使用
tinycolor
TinyColor 是一个用于 Flutter 颜色操作和转换的小型库。
该库是 tinycolor2 的移植版本，由 Brian Grinstead 开发。
Getting Started（开始使用）
tinycolor 接收一个 Color 对象作为参数。
import 'package:tinycolor/tinycolor.dart';
final TinyColor = TinyColor(Colors.green);现在你还可以通过扩展 Color 类来使用所有相同的功能，但更简单。要启用扩展功能，请确保在 pubspec.yaml 中更新 SDK 版本，例如：
sdk: ">=2.6.0 <3.0.0"从十六进制字符串创建颜色
该包使用 Pigment 库将字符串转换为 Color。
TinyColor.fromString('#FE5567');从 RGB 整数值创建颜色
TinyColor.fromRGB(r: 255, g: 255, b: 255);从 HSL 颜色创建
HslColor color = HslColor(h: 250, s: 57, l: 30);
TinyColor.fromHSL(color);从 HSV 颜色创建
HSVColor color = HSVColor(h: 250, s: 57, v: 30);
TinyColor.fromHSV(color);从 Flutter 的 Color 创建
TinyColor tinyColor = Colors.blue.toTinyColor();属性
color
返回操作后的 Flutter Color。
final Color color = TinyColor(Colors.white).color;方法
getBrightness
返回颜色的感知亮度，范围为 0-255，如 Web 内容无障碍指南 (版本 1.0) 所定义。
TinyColor.fromString("#ffffff").getBrightness(); // 255
TinyColor.fromString("#000000").getBrightness(); // 0
// 或使用 Color 扩展
Colors.grey.brightness; // 127isLight
返回一个布尔值，指示颜色的感知亮度是否较亮。
TinyColor.fromString("#ffffff").isLight(); // true
TinyColor.fromString("#000000").isLight(); // false
// 或使用 Color 扩展
Colors.white.isLight; // trueisDark
返回一个布尔值，指示颜色的感知亮度是否较暗。
TinyColor.fromString("#ffffff").isDark(); // false
TinyColor.fromString("#000000").isDark(); // true
// 或使用 Color 扩展
Colors.white.isDark; // falsegetLuminance
返回颜色的感知亮度，等同于 Flutter 的 Color.computeLuminance。
TinyColor.fromString("#ffffff").getLuminance();
// 或使用 Color 扩展
Colors.white.luminance;setAlpha
设置当前颜色的透明度值。
final color = TinyColor(Colors.red).setAlpha(10);setOpacity
设置当前颜色的不透明度值。
final color = TinyColor(Colors.red).setOpacity(0.5);颜色修改
这些方法会操作当前颜色并返回结果以支持链式调用。例如：
TinyColor(Colors.red).lighten().desaturate().color;
// 或使用 Color 扩展
Colors.red.lighten().desaturate();lighten
将颜色变亮给定的百分比，范围为 0-100。提供 100 将始终返回白色。
TinyColor(Colors.red).lighten().color;
TinyColor(Colors.red).lighten(100).color;
// 或使用 Color 扩展
Colors.red.lighten(50);brighten
将颜色变亮给定的百分比，范围为 0-100。
TinyColor(Colors.black).brighten().color;
// 或使用 Color 扩展
Colors.black.brighten(50);darken
将颜色变暗给定的百分比，范围为 0-100。提供 100 将始终返回黑色。
TinyColor(Colors.red).darken().color;
TinyColor(Colors.red).darken(100).color;
// 或使用 Color 扩展
Colors.red.darken(50);tint
将颜色与纯白色混合，范围为 0-100。提供 0 不做任何改变，提供 100 将始终返回白色。
TinyColor(Color.red).tint().color;
TinyColor(Color.red).tint(100).color;
// 或使用 Color 扩展
Colors.red.tint(50);shade
将颜色与纯黑色混合，范围为 0-100。提供 0 不做任何改变，提供 100 将始终返回黑色。
TinyColor(Colors.red).shade().color;
TinyColor(Colors.red).shade(100).color;
// 或使用 Color 扩展
Colors.red.shade(50);desaturate
将颜色去饱和度给定的百分比，范围为 0-100。提供 100 等同于调用 greyscale。
TinyColor(Colors.red).desaturate().color;
TinyColor(Colors.red).desaturate(100).color;
// 或使用 Color 扩展
Colors.red.desaturate(50);saturate
将颜色饱和度增加给定的百分比，范围为 0-100。
TinyColor(Colors.red).saturate().color;
// 或使用 Color 扩展
Colors.red.saturate(50);greyscale
完全去饱和度，将颜色变为灰度。等同于调用 desaturate(100)。
TinyColor(Colors.red).greyscale().color;
// 或使用 Color 扩展
Colors.red.greyscale;spin
旋转颜色的色调，范围为 -360 到 360。调用 0, 360 或 -360 将不会改变颜色（因为它将色调重置为原来的值）。
TinyColor(Colors.red).spin(180).color;
// 或使用 Color 扩展
Colors.red.spin(180);
// spin(0) 和 spin(360) 不会改变颜色
TinyColor(Colors.red).spin(0).color;
TinyColor(Colors.red).spin(360).color;compliment
返回互补色。
TinyColor(Colors.red).compliment().color;
// 或使用 Color 扩展
Colors.red.compliment;mix
将颜色与另一个颜色混合，指定混合比例，范围为 0-100，默认为 50。
TinyColor(Colors.red).mix(TinyColor(Colors.yellow), 20).color;
// 或使用 Color 扩展
Colors.red.mix(Colors.yellow, 20);常见操作
clone
实例化一个新的 TinyColor 对象，具有相同的颜色。对新对象的更改不会影响旧对象。
final color1 = new TinyColor(Colors.red);
final color2 = color1.clone();
color2.setAlpha(20);更多关于Flutter颜色处理插件tinycolor的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter颜色处理插件tinycolor的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
tinycolor 是一个非常流行的颜色处理库，它可以帮助你在 Flutter 中轻松处理颜色。虽然 tinycolor 最初是为 JavaScript 设计的，但在 Flutter 中也有类似的实现。你可以在 Flutter 中使用 tinycolor 来处理颜色转换、颜色操作等。
安装 tinycolor 插件
首先，你需要在 pubspec.yaml 文件中添加 tinycolor 插件的依赖：
dependencies:
flutter:
sdk: flutter
tinycolor: ^1.0.0然后运行 flutter pub get 来安装依赖。
使用 tinycolor 插件
tinycolor 提供了丰富的 API 来处理颜色。以下是一些常见的用法示例：
1. 创建颜色对象
你可以使用 TinyColor 类来创建一个颜色对象：
import 'package:tinycolor/tinycolor.dart';
void main() {
var color = TinyColor(Color(0xFF00FF00)); // 使用 Flutter 的 Color 对象
var color2 = TinyColor.fromString('#FF0000'); // 使用十六进制字符串
var color3 = TinyColor.fromRGB(255, 0, 0); // 使用 RGB 值
}2. 颜色转换
你可以将颜色转换为不同的格式：
var color = TinyColor.fromString('#FF0000');
print(color.toHex()); // 输出: #ff0000
print(color.toRgb()); // 输出: {"r":255,"g":0,"b":0}
print(color.toHsl()); // 输出: {"h":0,"s":1,"l":0.5}
print(color.toHsv()); // 输出: {"h":0,"s":1,"v":1}3. 颜色操作
你可以对颜色进行各种操作，比如调整亮度、饱和度、透明度等：
var color = TinyColor.fromString('#FF0000');
var lightenColor = color.lighten(10); // 亮度增加10%
var darkenColor = color.darken(10); // 亮度减少10%
var saturateColor = color.saturate(10); // 饱和度增加10%
var desaturateColor = color.desaturate(10); // 饱和度减少10%
var spinColor = color.spin(90); // 色相旋转90度
var opacityColor = color.withOpacity(0.5); // 设置透明度为50%4. 颜色比较
你可以比较两个颜色是否相同：
var color1 = TinyColor.fromString('#FF0000');
var color2 = TinyColor.fromString('#FF0000');
print(color1 == color2); // 输出: true5. 获取颜色的亮度
你可以获取颜色的亮度值：
var color = TinyColor.fromString('#FF0000');
print(color.getBrightness()); // 输出: 0.299