Flutter 3.29.0 版本对颜色Color做出的改动 Display P3你了解吗

Color的更改

  • 添加一个枚举字段,指定其ColorSpace。
  • 添加API以使用规范化的浮点颜色组件。
  • 删除使用可能导致数据丢失的8位无符号整数颜色组件的API。

ColorSpace 的更改

  • 添加displayP3属性。

Display P3是苹果为平衡广色域与消费级显示需求优化的色彩标准,通过扩展色域和兼容性设计,提升了视觉体验,尤其适合创意工作者和高质量媒体消费。

在支持广色域的屏幕上(如 iPhone、iPad Pro),使用 ColorSpace 显示更丰富的颜色:

dart 复制代码
// 使用 Display P3 颜色空间
const p3Red = Color(0xFFFF0000, colorSpace: ColorSpace.displayP3);
Container(
  color: p3Red,
  width: 100,
  height: 100,
);

加载图片时指定颜色空间,确保色彩正确显示:

dart 复制代码
Image.asset(
  'assets/photo_p3.jpg',
  colorSpace: ColorSpace.displayP3, // 明确指定 P3 色域
);

在不同颜色空间之间转换颜色值(需结合 Color 类或第三方库):

dart 复制代码
// 假设将 sRGB 颜色转换为 P3 颜色空间
Color sRGBColor = Colors.red;
Color p3Color = sRGBColor.toColorSpace(ColorSpace.displayP3);
Color.fromARGB 修改为 Color.from 方式来调用 ,
dart 复制代码
// 之前:从四个整数的低8位构造sRGB颜色。
final magenta = Color.fromARGB(0xff, 0xff, 0x0, 0xff);

// 之后 使用归一化浮点分量构造颜色。
final magenta = Color.from(alpha: 1.0, red: 1.0, green: 0.0, blue: 1.0);
Implementors of Color 的改动

Color中添加了新方法,因此任何实现Color的类都会中断,必须实现新方法,例如Color.a和Color.b。

dart 复制代码
class Foo implements Color {
  int _red;

  @override
  double get r => _red / 255.0;
}
Opacity 透明度
dart 复制代码
// 之前创建一个颜色的半透明度
final x = color.withOpacity(0.5);

// After: Create a new color with the specified alpha channel value,
// accounting for the current or specified color space.
final x = color.withValues(alpha: 0.5);
Color 中 ColorSpace

使用颜色并对颜色分量执行任何类型计算的客户端现在应该在执行计算之前首先检查颜色空间分量。

现在可以使用新的Color.withValues方法来执行颜色空间转换。

dart 复制代码
// Before
double redRatio(Color x, Color y) => x.red / y.red;

// After
double redRatio(Color x, Color y) {
  final xPrime = x.withValues(colorSpace: ColorSpace.extendedSRGB);
  final yPrime = y.withValues(colorSpace: ColorSpace.extendedSRGB);
  return xPrime.r / yPrime.r;
}
相关推荐
微祎_4 小时前
Flutter for OpenHarmony:构建一个 Flutter 镜像绘图游戏,对称性认知、空间推理与生成式交互设计
flutter·游戏·交互
消失的旧时光-19435 小时前
从 Kotlin 到 Dart:为什么 sealed 是处理「多种返回结果」的最佳方式?
android·开发语言·flutter·架构·kotlin·sealed
子春一6 小时前
Flutter for OpenHarmony:色彩捕手:基于 CIELAB 色差模型与人眼感知的高保真色彩匹配游戏架构解析
flutter·游戏·架构
ZH15455891316 小时前
Flutter for OpenHarmony Python学习助手实战:数据库操作与管理的实现
python·学习·flutter
Lionel6896 小时前
Flutter 鸿蒙:获取真实轮播图API数据
flutter
千逐687 小时前
《基于 Flutter for OpenHarmony 的沉浸式天气可视化系统设计与实现》
flutter
一只大侠的侠7 小时前
Flutter开源鸿蒙跨平台训练营 Day8获取轮播图网络数据并实现展示
flutter·开源·harmonyos
sugar_hang7 小时前
Flutter 中的 TCP
flutter
子春一9 小时前
Flutter for OpenHarmony:形状拼图:基于路径几何与空间吸附的交互式拼图系统架构解析
flutter·系统架构
ujainu18 小时前
Flutter + OpenHarmony 游戏开发进阶:用户输入响应——GestureDetector 实现点击发射
flutter·游戏·openharmony