Question

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

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

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

请帮助我解决此问题。

Answer 1

希望我能正确满足您的要求。请看下面的示例，该示例演示了与您的想法类似的东西：

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

Answer 2

您必须必须使用setState（）更新Ui中的更改。将代码更改为：

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

希望它将解决您的问题

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

2 个答案: