flutter - 如何使用全局 Key 从 Flutter 中的另一个小部件更新小部件状态？

Question

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

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

Answer 1

我建议您可以观看此视频中的 2 个示例 Pragmatic State Management in Flutter (Google I/O'19)关于状态管理。这个视频对我刚开始学习flutter的时候帮助很大。他们解释了如何从另一个控制 StatefulWidget:

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

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