更改父母时如何使用"GlobalKey"维护小部件的状态? [英] How to use `GlobalKey` to maintain widgets' states when changing parents?

问题描述

在艾米丽·福图纳(Emily Fortuna)的文章(和视频)中，她提到:

In Emily Fortuna's article (and video) she mentions:

GlobalKeys有两个用途:它们允许小部件更改父级 在应用中的任何位置而不会丢失状态，或者它们可以用来 在完全不同的部分中访问有关另一个小部件的信息 小部件树的名称.第一种情况的示例可能是 想要在两个不同的屏幕上显示相同的小部件，但是按住 都处于相同状态，则需要使用GlobalKey.

GlobalKeys have two uses: they allow widgets to change parents anywhere in your app without losing state, or they can be used to access information about another widget in a completely different part of the widget tree. An example of the first scenario might if you wanted to show the same widget on two different screens, but holding all the same state, you’d want to use a GlobalKey.

她的文章包括一个名为使用GlobalKey到ReuseWidget"的应用程序的gif演示，但没有提供源代码(可能是因为它太琐碎了).您还可以在此处从8:30标记开始观看快速视频演示: https://youtu. be/kn0EOS-ZiIc?t = 510

Her article includes a gif demo of an app called "Using GlobalKey to ReuseWidget" but does not provide source code (probably because it's too trivial). You can also see a quick video demo here, starting at 8:30 mark: https://youtu.be/kn0EOS-ZiIc?t=510

如何实施她的演示?我在哪里定义GlobalKey变量以及如何/在哪里使用它?例如，基本上，我想显示一个每秒计数的计数器，并在许多不同的屏幕上显示该计数器.这是GlobalKey可以帮助我的吗?

How do I implement her demo? Where do I define the GlobalKey variable and how/where do I use it? Basically for example, I want to display a counter that counts up every second, and have it on many different screens. Is that something GlobalKey can help me with?

推荐答案

使用GlobalKey在树上移动小部件的最常见用例是有条件地将孩子"包装到另一个小部件中，例如: /p>

The most common use-case of using GlobalKey to move a widget around the tree is when conditionally wrapping a "child" into another widget like so:

Widget build(context) {
  if (foo) {
    return Foo(child: child);
  }
  return child;
}

使用这样的代码，您会很快注意到，如果child是有状态的，则切换foo会使child失去其状态，这通常是意外的.

With such code, you'll quickly notice that if child is stateful, toggling foo will make child lose its state, which is usually unexpected.

为解决此问题，我们将使小部件成为有状态的，创建一个GlobalKey，然后将child包装到KeyedSubtree

To solve this, we'd make our widget stateful, create a GlobalKey, and wrap child into a KeyedSubtree

这是一个例子:

class Example extends StatefulWidget {
  const Example({Key key, this.foo, this.child}) : super(key: key);

  final Widget child;
  final bool foo;

  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  final key = GlobalKey();

  @override
  Widget build(BuildContext context) {
    final child = KeyedSubtree(key: key, child: widget.child);

    if (widget.foo) {
      return Foo(child: child);
    }
    return child;
  }
}

这篇关于更改父母时如何使用"GlobalKey"维护小部件的状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！