如何使用全局密钥从Flutter中的另一个窗口小部件更新窗口小部件状态?

问题描述

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

I have a main widget screen contain two main widgets a Header (marked with red) and a list (marked with purple)
here is my code for that :

    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 可以解决问题，但是如何做呢?.这是我的标题小部件代码:

the header widget has three options as you can see Tous Bloqué and ayant Retard , what I'm trying to achieve is pass the value of the clicked option to the list widget marked with purple (because those options are filters and the list elements should be shown based on the chosen option)
I have a hard time understanding state management packages and from what I understand Global Keys can do the trick but How ? .here is my header widget code :

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

推荐答案

我建议您可以观看此视频中的2个示例 Flutter(Google I/O'19)中的实用状态管理关于状态管理.刚开始学习颤振时，这段视频对我有很大帮助.他们解释了如何从另一个控件中控制 StatefulWidget :

I suggest you can watch 2 examples in this video Pragmatic State Management in Flutter (Google I/O'19)about state mangement. This video helped me a lot when I learn flutter in the begining. They explain how to control the StatefulWidget from the other one:

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

1. Make state global, controlled by another widget (from 5m30s)
2. Use Provider, which is a very popular solution in Flutter, to control share the value between 2 widgets (from 15m05s)

您有更多的时间，可以研究更多的状态管理方法，例如Bloc，MobX(状态管理方法列表)，甚至是名为 riverpod 就开始流行了，它试图解决使用Provider时的一些弊端.

You you have more time, you can study more fancy state management method like Bloc, MobX (List of state management approaches) or even the advance version of Provider named riverpod just pushish few months ago, which try to resolve some cons when using Provider.

这篇关于如何使用全局密钥从Flutter中的另一个窗口小部件更新窗口小部件状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！