问题描述
我们正在使用一个抽屉来显示“设置”状态。我希望用户能够更改设置,并在抽屉中看到结果。
但是当我调用setState时,它将更新父窗口,而不是Drawer状态。
我希望用户能够将通知从“无”更改为“电话”,并看到抽屉状态中反映的内容。但是,它总是显示原始值。
@override
Widget build(BuildContext context) {
var key = GlobalKey<ScaffoldState>();
return Scaffold(
key: key,body: Text("Test Data"),bottomNavigationBar: NavBar(),drawer: Drawer( child: components( context ) ),);
}
Widget components( context )
{
return ListView(
children: <Widget>[
ListTile( dense: true,leading: Icon(Icons.notifications),title: Text("Notifications"),trailing: DropdownButtonHideUnderline ( child: DropdownButton<String>(
value: Settings.notifications.toString().split('.')[1],icon: Icon(Icons.expand_more),onChanged: (String newValue) {
if ( 'none' == newValue )
Settings.notifications = Notifications.none;
else if ( 'email' == newValue )
Settings.notifications = Notifications.email;
else if ( 'phone' == newValue )
Settings.notifications = Notifications.phone;
else
Settings.notifications = Notifications.both;
setState(() {
});
},items: <String>['none','email','phone','both']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>( value: value,child: Text(value),);
}).toList(),) ),),],);
}
解决方法
Drawer
本身就是一个无状态窗口小部件
将小部件代码放在函数中不会为其提供单独状态。它本质上是Main Widget的一部分,因此setState()
调用位于Main Widget下。
制作一个单独的StatefulWidget
(例如MyStatefulDrawer
),然后将Drawer
类作为根窗口部件放置在您的抽屉窗口部件代码中。
现在,在主窗口小部件中这样使用MyStatefulDrawer
:
@override
Widget build(BuildContext context) {
var key = GlobalKey<ScaffoldState>();
return Scaffold(
key: key,body: Text("Test Data"),bottomNavigationBar: NavBar(),drawer: MyStatefulDrawer(context),);
}
现在您的抽屉是有状态的,您可以在其中setState()
,并使用更新后的值对其进行重建。