Question

我试图更改分别点击4个不同容器的背景颜色。出于某种原因，我可以运行使用setBoardColors的方法setState，并且所有背景色都已更改，并且一切正常，但是当有人轻按其中一个容器时，就会调用setSquareColor方法还使用setState我得到错误 NoSuchMethodError：类'Color'没有实例方法'[] ='。

这是我的代码：

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

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

1 个答案: