button - 当一个按钮被按下时，让所有其他小部件平面按钮改变它们的颜色

Question

我有一些按钮，我只需要按下一个，其余的应该改变它们的颜色，

为了使代码更小，我提取了小部件以使其可重复使用，但是当我选择一个按钮时，它会更改颜色但不会刷新其他按钮的状态。

如果我不提取按钮方法并在 Row 中使用重复代码，那么它就可以工作。

我缺少什么？

int numOfTime = 60;

class NumOfTime extends StatefulWidget {
  const NumOfTime({
    Key key,
  }) : super(key: key);

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

class _NumOfTimeState extends State<NumOfTime> {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
            margin: EdgeInsets.only(left: 15, top: 5),
            child: Text(
              'Δευτερόλεπτα',
              style: TextStyle(color: Colors.white),
            )),
        Container(
          margin: EdgeInsets.only(top: 2, left: 10, right: 10, bottom: 10),
          decoration: myBoxDecoration(),
          child: Row(
            children: <Widget>[
              Container(
                  padding: EdgeInsets.only(left: 10, right: 5),
                  child: Icon(Icons.timer)),
              CustomButton(
                number: 30,
              ),
              CustomButton(
                number: 45,
              ),
              CustomButton(
                number: 60,
              ),
              CustomButton(
                number: 75,
              ),
              CustomButton(
                number: 90,
              ),
              Container(
                padding: EdgeInsets.only(right: 10),
              )
            ],
          ),
        ),
      ],
    );
  }
}

class CustomButton extends StatefulWidget {
  final int number;
  const CustomButton({
    Key key,
    final int number,
  }) : this.number = number;

  @override
  _CustomButtonState createState() => _CustomButtonState(number);
}

class _CustomButtonState extends State<CustomButton> {
  final int number;
  _CustomButtonState(this.number);

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

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 1,
      child: FlatButton(
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(6.0)),
          disabledColor: number == numOfTime ? Colors.black : Colors.white,
          highlightColor: number == numOfTime ? Colors.black : Colors.white,
          color: number == numOfTime ? Colors.black : Colors.white,
          child: Text(
            '$number',
            style: TextStyle(
                color: number == numOfTime ? Colors.white : Colors.black,
                fontSize: 13),
          ),
          onPressed: () {
            numOfTime = number;
            setState(() {});
          }),
    );
  }
}

如果选择一个按钮，我希望看到所有其他按钮的颜色变回白色。

我也尝试传递 null onPressed 以使其禁用，但我没有看到任何变化。

Answer 1

这是一个常见错误，您有多种解决方法，我将向您展示修改最少的简单方法。

您需要刷新父小部件(包含按钮的小部件)，因为您需要再次刷新所有按钮。

所以，这是你的代码修复:

    class _NumOfTimeState extends State<NumOfTime> {
      _onPressed() {
        setState(() {});
      }

      @override
      Widget build(BuildContext context) {
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
                margin: EdgeInsets.only(left: 15, top: 5),
                child: Text(
                  'Δευτερόλεπτα',
                  style: TextStyle(color: Colors.white),
                )),
            Container(
              margin: EdgeInsets.only(top: 2, left: 10, right: 10, bottom: 10),
              //decoration: myBoxDecoration(),
              child: Row(
                children: <Widget>[
                  Container(
                      padding: EdgeInsets.only(left: 10, right: 5),
                      child: Icon(Icons.timer)),
                  CustomButton(
                    number: 30,
                    onButtonPressed: _onPressed,
                  ),
                  CustomButton(
                    number: 45,
                    onButtonPressed: _onPressed,
                  ),
                  CustomButton(
                    number: 60,
                    onButtonPressed: _onPressed,
                  ),
                  CustomButton(
                    number: 75,
                    onButtonPressed: _onPressed,
                  ),
                  CustomButton(
                    number: 90,
                    onButtonPressed: _onPressed,
                  ),
                  Container(
                    padding: EdgeInsets.only(right: 10),
                  )
                ],
              ),
            ),
          ],
        );
      }
    }

    class CustomButton extends StatefulWidget {
      final int number;
      final VoidCallback onButtonPressed;
      const CustomButton({
        Key key,
        final int number,
        this.onButtonPressed,
      }) : this.number = number;

      @override
      _CustomButtonState createState() => _CustomButtonState(number);
    }

    class _CustomButtonState extends State<CustomButton> {
      final int number;
      _CustomButtonState(this.number);

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

      @override
      Widget build(BuildContext context) {
        return Expanded(
          flex: 1,
          child: FlatButton(
              shape:
                  RoundedRectangleBorder(borderRadius: BorderRadius.circular(6.0)),
              disabledColor: number == numOfTime ? Colors.black : Colors.white,
              highlightColor: number == numOfTime ? Colors.black : Colors.white,
              color: number == numOfTime ? Colors.black : Colors.white,
              child: Text(
                '$number',
                style: TextStyle(
                    color: number == numOfTime ? Colors.white : Colors.black,
                    fontSize: 13),
              ),
              onPressed: () {
                numOfTime = number;
                widget.onButtonPressed();
              }),
        );
      }
    }