在Flutter Dart中动态地改变按钮的背景颜色。

Question

如何在用户点击按钮时动态改变按钮的颜色。下面的代码生成的按钮是随机数，需要检查一下。

for (var j = 0; j < 5; j++) {
        rowOfButtons.add(SizedBox(
            width: 70,
            height: 70,
            child: Padding(
                padding: EdgeInsets.all(5.0),
                child: FlatButton(
                  color: Colors.blue,
                  textColor: Colors.white,
                  disabledColor: Colors.grey,
                  disabledTextColor: Colors.black,
                  splashColor: Colors.blueAccent,
                  onPressed: () {
                    /*...*/
                  },
                  child: Text(
                    numberlist[addrow].toString(),
                    style: TextStyle(fontSize: 20.0),
                  ),
                ))));
        addrow++;
        count++;
      }

Answer 1

它的状态。例如，下面的widget渲染了一排按钮（它接受一个参数--------------）。number 是一个整数--要渲染的按钮数量）。)

当你点击一个按钮时，它会更新设置哪个按钮被点击的索引状态，将颜色从红色变为蓝色。

注意：这可能不是你想要做的--你可能想在点击时突出显示所有按钮。这很好，这个概念是你 要用国 来跟踪点击量。

class RowOfButtons extends StatefulWidget {
  RowOfButtons({Key key, this.number}) : super(key: key);
  final int number;
  @override
  RowOfButtonsState createState() => RowOfButtonsState();
}

class RowOfButtonsState extends State<RowOfButtons> {

  int tapped;

  @override
  Widget build(BuildContext context) {

    List<Widget> buttons = new List();
    print(widget.number);
    for(var i = 0;i < widget.number; i++) {
      buttons.add(
        SizedBox(
          width: 40,
          height:40,
          child: Padding(
            padding: EdgeInsets.all(5.0),
            child: FlatButton(
              color: tapped == i ? Colors.blue : Colors.red,
              textColor: Colors.white,
              disabledColor: Colors.grey,
              disabledTextColor: Colors.black,
              splashColor: Colors.blueAccent, 
              child: Text("I am button '$i'"),
              onPressed: () { setState(() { tapped = i; }); },           
            ),
          )
        )
      );
    }

    return Row(children: buttons);
  }
}

EDIT: 你可以用 做得更好 比起这个，通过创建你自己的Button widget，像这样。

class MyClickedButton extends StatefulWidget {
  MyClickedButton({Key key, this.onPressed}) : super(key: key);

  // allow the widget that renders this widget to pass 
  // in a callback for when the button is pressed
  final Function() onPressed;

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

class MyClickedButtonState extends State<MyClickedButton> {

  bool pressed;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
        width: 40,
        height:40,
        child: Padding(
          padding: EdgeInsets.all(5.0),
          child: FlatButton(
            color: pressed ? Colors.blue : Colors.red,
            textColor: Colors.white,
            disabledColor: Colors.grey,
            disabledTextColor: Colors.black,
            splashColor: Colors.blueAccent, 
            child: Text("I am a button"),
            onPressed: () { 
              setState(() => { pressed = !pressed });
              // call the callback that was passed in from the parent widget
              widget.onPressed();
            },           
          ),
        )
      );
  }

}

无论你使用的是什么UI框架（Angular, vue, flutter, react），我发现 升国 由反应极其有用。

把状态放在你需要的地方，而且只放在你需要的地方。

Answer 2

生成随机颜色，使用

color: Colors.primaries[Random().nextInt(Colors.primaries.length)],