主页 / 问题 / 1433959
Accepted
Михаил Ребров
Asked:2022-07-28 20:05:55 +0000 UTC2022-07-28 20:05:55 +0000 UTC

如何在 Flutter 中使用十六进制形式的颜色显示？

  • 772

我喜欢使用十六进制形式的颜色，使用字符串#RRGGBB（例如：）#DD23CE。
我习惯了这种形式的彩色显示，觉得很方便。
它用于 HTML/CSS、Photoshop、Figma 和其他工具。
使用它，我不必担心从原型和应用程序布局中正确转移设计。

但是，不幸的是，我没有找到以我习惯的格式使用颜色的方法。
创建颜色对象时，我只能指定一个整数，而且只有一个！
（怎么可能用一个整数来传达关于颜色的所有组成成分的信息？）

注意问题：

  • 有没有办法在 Flutter 中使用十六进制格式的颜色？
  • 如果没有，有没有办法从十六进制格式转换颜色？
flutter dart

1 个回答

  1. Best Answer

    是的，不幸的是，Flutter在创建对象时，Color您只能指定一个整数，或使用命名构造函数fromARGB并fromRGBO传递所有颜色分量（所有参数也以整数格式呈现），并且对于您的任务，正式需要将此字符串转换为单个整数。

    如何在一个整数中传达有关颜色的所有组成成分的信息？

    答：
    变量intinDart占32位

    • 位24 到 31负责alpha 通道的值（透明度）。
    • 位16 到 23负责红色分量的值。
    • 位8 到 15负责绿色分量的值。
    • 位0 到 7负责蓝色分量的值。

    Dart 开发人员当然很擅长想出一种巧妙地将颜色存储在单个整数值中的方法，但是移动开发人员如何接受这个呢？

    幸运的是，对于简单的 Dart 开发人员来说，整数也可以使用十六进制表示。它们以前缀开头，0x如下所示：

    int hex = 0xDEAFBB03;

    您会看到，这与您在以十六进制形式编写颜色时通常使用的非常相似。在这种情况下，只有更多的数字。因此，Flutter在创建颜色时，不仅需要指定RGB颜色的三个分量（红、绿、蓝），还需要指定不透明度。
    为了从 RGB 格式正确传输颜色，不透明度必须始终设置为完全 (255)。在十六进制中，这对应于 value FF，必须在前两位数字中指定。

    现在我们只需要像这样编写我们的颜色字符串：

    const color = const Color(0xffb74093); // Второй `const` при присваивании необязателен.

    字母可以指定为小写和大写。（使用你觉得最舒服的那个）

    const color = const Color(0xFFB74093);

    如果你想指定一个不透明度而不是完整的，那么你必须自己将这个通道的强度转换为十六进制格式，或者你可以使用这个表作为备忘单。（它也适用于其他通道）

    类扩展

    从 Dart 2.6.0 开始，您可以创建 Color 类的扩展，允许您使用十六进制颜色字符串来创建 Color 对象：

    extension HexColor on Color {
  /// Строка может иметь формат "aabbcc" или "ffaabbcc" с необязательным префиксом "#".
  static Color fromHex(String hexString) {
    final buffer = StringBuffer();
    if (hexString.length == 6 || hexString.length == 7) buffer.write('ff');
    buffer.write(hexString.replaceFirst('#', ''));
    return Color(int.parse(buffer.toString(), radix: 16));
  }

  /// Флаг leadingHashSign, отвечающий за наличие знака решетки в начале по умолчанию равен `true`.
  String toHex({bool leadingHashSign = true}) => '${leadingHashSign ? '#' : ''}'
      '${alpha.toRadixString(16).padLeft(2, '0')}'
      '${red.toRadixString(16).padLeft(2, '0')}'
      '${green.toRadixString(16).padLeft(2, '0')}'
      '${blue.toRadixString(16).padLeft(2, '0')}';
}

    方法fromHex()既可以在扩展中声明，也可以在 mixin 或类中声明，因为要使用它，您必须显式指定名称。HexColor
    对于方法toHex()，反过来，使用可以隐式使用的扩展是有意义的。
    例如：

    void main() {
  final Color color = HexColor.fromHex('#aabbcc');

  print(color.toHex());
  print(const Color(0xffaabbcc).toHex());
}

    重要说明（关于变量和常量）

    从十六进制字符串中定义颜色的便利性可以让人很容易在飞行中到处创建它们，这反过来又会产生负面影响。
    绝大多数 Dart 材质使用预定义的颜色常数。这对于分别具有大量小部件和大量颜色的 Flutter 应用程序是有意义的……而且最重要的是 - 在渲染界面时对它们进行大量调用。
    相信我，在每一帧上不断访问相同的内存区域并不是你想要的。
    使用常量在编译时进行了优化，使用它们比使用变量更可取。

    因此，如果您自己从十六进制字符串定义颜色，那么最好按照我的第一个示例中所示的方式进行操作，即使用常量。

    • 1

相关问题