如何使用全局键从 Flutter 中的另一个小部件更新小部件状态？答案

【问题标题】：How to update a widget state from another widget in Flutter using global Key?如何使用全局键从 Flutter 中的另一个小部件更新小部件状态？
【发布时间】：2020-11-28 20:33:51
【问题描述】：

我有一个主小部件屏幕，其中包含两个主要小部件，一个标题（用红色标记）和一个列表（用紫色标记）
这是我的代码：

    class ScreenClient extends StatefulWidget {
      _ClientState createState() => _ClientState();
    }
    
    class _ClientState extends State<ScreenClient> {
      @override
      Widget build(BuildContext context) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            ClientHeader(), // this is my header widget red
            Expanded(
              child: ClientList(), // this is my list widget purple
            ),
          ],
        );
      }
    }

标题小部件有三个选项，如您所见 Tous Bloqué 和 ayant Retard ，我想要实现的是将单击选项的值传递给标有紫色的列表小部件（因为这些选项是过滤器，列表元素应根据所选选项显示）
我很难理解状态管理包，据我了解Global Keys 可以做到这一点，但如何？ . 这是我的标题小部件代码：

class ClientHeader extends StatefulWidget {
  _HeaderClientState createState() => _HeaderClientState();
}

class _HeaderClientState extends State<ClientHeader> {
  String nomSituation;
  String option = "Tous";

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: <Widget>[
          GestureDetector(
            child: Text(
              "Tous",
              style: TextStyle(
                color: option == "Tous" ? Colors.white : Colors.grey[400],
              ),
            ),
            onTap: () {
              setState(() {
                option = "Tous";
              });
            },
          ),
          GestureDetector(
            child: Text(
              "Bloqué",
              style: TextStyle(
                color: option == "Bloqué" ? Colors.white : Colors.grey[400],
              ),
            ),
            onTap: () {
              setState(() {
                option = "Bloqué";
                //add send value to ClientList widet ?
              });
            },
          ),
          GestureDetector(
            child: Text(
              "Ayant Retard",
              style: TextStyle(
                color:
                    option == "Ayant Retard" ? Colors.white : Colors.grey[400],
              ),
            ),
            onTap: () {
              setState(() {
                option = "Ayant Retard";
              });
            },
          ),
        ],
      ),
    );
  }
}

【问题讨论】：

你也可以为你的clientList添加代码吗？

标签： flutter dart flutter-layout

【解决方案1】：

我建议您可以观看此视频中的 2 个示例 Pragmatic State Management in Flutter (Google I/O'19)about state mangement。当我刚开始学习颤振时，这个视频对我帮助很大。他们解释了如何从另一个控制StatefulWidget：

使状态全局化，由另一个小部件控制 (from 5m30s)
使用 Provider，这是 Flutter 中非常流行的解决方案，来控制在 2 个小部件之间共享值 (from 15m05s)

你有更多的时间，你可以学习更多花哨的状态管理方法，比如 Bloc、MobX (List of state management approaches) 甚至是几个月前刚刚推出的名为 riverpod 的 Provider 的高级版本，试图解决一些问题使用 Provider 时的缺点。

【讨论】：