更新设置状态内的变量

Question

我是 Flutter 的新手，我有一个颜色列表，我希望能够触摸一个容器并在列表中的不同颜色之间切换。这将更新容器的颜色。在这种情况下，我也可以有多个容器 2，因此触摸一个容器不应更新其他容器。

我让它使用一个容器工作，但是在创建了一个返回小部件的方法之后，我可以拥有多个容器，这不起作用。

 import 'package:flutter/material.dart';

class NewGame extends StatefulWidget {
  final Color team1;
  final Color team2;
  final Color team3;

  NewGame(this.team1, this.team2, this.team3);

  @override
  _NewGameState createState() => _NewGameState();
}

class _NewGameState extends State<NewGame> {
  List<Color> teamColors;
  int team1Index = 0;
  int team2Index = 0;

  @override
  void initState() {
    super.initState();
    teamColors = [widget.team1, widget.team2, widget.team3];
  }

  Widget _buildTeamSelector(int teamIndex) {   
    return GestureDetector(
                onTap: () {
                  setState(() {
                    print('Value of teamColorIndex ${teamIndex.toString()}');
                    if (teamIndex < teamColors.length - 1) {
                      teamIndex++;
                    } else {
                      teamIndex = 0;
                    }
                  });
                },
                child: Container(
                  height: 75,
                  width: 75,
                  decoration: BoxDecoration(
                    color: teamColors[teamIndex],
                    borderRadius: BorderRadius.circular(50),
                  ),
                ),
              );
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 5,
      child: Column(
        children: <Widget>[
          Column(
            children: <Widget>[
              Text('Value of team1Index: :$team1Index'),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text('Teams:'),
                  _buildTeamSelector(team1Index),
                  _buildTeamSelector(team2Index),
                  Text('Red'),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

I/flutter (12114): Value of teamColorIndex 0
I/chatty  (12114): uid=10085(com.example.game_tracker) Thread-2 identical 1 line
I/flutter (12114): Value of teamColorIndex 0
I/flutter (12114): Value of teamColorIndex 0
I/chatty  (12114): uid=10085(com.example.game_tracker) Thread-2 identical 4 lines
I/flutter (12114): Value of teamColorIndex 0
I/flutter (12114): Value of teamColorIndex 0

在 setState 中，变量似乎没有得到更新。我知道这是问题所在，但我不知道为什么。

Answer 1

你要更新的变量不是你想的那个。

你有两个同名的变量：

• State 的属性
• _buildTeamSelector的参数

您在setState 调用中更改的不是State 属性，而是您的方法的参数。

代替：

int a;
void foo(int a) {
  a++;
}

做：

int a;
void foo(int a) {
  this.a++; //properly update the instance member instead of the parameter
}

Answer 2

您尝试更新按值传递的参数。 Dart 不支持通过引用传递原始类型，因此您需要将原始值包装在这样的对象中：

class Team {
  int index;

  Team(this.index);
}

class NewGame extends StatefulWidget {
  final Color team1;
  final Color team2;
  final Color team3;

  NewGame(this.team1, this.team2, this.team3);

  @override
  _NewGameState createState() => _NewGameState();
}

class _NewGameState extends State<NewGame> {
  List<Color> teamColors;
  var team1 = Team(0);
  var team2 = Team(0);

  @override
  void initState() {
    super.initState();
    teamColors = [widget.team1, widget.team2, widget.team3];
  }

  Widget _buildTeamSelector(Team team) {
    return GestureDetector(
      onTap: () {
        setState(() {
          print('Value of teamColorIndex ${team.index.toString()}');
          if (team.index < teamColors.length - 1) {
            team.index++;
          } else {
            team.index = 0;
          }
        });
      },
      child: Container(
        height: 75,
        width: 75,
        decoration: BoxDecoration(
          color: teamColors[team.index],
          borderRadius: BorderRadius.circular(50),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 5,
      child: Column(
        children: <Widget>[
          Column(
            children: <Widget>[
              Text('Value of team1.index: :${team1.index}'),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text('Teams:'),
                  _buildTeamSelector(team1),
                  _buildTeamSelector(team2),
                  Text('Red'),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}