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

vuv7lop3  于 2023-01-18  发布在  Flutter
关注(0)|答案(6)|浏览(394)

我想动态地改变一些元素的颜色。有没有一种方法可以使用变量来获得颜色?类似于

Colors[myvar] where myvar = "green"
kq0g1dla

kq0g1dla1#

你能做的就是把你想要的颜色列成这样-

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;
}

然后可以使用此列表访问所需视图中的颜色。
希望这个有用。

vptzau2j

vptzau2j2#

1.使用函数

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

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

在这个代码块中,我们将return类型指定为小部件Container类,并且我们还指定了一个名为color的命名参数,它采用Color类型,稍后,如果我们希望调用这个函数,我们将这样做(您可能需要将;替换为,):

buildContainer(color: Colors.red);

2. finalconst

我仍然认为这个问题描述得不够充分,但是,如果上面的答案不能解决这个问题,我怀疑this other StackOverflow question可能会有所帮助。
至于关键字final,当你想在(自定义的)小部件中声明常量时,你会用到它。这是因为小部件需要在运行时定义常量,而不是像const那样在编译时定义常量。否则,当小部件被破坏和重建时,如果常量与运行时发生的事情有关,它就不知道如何正确地完成它。根据文档:
如果你从来不想改变一个变量,可以使用finalconst来代替var,或者在类型之外再加上final。const变量是编译时常量。(Const变量是隐式final的。)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,
      ),
    );
  }
}
nwnhqdif

nwnhqdif3#

使用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
    );
  }
}
vi4fp9gy

vi4fp9gy4#

我找到了另一个解决方案。在我的应用程序中,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. B作为例子,你只需要在它里面放一个正确的空:

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

在textcolor必须更改的地方,我用途:

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

对我很有效。

cetgtptt

cetgtptt5#

100%工作和简单的方法
最终只创建一个变量Color myColor;
创建一个构造函数来动态传递需要此颜色。myColor
打印颜色返回容器(颜色:我的颜色,);
传递颜色,如- myColor:Colors.red

q3qa4bjr

q3qa4bjr6#

从2个支架对开始...

color: () (),

然后添加匿名函数:(){}到第一个方括号...

color: ( (){} )   (),

最后给它加上代码...

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

完成

相关问题