更改父母时如何使用`GlobalKey`维护小部件的状态？

Question

在 Emily Fortuna 的文章（和视频）中，她提到：

GlobalKeys 有两个用途：它们允许小部件更改父级 在您的应用程序中的任何位置都不会丢失状态，或者它们可以用于 在完全不同的部分访问有关另一个小部件的信息 的小部件树。第一个场景的一个例子可能是如果你 想在两个不同的屏幕上显示相同的小部件，但持有 在所有相同的状态下，您都需要使用 GlobalKey。

她的文章包含一个名为“Using GlobalKey to ReuseWidget”的应用程序的 gif 演示，但没有提供源代码（可能是因为它太琐碎了）。您还可以在此处观看快速视频演示，从 8:30 开始：https://youtu.be/kn0EOS-ZiIc?t=510

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

Answer 1

使用GlobalKey 在树周围移动小部件的最常见用例是有条件地将“子”包装到另一个小部件中，如下所示：

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

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

为了解决这个问题，我们要让我们的小部件有状态，创建一个GlobalKey，并将child 包装成一个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;
  }
}

Answer 2

我不建议将 GlobalKey 用于此任务。

您应该传递数据，而不是小部件，而不是小部件状态。例如，如果您想要在演示中使用Switch 和Slider，最好将实际的boolean 和double 传递到这两个小部件后面。对于更复杂的数据，您应该查看Provider、InheritedWidget 等。

自该视频发布以来，情况发生了变化。 Saed 的回答（我奖励了 50 分）可能是视频中的做法，但它在最近的 Flutter 版本中不再有效。基本上目前没有使用 GlobalKey 轻松实现演示的好方法。

但是……

如果你能保证，两个小部件永远不会同时出现在屏幕上，或者更准确地说，它们永远不会同时插入到同一帧上的小部件树中，那么您可以尝试使用GlobalKey 在布局的不同部分使用相同的小部件。

请注意，这是一个非常严格的限制。例如，当滑动到另一个屏幕时，通常会有一个过渡动画，两个屏幕同时渲染。那不行。所以在这个演示中，我插入了一个“空白页”来防止滑动时出现这种情况。

如何：

因此，如果您想要相同的小部件出现在非常不同的屏幕上（希望它们彼此相距很远），您可以使用 GlobalKey 来做到这一点，基本上只需 3 行代码。

首先，声明一个可以从两个屏幕访问的变量：

final _key = GlobalKey();

然后，在您的小部件中，有一个构造函数，该构造函数接受一个键并将其传递给父类：

Foo(key) : super(key: key);

最后，每当您使用小部件时，将相同的键变量传递给它：

return Container(
  color: Colors.green[100],
  child: Foo(_key),
);

完整来源：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  final _key = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Global Key Demo")),
      body: PageView.builder(
        itemCount: 3,
        itemBuilder: (context, index) {
          switch (index) {
            case 0:
              return Container(
                color: Colors.green[100],
                child: Foo(_key),
              );
              break;
            case 1:
              return Container(
                color: Colors.blue[100],
                child: Text("Blank Page"),
              );
              break;
            case 2:
              return Container(
                color: Colors.red[100],
                child: Foo(_key),
              );
              break;
            default:
              throw "404";
          }
        },
      ),
    );
  }
}

class Foo extends StatefulWidget {
  @override
  _FooState createState() => _FooState();

  Foo(key) : super(key: key);
}

class _FooState extends State<Foo> {
  bool _switchValue = false;
  double _sliderValue = 0.5;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Switch(
          value: _switchValue,
          onChanged: (v) {
            setState(() => _switchValue = v);
          },
        ),
        Slider(
          value: _sliderValue,
          onChanged: (v) {
            setState(() => _sliderValue = v);
          },
        )
      ],
    );
  }
}

Answer 3

更新：这是处理状态管理的旧方法，不再推荐，请参阅我的 cmets 并查看下面的 user1032613's answer

全局键可用于从小部件树中的任何位置访问有状态小部件的状态

import 'package:flutter/material.dart';

main() {
  runApp(MaterialApp(
    theme: ThemeData(
      primarySwatch: Colors.indigo,
    ),
    home: App(),
  ));
}

class App extends StatefulWidget {
  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  GlobalKey<_CounterState> _counterState;

  @override
  void initState() {
    super.initState();
    _counterState = GlobalKey();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
          child: Column(
        children: <Widget>[
          Counter(
            key: _counterState,
          ),
        ],
      )),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.navigate_next),
        onPressed: () {
          Navigator.of(context).push(
            MaterialPageRoute(builder: (context) {
              return Page1(_counterState);
            }),
          );
        },
      ),
    );
  }
}

class Counter extends StatefulWidget {
  const Counter({
    Key key,
  }) : super(key: key);

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

class _CounterState extends State<Counter> {
  int count;

  @override
  void initState() {
    super.initState();
    count = 0;
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        IconButton(
          icon: Icon(Icons.add),
          onPressed: () {
            setState(() {
              count++;
            });
          },
        ),
        Text(count.toString()),
      ],
    );
  }
}
class Page1 extends StatefulWidget {
  final GlobalKey<_CounterState> counterKey;
  Page1( this.counterKey);
  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Row(
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.add),
              onPressed: () {
                setState(() {
                  widget.counterKey.currentState.count++;
                  print(widget.counterKey.currentState.count);
                });
              },
            ),
            Text(
              widget.counterKey.currentState.count.toString(),
              style: TextStyle(fontSize: 50),
            ),
          ],
        ),
      ),
    );
  }
}