如何在 Flutter 的小部件树中将新的 MaterialPageRoute 作为子项打开 [英] How to open new MaterialPageRoute as a child in widget tree in Flutter

问题描述

在下面的示例中，当我推送新的 MaterialPageRoute 时，它​​会在 Flutter 小部件树中的 Home 小部件的同一级别上创建.我想将它作为小部件 Home 的子级，因此 Home 将是 Child 小部件的父级.

In the example below when I push new MaterialPageRoute it is created on the same level as Home widget in the Flutter widget tree. I would like to have it as a child of widget Home, so Home would be a parent of Child widget.

这是完整的代码:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Home(),
  ));
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Center(
            child: Text("This is home"),
          ),
          RaisedButton(
            child: Text("Open child view"),
            onPressed: () {
              Navigator.of(context)
                  .push(MaterialPageRoute(builder: (context) => Child()));
            },
          )
        ],
      ),
    );
  }
}

class Child extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      child: Text("Child view"),
    ));
  }
}

这是小部件树的样子

我想实现这一点，因为我想在 Home 小部件中初始化 ScopedModel 并让它在我创建的每个新 MaterialPageRoute 中都可用.

I want to achieve that because I would like to initialize the ScopedModel in Home widget and have it available in every new MaterialPageRoute I create.

推荐答案

我使用嵌套导航器解决了我的问题.

I solved my issue using nested Navigator.

示例如下:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Home(),
  ));
}

var homeNavigatorKey = GlobalKey<NavigatorState>();

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Navigator(
        key: homeNavigatorKey,
        onGenerateRoute: (settings) {
          /*dirty code for illustration purposes only*/
          if (settings.name == '/child') {
            return MaterialPageRoute(builder: (context) => Child());
          } else {
            return MaterialPageRoute(
                builder: (context) => Column(
                      children: <Widget>[
                        Center(
                          child: Text("This is home"),
                        ),
                        RaisedButton(
                          child: Text("Open child view"),
                          onPressed: () {
                            homeNavigatorKey.currentState.pushNamed('/child');
                          },
                        )
                      ],
                    ));
          }
        },
      ),
    );
  }
}

class Child extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      child: RaisedButton(
        onPressed: () => Navigator.of(context).pop(),
        child: Text("Back to home"),
      ),
    ));
  }
}

这棵树是这样的

并允许将数据从 Home 传递给每个孩子.

and allows for passing data from Home to every child.

如果您有任何更简单的解决方案，请随时发表评论或发布答案.

Feel free to comment or post answers if you have any simpler solution.

这篇关于如何在 Flutter 的小部件树中将新的 MaterialPageRoute 作为子项打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！