Question

我有一些按钮，只需要按一个按钮即可，其余按钮应更改其颜色，

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

如果我不提取按钮方法并在行内使用重复的代码，那么它将起作用。

我还缺少什么？

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

Answer 2

您可以使用在按钮中订阅的流。我为这个确切的问题here写了一篇文章。

基本上，当点击一个按钮时，您会在流中广播它的ID。同时，您的所有按钮（您的CustomWidget）都将收听流。当新的ID出现在流中时，您将检查当前按钮是否被按下，如果不是，则将其禁用。如果是，请保持启用状态。

要在此处粘贴太多代码，但本文（仅2分钟）描述了所有内容。

使所有其他小部件flatbutton按下时都会改变其颜色

2 个答案: