我有一些按钮,我只需要按下一个,其余的按钮应该改变颜色,
为了使代码更小,我提取了小部件以使其可重用,但是当我选择一个按钮时,它的颜色会发生变化,但它不会刷新其他按钮的状态。
如果我不提取button方法并使用行内的重复代码,那么它就工作了。
我缺少什么?

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

我希望看到所有其他按钮的颜色变回白色,如果选择一个。
我也试图通过空按使其禁用,但我看不到任何变化。

最佳答案

这是一个常见的错误,你有很多选择来解决这个问题,我将向你展示一个简单的方法,修改最少。
您需要刷新父窗口小部件(包含按钮的窗口小部件),因为您需要再次刷新所有按钮。
因此,这是您的代码修复:

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

关于button - 当一个人按下 flutter 时,让所有其他小部件平面按钮改变颜色,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56389641/

10-12 01:40
查看更多