如何在Flutter中動態改變顏色？

Question

我想動態改變某些元素的顏色。 有沒有辦法使用變量獲取 colors？ 就像是

Colors[myvar] where myvar = "green"

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

然后，您可以使用此列表訪問您想要的視圖中的顏色。

希望這會有所幫助。

Answer 2

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

Answer 3

1. 使用函數

您可以使用帶有Color參數的函數，即輸入參數的類型為Color 。 例如，在一個簡單的小部件中：

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

在此塊中，我們將return類型指定為小部件Container類。 我們還指定了一個名為color的命名參數，它采用Color類型。 稍后，如果我們希望調用此函數，我們會這樣做（您可能需要將;替換為, ）：

buildContainer(color: Colors.red);

2. final與const

我仍然認為這個問題沒有足夠的描述，但是，如果上面的這個答案沒有解決它，我懷疑另一個 StackOverflow 問題可能會有所幫助。

至於關鍵字final ，當您想在（自定義）小部件中聲明常量時使用它。 那是因為小部件需要在運行時定義的常量，而不是像const那樣在編譯時定義的const 。 否則，每當小部件被銷毀和重建時，如果常量與運行時發生的某些事情有關，它就不會知道如何正確執行此操作。 根據 文檔：

如果您從不打算更改變量，請使用final或const ，而不是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,
      ),
    );
  }
}

Answer 4

我找到了另一個解決方案。 在我的應用程序中， 1. 當我使用滑塊更改此值時，我希望數字 A 的顏色發生變化。 2. 但是，當我使用數字 BI 的滑塊時，希望 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 作為示例值，您只需要在其中放置正確的 void：

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

我使用的 textcolor 必須更改的地方：

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

它對我有用。

Answer 5

100% 有效且簡單的方法

只需創建一個變量 final Color myColor；

創建一個構造函數來動態傳遞顏色所需的 this.myColor

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

傳遞顏色 - myColor: Colors.red

Answer 6

從 2 對支架開始...

color: () (),

然后將匿名 function: (){} 添加到第一個括號...

color: ( (){} )   (),

最后添加代碼...

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

完畢