flutter使用的是什么颜色系统?为什么我们使用const Color而不是new Color

htzpubme  于 2023-04-22  发布在  Flutter
关注(0)|答案(3)|浏览(117)

今天,我来到了以下代码片段,实现梯度Flutter

return new Container(
  ...
  decoration: new BoxDecoration(
    gradient: new LinearGradient(
      colors: [
        const Color(0xFF3366FF), 
        const Color(0xFF00CCFF),
      ]
      begin: const FractionalOffset(0.0, 0.0),
      end: const FractionalOffset(1.0, 0.0),
      stops: [0.0, 1.0],
      tileMode: TileMode.clamp
    ),
  ),
),

它提出了两个问题:
1)0xFF3366FF是什么颜色系统?它看起来有点像HEX,但它不是。
2)为什么const用于const Color()而不是new Color()我理解两者之间的不同,但const在这里对我来说感觉不直观,我希望它创建一个new Color()类示例,类似于我们如何使用new Text("Some text")。如果它需要const,为什么TileMode.clamp不也是const?

bbuxkriu

bbuxkriu1#

从Flutter源

class Color {
  /// Construct a color from the lower 32 bits of an [int].
  ///
  /// The bits are interpreted as follows:
  ///
  /// * Bits 24-31 are the alpha value.
  /// * Bits 16-23 are the red value.
  /// * Bits 8-15 are the green value.
  /// * Bits 0-7 are the blue value.
  ///
  /// In other words, if AA is the alpha value in hex, RR the red value in hex,
  /// GG the green value in hex, and BB the blue value in hex, a color can be
  /// expressed as `const Color(0xAARRGGBB)`.
  ///
  /// For example, to get a fully opaque orange, you would use `const
  /// Color(0xFFFF9000)` (`FF` for the alpha, `FF` for the red, `90` for the
  /// green, and `00` for the blue).
  const Color(int value) : value = value & 0xFFFFFFFF;

const示例已规范化。
如果代码中有多个const Color(0xFF00CCFF),则只会创建一个示例。
const示例在编译时被评估。在Dart VM中,这是加载代码的时候,但在Flutter生产中使用AoT编译,因此const值提供了一个小的性能优势。
另请参阅const构造函数实际上是如何工作的?

8i9zcol2

8i9zcol22#

正如公认的答案所解释的那样,const构造函数是一个小优化。
在dart中,即使调用了数百次,const MyObject(42)也只分配一次。这意味着更少的内存分配〉更快

  • 但这不是微不足道的优化吗 *

好吧,从dart的Angular 来看,是的。但是我们在这里有点混乱。我们还有一个Widget树,它也可以使用const构造函数。这意味着我们可以将您的代码示例更改为如下内容:

return const DecoratedBox(
  decoration: const BoxDecoration(
    gradient: const LinearGradient(
      colors: const [
        const Color(0xFF3366FF), 
        const Color(0xFF00CCFF),
      ],
      begin: const FractionalOffset(0.0, 0.0),
      end: const FractionalOffset(1.0, 0.0),
      stops: const [0.0, 1.0],
      tileMode: TileMode.clamp
    ),
  ),
);

在这里,由于Color是一个常量,我们设法得到一个常量LinearGradient,最终得到一个常量DecoratedBox小部件。但多亏了widget的不可变性;Flutter将识别出小部件是相同的。
后果:

  • DecoratedBox的整个子树将构建一次
  • 关联的RenderObject(在本例中为RenderDecoratedBox)将根本不会更新,即使它的父容器发生更改

确切地说,这在“Flutter的分层设计”视频谈话中有解释。但我建议从here开始视频,以更好地理解跳过的内容。
PS:有些小部件根本没有const构造函数 *。例如Container。但是在Container的情况下,你可以简单地使用DecoratedBox来代替,这基本上是Container在幕后使用的。这里的优点是DecoratedBox * 有一个const构造函数。

f0brbegy

f0brbegy3#

import 'package:flutter/material.dart';

class AppColors {
  static const Color kTransparent = Colors.transparent;
  static const Color kWhite = Colors.white;
  static const Color kBlack = Colors.black;
  static const Color kRed = Colors.red;
  static const Color kRedA = Colors.redAccent;
  static const Color kPink = Colors.pink;
  static const Color kPinkA = Colors.pinkAccent;
  static const Color kBlue = Colors.blue;
  static const Color kBlueA = Colors.blueAccent;
  static const Color kLightBlue = Colors.lightBlue;
  static const Color kLightBlueA = Colors.lightBlueAccent;
  static const Color kGreen = Colors.green;
  static const Color kGreenA = Colors.greenAccent;
  static const Color kLightGreen = Colors.lightGreen;
  static const Color kLightGreenA = Colors.lightGreenAccent;
  static const Color kLime = Colors.lime;
  static const Color kLimeA = Colors.limeAccent;
  static const Color kGrey = Colors.grey;
  static const Color kBlueGrey = Colors.blueGrey;
  static const Color kPurple = Colors.purple;
  static const Color kPurpleA = Colors.purpleAccent;
  static const Color kDeepPurple = Colors.deepPurple;
  static const Color kDeepPurpleA = Colors.deepPurpleAccent;
  static const Color kIndigo = Colors.indigo;
  static const Color kIndigoA = Colors.indigoAccent;
  static const Color kYellow = Colors.yellow;
  static const Color kYellowA = Colors.yellowAccent;
  static const Color kOrange = Colors.orange;
  static const Color kOrangeA = Colors.orangeAccent;
  static const Color kDeepOrange = Colors.deepOrange;
  static const Color kDeepOrangeA = Colors.deepOrangeAccent;
  static const Color kAmber = Colors.amber;
  static const Color kAmberA = Colors.amberAccent;
  static const Color kCyan = Colors.cyan;
  static const Color kCyanA = Colors.cyanAccent;
  static const Color kTeal = Colors.teal;
  static const Color kTealA = Colors.tealAccent;
  static const Color kBrown = Colors.brown;
}

相关问题