dart - 为什么我的 setState 方法无法更改我的容器背景颜色？

Question

我试图在分别点击 4 个不同容器时更改它们的背景颜色。出于某种原因，我可以运行使用 setState 的方法 setBoardColors 并且所有背景颜色都已更改并且一切正常但是当有人点击其中一个容器和 调用了 setSquareColor 方法，该方法也使用 setState 我收到错误 NoSuchMethodError: Class 'Color' has no instance method '[]='。

这是我的代码:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'set state example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

Color myOrange = const Color.fromRGBO(255, 140, 66, 1.00);
Color myBlue = const Color.fromRGBO(26, 83, 92, 0.87);
Color myRed = const Color.fromRGBO(255, 107, 107, 0.87);
Color myGold = const Color.fromRGBO(255, 230, 109, 1.00);
Color myGreen = const Color.fromRGBO(32, 191, 85, 1.00);

class _MyHomePageState extends State<MyHomePage> {

  var squareColor = [
    myOrange,
    myOrange,
    myOrange,
    myOrange,
  ];

  void setBoardColors() {
    setState(() {
      squareColor[0] = myBlue;
      squareColor[1] = myRed;
      squareColor[2] = myGold;
      squareColor[3] = myGreen;
    });
  }

  void setSquareColor(squareIndex, squareColor) {
    setState(() {
      print("setSquareColor called");
      squareColor[squareIndex] = squareColor;
    });
  }

  @override
  Widget build(BuildContext context) {
    setBoardColors();

    return Scaffold(
      body: Center(
        child: Container(
          width: 200.0,
          height: 200.0,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  //square index 0
                  InkWell(
                    onTap: () {
                      setSquareColor(0, myOrange);
                    },
                    child: Container(
                      width: 100.0,
                      height: 100.0,
                      decoration: new BoxDecoration(
                        color: squareColor[0],
                      ),
                    ),
                  ),
                  //square index 1
                  InkWell(
                    onTap: () {
                      setSquareColor(1, myOrange);
                    },
                    child: Container(
                      width: 100.0,
                      height: 100.0,
                      decoration: new BoxDecoration(
                        color: squareColor[1],
                      ),
                    ),
                  ),
                ],
              ),
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  //square index 2
                  InkWell(
                    onTap: () {
                      setSquareColor(2, myOrange);
                    },
                    child: Container(
                      width: 100.0,
                      height: 100.0,
                      decoration: new BoxDecoration(
                        color: squareColor[2],
                      ),
                    ),
                  ),
                  //square index 3
                  InkWell(
                    onTap: () {
                      setSquareColor(3, myOrange);
                    },
                    child: Container(
                      width: 100.0,
                      height: 100.0,
                      decoration: new BoxDecoration(
                        color: squareColor[3],
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在此先感谢您的帮助!

Answer 1

您为函数的参数和数组“squareColor”使用了相同的变量名。我建议您将颜色数组更改为“squareColors”:

var squareColors = [
    myOrange,
    myOrange,
    myOrange,
    myOrange,
  ];

  void setBoardColors() {
    setState(() {
      squareColors[0] = myBlue;
      squareColors[1] = myRed;
      squareColors[2] = myGold;
      squareColors[3] = myGreen;
    });
  }

  void setSquareColor(squareIndex, squareColor) {
    setState(() {
      print("setSquareColor called");
      squareColors[squareIndex] = squareColor;
    });
  }