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

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

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

下的所有内容

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

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

Is it possible to keep a widget while navigating to a new page?

flutter

flutter-navigation