我的页面上有两个按钮,第一个是“重置”,第二个是“播放/暂停”。要开始播放音乐,我单击“播放”按钮并将其图标更新为“暂停”图标,以便用户可以通过单个按钮播放/暂停音乐。(我只是更新其图标以播放和暂停)
现在有另一个按钮“重置”。如果音乐正在运行,我会在“播放”按钮上显示“暂停”图标,当用户单击“重置”按钮时,我要将“暂停”图标更新为“播放”图标。但是在尝试了很多事情之后,我仍然无法做到这一点。我在这里附上我的代码:
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();
}
},
),
),
),
),
);
}
}
请帮我解决这个问题。
希望我正确地得到了您的要求。看下面的示例,演示与您的想法类似的示例: