颤振中单击第一个按钮时如何重置第二个按钮?

我的页面上有两个按钮,第一个是“重置”,第二个是“播放/暂停”。要开始播放音乐,我单击“播放”按钮并将其图标更新为“暂停”图标,以便用户可以通过单个按钮播放/暂停音乐。(我只是更新其图标以播放和暂停)

现在有另一个按钮“重置”。如果音乐正在运行,我会在“播放”按钮上显示“暂停”图标,当用户单击“重置”按钮时,我要将“暂停”图标更新为“播放”图标。但是在尝试了很多事情之后,我仍然无法做到这一点。我在这里附上我的代码:

class SystemButtonGroupRight extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    MediaQueryData queryData;
    queryData = MediaQuery.of(context);

    if (queryData.size.width > 550) {
      systemBtnSize = 50;
    }

    //bool playIcon = true;

    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        _SystemButton(type: 'reset'),
        _SystemButton(type: 'playnpause'),
      ],
    );
  }
}

class _SystemButton extends StatefulWidget {
  final type;
  const _SystemButton({Key key, this.type}) : super(key: key);

  @override
  _SystemButtonState createState() {
    return new _SystemButtonState();
  }

}



class _SystemButtonState extends State<_SystemButton> {

  Widget wIcon = Icon(Icons.grade);
  String _type;

  @override
  void didUpdateWidget(_SystemButton oldWidget) {
    super.didUpdateWidget(oldWidget);
    _type = widget.type;
  }

  @override
  void initState() {
    super.initState();
    _type = widget.type;

    if (_type == 'reset') {
      wIcon = Icon(Icons.replay);
    } else if (_type == 'playnpause') {
      wIcon = Icon(Icons.play_arrow);
    }
  }




  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 15.0),
      child: Material(

        color: Colors.black,
        shape: CircleBorder(),
        child: Center(
          child: Ink(
            decoration: const ShapeDecoration(
              color: Colors.white12,
              shape: CircleBorder(),
            ),
            child: IconButton(
              icon: wIcon,
              color: Colors.white70,
              onPressed: () {
                if (_type == 'reset') {
                  reset();
                } else if (_type == 'playnpause') {
                  pauseOrResume();
                }
              },
            ),
          ),
        ),
      ),
    );
  }
}

请帮我解决这个问题。

评论
  • Ida
    Ida 回复

    希望我正确地得到了您的要求。看下面的示例,演示与您的想法类似的示例:

    class MusicPlayPage extends StatefulWidget {
      MusicPlayPage({Key key}) : super(key: key);
    
      @override
      _MusicPlayPageState createState() => _MusicPlayPageState();
    }
    
    class _MusicPlayPageState extends State<MusicPlayPage> {
      String buttonLabel = 'Play/Pause';
    
      IconData buttonIcon;
    
      @override
      void initState() {
        super.initState();
        buttonIcon = Icons.play_circle_filled;
      }
    
      void toggleIcon() {
        if (buttonIcon == Icons.play_circle_filled) {
          setState(() {
            buttonIcon = Icons.pause_circle_filled;
          });
        } else {
          setState(() {
            buttonIcon = Icons.play_circle_filled;
          });
        }
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text("Music Player")),
          body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              MaterialButton(
                onPressed: () {
                  toggleIcon();
                },
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(buttonIcon),
                    SizedBox(
                      width: 12,
                    ),
                    Text(buttonLabel),
                  ],
                ),
              ),
              SizedBox(
                height: 12,
              ),
              MaterialButton(
                onPressed: () {
                  setState(() {
                    buttonIcon = Icons.play_circle_filled;
                  });
                },
                child: Text('Reset'),
              )
            ],
          ),
        );
      }
    }