Flutter變數發生變化，但在UI上沒有變化

我有一個像這樣的基本用戶界面。

我有一個容器串列。當我按下浮動按鈕時，我想將隨機容器的顏色更改為隨機顏色。此函式選擇隨機顏色。

getColor() {
  Random random = Random();
  Color? _color = Color.fromARGB(
      255, random.nextInt(255), random.nextInt(255), random.nextInt(255));
  print("selected color: $_color");
  return _color;
} 

這應該將拾取的顏色設定為隨機容器的顏色。

void _colorChanger() {
  Random random = Random();
  int i = random.nextInt(4);
  print("selected state : $i");
  if (i == 0) {
    setState(() {
      print("before state 0   $_color0");
      _color0 = getColor();
      print("after state 0   $_color0");
      print("set1");
    });
  } else if (i == 1) {
    setState(() {
      _color1 = getColor();
      print("set2");
    });
  } else if (i == 2) {
    setState(() {
      _color2 = getColor();
      print("set3");
    });
  } else if (i == 3) {
    setState(() {
      _color3 = getColor();
      print("set3");
    });
  }
}

通過列印，我看到了顏色值的變化。但它不會在 UI 上改變。我怎樣才能解決這個問題？

這是源代碼。

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    getColor() {
      Random random = Random();
      Color? _color = Color.fromARGB(
          255, random.nextInt(255), random.nextInt(255), random.nextInt(255));
      print("selected color: $_color");
      return _color;
    }

    Color? _color0 = Colors.yellow;
    Color? _color1 = Colors.white;
    Color? _color2 = Colors.red;
    Color? _color3 = Colors.blue;

    void _colorChanger() {
      Random random = Random();
      int i = random.nextInt(4);
      print("selected state : $i");
      if (i == 0) {
        setState(() {
          print("before state 0   $_color0");
          _color0 = getColor();
          print("after state 0   $_color0");
          print("set1");
        });
      } else if (i == 1) {
        setState(() {
          _color1 = getColor();
          print("set2");
        });
      } else if (i == 2) {
        setState(() {
          _color2 = getColor();
          print("set3");
        });
      } else if (i == 3) {
        setState(() {
          _color3 = getColor();
          print("set3");
        });
      }
    }

    var listofContainers = [
      Container(
        color: _color0,
        width: 50,
        height: 50,
        child: const Center(child: Text('Container 1')),
      ),
      Container(
        color: _color1,
        child: const Center(child: Text('Container 2')),
      ),
      Container(
        color: _color2,
        width: 50,
        height: 50,
        child: const Center(child: Text('Container 3')),
      ),
      Container(
        color: _color3,
        width: 50,
        height: 50,
        child: const Center(child: Text('Container 4')),
      )
    ];

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: GridView.count(
          crossAxisCount: 2,
          children: [
            listofContainers[0],
            listofContainers[1],
            listofContainers[2],
            listofContainers[3],
            FloatingActionButton(
              onPressed: () {
                _colorChanger();
              },
              child: Text("Change Color"),
            ),
          ],
        ),
      ),
    );
  }
}

uj5u.com熱心網友回復：

您的顏色在每次小部件重建時都會被覆寫（當您呼叫setState時，因為值在同一個構建方法中。在構建方法之外獲取Color值和getColor方法（也是colorChanger方法）并運行它，您'會看到它的作業，如：

class _MyHomePageState extends State<MyHomePage> {
  
  getColor() {
      Random random = Random();
      Color? _color = Color.fromARGB(
          255, random.nextInt(255), random.nextInt(255), random.nextInt(255));
      print("selected color: $_color");
      return _color;
    }

    Color? _color0 = Colors.yellow;
    Color? _color1 = Colors.white;
    Color? _color2 = Colors.red;
    Color? _color3 = Colors.blue;

  void _colorChanger() { ... }
  
  @override
  Widget build(BuildContext context) {
    // rest of the code
  }
}

標籤：扑 镖

上一篇：引數型別“Null”不能分配給引數型別“int”。（撲）

下一篇：添加三元或if運算子以檢測FlutterStreamBuilder中輸出文本中的條件？