flutter - 如何同时在多个按钮上设置属性？

Question

我创建了一个小游戏，其中包含一堆简单的按钮，它们在被点击时会改变颜色:

class LetterButton extends StatefulWidget {
  final String caption;

  LetterButton(this.caption);

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

class _LetterButtonState extends State<LetterButton> {
  Color _buttonColor = Colors.white; //initial state

  void clear() {
    _buttonColor = Colors.white;
  }

  void buttonColor() {
    if (_buttonColor == Colors.white) {
      _buttonColor = Colors.yellow;
    } else if (_buttonColor == Colors.yellow) {
      _buttonColor = Colors.red;
    } else if (_buttonColor == Colors.red) {
      _buttonColor = Colors.green;
    } else if (_buttonColor == Colors.green) {
      _buttonColor = Colors.white;
    } else
      _buttonColor = Colors.white;
  }

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text(widget.caption),
      onPressed: () {
        buttonColor();
        setState(() {});
      },
      color: _buttonColor,
      padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
    );
  }
}

按钮是在main的build方法中创建的(摘录):

Wrap(
              children: <Widget>[
                LetterButton('A'),
                LetterButton('B'),
                LetterButton('C'),
                LetterButton('D'),
                LetterButton('E'),
                LetterButton('F'),
                LetterButton('G'),
                LetterButton('H'),
                LetterButton('I'),
                LetterButton('J'),
                LetterButton('K'),
                LetterButton('L'),
                LetterButton('M'),
                LetterButton('N'),
                LetterButton('O'),
                LetterButton('P'),
                LetterButton('Q'),
                LetterButton('R'),
                LetterButton('S'),
                LetterButton('T'),
                LetterButton('U'),
                LetterButton('V'),
                LetterButton('W'),
                LetterButton('X'),
                LetterButton('Y'),
                LetterButton('Z'),
              ],
            ),

如何同时重置或清除所有按钮(即，将所有按钮更改为color: Colors.white)？

Answer 1

我找到了一种使用rxDart包的方法。

首先，将软件包添加到pubspec.yaml并添加
rxdart:依赖项you can see how here. ^ 0.23.1

现在是HomeScreen，我们需要在其中创建BehaviorSubject对象以控制颜色:

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  List<String> alphabet = [
    'A',
    'B',
    'C',
    'D',
    'E',
    'F',
    'G',
    'H',
    'I',
    'J',
    'K',
    'L',
    'M',
    'N',
    'O',
    'P',
    'Q',
    'R',
    'S',
    'T',
    'U',
    'V',
    'W',
    'X',
    'Y',
    'Z',
  ];

  BehaviorSubject color = BehaviorSubject<Color>();

  Function(Color) get changeColor => color.sink.add;     //using to change the color  easily


  @override
  void initState() {
    super.initState();
    changeColor(Colors.white);
  }

  @override
  void dispose() {
    color.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            height: MediaQuery.of(context).size.height,
            child: GridView.count(
              crossAxisCount: 4,
              childAspectRatio: 2,
              children: List.generate(alphabet.length, (index) {
                return LetterButton(
                  caption: alphabet[index],
                  resetButtonColor: color,
                );
              })
                ..add(
                  RaisedButton(
                    onPressed: () {
                      setState(() {                     //the reset button
                        changeColor(Colors.white);
                      });
                    },
                  ),
                ),
            ),
          ),
        ],
      ),
    );
  }
}

和LetterButton进行一些更改:

class LetterButton extends StatefulWidget {
  final String caption;
  final BehaviorSubject<Color> resetButtonColor;

  LetterButton({this.caption, this.resetButtonColor});

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

class _LetterButtonState extends State<LetterButton> {

  BehaviorSubject<Color> currentButtonColor = BehaviorSubject<Color>(); //new object

  @override
  void initState() {
    super.initState();

    currentButtonColor.sink.add(Colors.white);

    widget.resetButtonColor.stream.listen((color){
      currentButtonColor.value = color;      //now everyone's color will just change when the reset button
    });                            //is clicked, preventing the error of getting the last color of the stream always

  }

  @override
  void dispose() {
    currentButtonColor.close();
    super.dispose();
  }

  void buttonColor() {
    if (currentButtonColor.value == Colors.white) {
      currentButtonColor.sink.add(Colors.yellow);
    } else if (currentButtonColor.value == Colors.yellow) {
      currentButtonColor.sink.add(Colors.red);
    } else if (currentButtonColor.value == Colors.red) {
      currentButtonColor.sink.add(Colors.green);
    } else if (currentButtonColor.value == Colors.green) {
      currentButtonColor.sink.add(Colors.white);
    } else
      currentButtonColor.value = Colors.white;
  }

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text(widget.caption),
      onPressed: () {
        buttonColor();
        setState(() {});
      },
      color: currentButtonColor.value,
      padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
    );
  }
}

用户界面: