如何仅更新抽屉内容

Question

我们正在使用抽屉来显示“设置”状态。我希望用户能够更改设置并在抽屉中看到反映的结果。

但是当我调用 setState 时，它会更新父级 window，而不是抽屉状态。

我希望用户能够将通知从 'none' 更改为 'phone' 并在抽屉状态中看到反映。但它始终显示原始值。

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

Answer 1

Drawer本身就是一个Stateless widget

将小部件代码放在函数中不会为其提供单独状态。它本质上是 Main Widget 的一部分，因此 setState() 调用在 Main Widget 下。

制作一个单独的 StatefulWidget（比如说 MyStatefulDrawer），然后将您的抽屉小部件代码放在那里，Drawer class 作为根小部件。

现在，在您的主窗口小部件中使用 MyStatefulDrawer：

@override
  Widget build(BuildContext context) {
    var key = GlobalKey<ScaffoldState>();
    return Scaffold(
      key: key,
      body: Text("Test Data"),
      bottomNavigationBar: NavBar(),
      drawer: MyStatefulDrawer(context),
    );
  }

现在你的抽屉是有状态的，你可以 setState() 在里面，它会用更新的值重建。

如何仅更新抽屉内容

How to update the drawer content only

drawer

setstate

flutter