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

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

您必须使用 setState(( 来更新 UI 中的更改。 将代码更改为：

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

希望它能解决您的问题

Answer 2

希望我正确满足您的要求。看看下面的例子，它展示了与你类似的想法：

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