如何同时在多个按钮上设置属性？ [英] How to simultaneously set a property on multiple buttons?

问题描述

我创建了一个小型游戏，其中包含一堆简单的按钮，这些按钮在点击时会改变颜色：

  class LetterButton扩展StatefulWidget {
最终字符串标题； 
 
 LetterButton（this.caption）; 
 
 @override 
 _LetterButtonState createState（）=> _LetterButtonState（）; 
} 
 
类_LetterButtonState扩展了State< LetterButton> {
 Color _buttonColor = Colors.white; //初始状态
 
 void clear（）{
 _buttonColor = Colors.white; 
} 
 
 void buttonColor（）{
 if（_buttonColor == Colors.white）{
 _buttonColor = Colors.yellow; 
}否则，如果（_buttonColor == Colors.yellow）{
 _buttonColor = Colors.red; 
}否则，如果（_buttonColor == Colors.red）{
 _buttonColor = Colors.green; 
}否则，如果（_buttonColor == Colors.green）{
 _buttonColor = Colors.white; 
} else 
 _buttonColor = Colors.white; 
} 
 
 @override 
小部件构建（BuildContext上下文）{
 return RaisedButton（
 child：Text（widget.caption），
 onPressed：（）{
 buttonColor（）; 
 setState（（）{}）; 
}，
 color：_buttonColor，
 padding：EdgeInsets.fromLTRB（10 ，10，10，10），
）; 
} 
} 
  

按钮是在main的build方法中创建的（这是摘录）：

  Wrap（
个孩子：< 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 ）？

解决方案

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

首先，将软件包添加到pubspec.yaml并将
rxdart：^ 0.23.1 添加到您的依赖项中，

I've created a small game which includes a bunch of simple buttons which change color when tapped:

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

The buttons are created in main's build method (this is an excerpt):

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'),
              ],
            ),

How can I reset or clear all the buttons simultaneously (i.e., change all the buttons to color: Colors.white)?

解决方案

I find a way of doing that using the rxDart package.

First, add the package going to pubspec.yaml and adding rxdart: ^0.23.1 to your dependencies, you can see how here.

Now the HomeScreen, where we need to create the BehaviorSubject object to controll the color:

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

And the LetterButton with some changes:

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

The UI:

这篇关于如何同时在多个按钮上设置属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！