如何在Flutter中动态改变颜色？

Question

我想动态地改变某些元素的颜色。是否有一种方法可以使用变量来获取颜色？类似于：

Colors[myvar] where myvar = "green"

- Alessio Pracchia

---

请包含一个最小、完整和可验证的示例。 - Marc

尝试实现问题的解决方案，并提出具体问题，描述您遇到了什么错误。 - Anton Gorbunov

Answer 1

您可以创建一个颜色列表，如下所示：

    static const List<_MyColor> myBgColors = const <_MyColor>[
     const _MyColor(null, 'Clear'),
     const _MyColor(const Color(0xFFFFC100), 'Orange'),
     const _MyColor(const Color(0xFF91FAFF), 'Light Blue'),
     const _MyColor(const Color(0xFF00D1FF), 'Cyan'),
     const _MyColor(const Color(0xFF00BCFF), 'Cerulean'),
     const _MyColor(const Color(0xFF009BEE), 'Blue'),
  ];

这里的_MyColor是一个类，类似于：

class _MyColor {
  const _MyColor(this.color, this.name);

  final Color color;
  final String name;
}

你可以使用这个列表来访问你想要的视图中的颜色。

希望这能帮到你。

- Annsh Singh

---

如何在ListView中添加不同的颜色。请帮我解决这个问题。https://stackoverflow.com/questions/58712508/how-to-add-different-gradient-colors-to-this-flutter-listview - raman raman

Answer 2

1. 使用函数

您可以使用带有Color参数的函数，即输入参数的类型将为Color。例如，在简单的小部件中：

Container buildContainer({Color color}) {
  return Container(
    color: color,
  );
}

在这个代码块中，我们特定指定了返回类型为widget的Container类。我们还指定了一个名为color的参数，它需要一个Color类型的值。稍后，如果我们想要调用此函数，我们将按照以下方式进行（您可能需要将“;”替换为“,”）：

buildContainer(color: Colors.red);

2. final vs const

我认为问题描述不够清晰，但是如果上面的答案没有解决它，我怀疑这个StackOverflow问题可能会有所帮助。

至于关键字final，当您想在（自定义）小部件内声明常量时使用它。这是因为小部件将需要在运行时而不是编译时定义常量。否则，每当小部件被销毁并重建时，如果常量与运行时发生的某事相关，则不知道如何正确执行它。正如文档所述：

如果您永远不打算更改变量，请在var之外或附加到类型中使用final或const。 final变量只能设置一次； const变量是一个编译时常量。（const变量隐式地成为final。）最终的顶级或类变量在第一次使用时初始化。

3. 使用类

例如，另一种做同样的事情的方法是为新小部件创建一个新类，而不是使用函数返回小部件的修改：

class CustomContainer extends StatelessWidget {
  final Color customColor;

  CustomContainer({this.customColor});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 10.0,
        width: 10.0,
        color: customColor,
      ),
    );
  }
}

- Philippe Fanaro

Answer 3

使用final对我来说是有效的。

最初的回答

final text_color = Colors.blue;

最初的回答：

以下是我在课堂上使用它的一个例子。

翻译后的文本：

以下是我在课堂中使用它的一个示例。

class ColorTest extends StatefulWidget {
  ColorTest();

  @override
  _ColorTest createState() => _ColorTest();
}

class _ColorTest extends State<ColorTest> {

  @override
  Widget build(
    BuildContext context,
  ) {

    final my_color_variable = Colors.red; // my_color_variable is now the color red

    return new Container(
        width: 100,
        height: 100,
        color: my_color_variable, // its red
    );
  }
}

- Chris

---

通过这个变量，如果我有多个容器，我可以使用这个变量为它们全部上色。然后改变这个变量的颜色就可以改变所有使用这种方式上色的容器的颜色。 - Chris

Answer 4

我找到了另一个解决方案。 在我的应用程序中， 1. 当我使用滑块更改此值时，我希望从数字A获取颜色更改。 2. 但是当我使用滑块更改数字B时，我希望B的颜色发生变化，并且数字A保持正常。

我做了什么： 我为我的文本样式创建了常量：

const numbers = TextStyle(
  fontFamily: 'B612 Mono',
  fontSize: 18.0,
  color: white,
);

const changeValueAB = TextStyle(
  fontFamily: 'B612 Mono',
  fontSize: 18.0,
  color: cRelayMiddle,
  backgroundColor: white,
);

我已经创建了两个布尔值：

bool aActive = false;
bool bActive = false;

然后我创建了两个函数：

void changeColorA() {
  aActive = true;
  bActive = false;
}

void changeColorB() {
  aActive = false;
  bActive = true;
}

然后当我改变这些值时（我现在只举例说明值A），你只需要将正确的空值放入其中：

                  onPressed: () {
                    setState(() {
                    // your commands AND the void the change the booleans:
                      changeColorA();
                    });
                  },

当需要改变文本颜色时，我使用：

Text(
  '$inputNumberA', 
  style: aActive ? changeValueAB : numbers,),

这对我有用。

- Margriet

Answer 5

从两个括号对开始...

color: () (),

然后在第一个括号中添加匿名函数：(){}

color: ( (){} )   (),

最后在其中添加代码...

color: ( (){ if (true) return Colors.green;} )   (),

完成

- Ishmael Mavor Raines

Answer 6

100%有效且易于操作的方法

只需创建一个变量 final Color myColor;

创建一个构造函数以动态传递颜色 required this.myColor

打印颜色 return Container( color: myColor, );

像这样传递颜色 - myColor：Colors.red

- Ashikul Islam Sawan