导航到新页面时是否可以保留小部件？

Question

在 flutter 中，例如，您可以有两个

pages

以及它们自己的一组小部件，当您从一个页面导航到另一个页面时，屏幕上的小部件将更改为另一个页面。

但是是否有可能有一个完全独立的小部件层，它绘制在所有

pages

之上，并且当导航发生时它的小部件将保留？

Answer 1

完全有可能！

方法 1：子导航器
使您想要保持一致的小部件位于小部件树中与导航器相同或更高的级别。例如（MaterialApp 小部件在其级别自动创建导航器）

    import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Column(
      children: [
        Container(
          height: 100,
          color: Colors.red,
        ),
        Expanded(
          child: MaterialApp(
            home: PageOne(),
          ),
        ),
      ],
    ));
  }
}

class PageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(),
      appBar: AppBar(
        title: Text("Page Two"),
      ),
    );
  }
}

class PageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          child: Text("Open Page Two"),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => PageTwo()),
            );
          },
        ),
      ),
      appBar: AppBar(
        title: Text("Page One"),
      ),
    );
  }
}

这将在任何导航上保留一个红色容器。如果您想要覆盖，您可以使用堆栈而不是列。
此时我们有两个导航器，因为我们有两个 MaterialApp。调用 navigator.of(context) 会检索小部件树中最近的一个，这将是子导航器，允许我们的导航仅影响第二个 MaterialApp 小部件下的所有内容

要访问树中更高层的导航器，您可以向 MaterialPage() 小部件提供 navigatorKey。然后，如果您愿意，您可以传递此键或将其设为静态全局变量。

static final navigatorKey = GlobalKey<NavigatorState>();

然后

MaterialPage(navigatorKey: navigatorKey...)

当您想从那里获取导航器时

Navigator.of(navigatorKey.currentContext).push()

方法2：按键 我不会在这里太深入地讨论这些。但键是在重建过程中识别小部件的一种方法。您可以为想要保持一致的小部件提供一个密钥，它将在重建时被视为相同的小部件。查看有关 flutter 中按键的更多信息：https://medium.com/flutter/keys-what-are-they-good-for-13cb51742e7d