Verschachteln von Routen mit flattern

Während es technisch möglich ist nest "Navigator", das ist unrecommended hier (wie es bricht Held animation)

Können Sie onGenerateRoute zu bauen verschachtelte 'Routen', die im Fall einer route '/dashboard/Profil", erstellen Sie einen Baum WidgetApp > Dashboard > Profile. Was ich davon ausgehen ist, was Sie zu erreichen versuchen.

Kombiniert mit einer höheren Ordnung-Funktion, können Sie etwas haben, das schafft onGenerateRoute für Sie.

Um eine Ahnung von der code-flow: die NestedRoute vernachlässigt die genauen erstellen des Layouts, lassen es in der builder Methode (z.B. builder: (child) => new Dashboard(child: child),). Beim aufrufen der buildRoute - Methode generieren wir einen PageRouteBuilder für die sehr Instanz von dieser Seite, aber lassen _build verwalten, die Schaffung der Widgets. In _build wir werden entweder die builder wie es ist - oder lass es Blasen die subroute, wird durch Aufruf der angeforderten subroute, ruft seinen eigenen _build. Sobald Sie dies getan haben, werden wir mit der integrierten subroute als argument für unseren generator. Lange Geschichte kurz, Sie rekursiv Tauchen Sie ein in weiter Weg Ebenen zu bauen, ist die Letzte Stufe der route, dann lassen Sie es Aufstieg aus der Rekursion und verwenden Sie das Ergebnis als argument für die äußere Ebene und so weiter.

BuildNestedRoutes tut die schmutzige Arbeit für Sie und analysiert die Listen der NestedRoutes Aufbau der notwendigen RouteSettings.

So, aus dem folgenden Beispiel

Beispiel :

@override
Widget build(BuildContext context) {
  return new MaterialApp(
    initialRoute: '/foo/bar',
    home: const FooBar(),
    onGenerateRoute: buildNestedRoutes(
      [
        new NestedRoute(
          name: 'foo',
          builder: (child) => new Center(child: child),
          subRoutes: [
            new NestedRoute(
              name: 'bar',
              builder: (_) => const Text('bar'),
            ),
            new NestedRoute(
              name: 'baz',
              builder: (_) => const Text('baz'),
            )
          ],
        ),
      ],
    ),
  );
}

Hier können Sie ganz einfach definiert, Ihre verschachtelten Routen (name + zugehörige Komponente).
Und NestedRoute Klasse + buildNestedRoutes Methode sind auf diese Weise definiert :

typedef Widget NestedRouteBuilder(Widget child);

@immutable
class NestedRoute {
  final String name;
  final List<NestedRoute> subRoutes;
  final NestedRouteBuilder builder;

  const NestedRoute({@required this.name, this.subRoutes, @required this.builder});

  Route buildRoute(List<String> paths, int index) {
    return new PageRouteBuilder<dynamic>(
      pageBuilder: (_, __, ___) => _build(paths, index),
    );
  }

  Widget _build(List<String> paths, int index) {
    if (index > paths.length) {
      return builder(null);
    }
    final route = subRoutes?.firstWhere((route) => route.name == paths[index], orElse: () => null);
    return builder(route?._build(paths, index + 1));
  }
}

RouteFactory buildNestedRoutes(List<NestedRoute> routes) {
  return (RouteSettings settings) {
    final paths = settings.name.split('/');
    if (paths.length <= 1) {
      return null;
    }
    final rootRoute = routes.firstWhere((route) => route.name == paths[1]);
    return rootRoute.buildRoute(paths, 2);
  };
}

Diese Weise Ihre Foo und Bar Komponenten nicht eng gekoppelt werden mit Ihren routing-system ; aber noch verschachtelte Routen.
Es ist mehr lesbar, dann haben Sie Ihre Routen abgesetzt, alle über dem Platz. Und Sie werden leicht einen neuen hinzufügen.

Die Muster, die Sie versuchen zu bauen, auch wenn ihm dies zumutbar ist, scheint es nicht dargestellt werden kann out of the box mit Flattern.

BEARBEITEN: das Verhalten, Das Sie erreichen wollen, erfordert die Verwendung von onGenerateRoute, jedoch noch nicht (Jan'18) ordnungsgemäß dokumentiert (doc). Siehe @Darky Antwort um ein Beispiel. Er schlägt vor NestedRouteBuilder und NestedRoute Implementierungen, die Lücke.

Mit klarem Navigator von einer MaterialApp, Routen und Seiten-navigation (nach doc) haben sich zwei wesentliche Merkmale, die leugnen, was Sie erreichen wollen (zumindest direkt). Auf der einen Seite, die Navigator verhält sich wie ein stack, so schieben und knallen Routen, eine auf der Oberseite des nächsten und so weiter, auf der anderen Routen sind entweder Vollbild oder modal - das heißt, Sie besetzen den Bildschirm teilweise, aber Sie hemmen die Interaktion mit den widgets unter. Mehr explizite, Ihr Paradigma zu verlangen scheint die gleichzeitige Interaktion mit Seiten, die auf verschiedenen Ebenen im Stapel, die nicht auf diese Weise getan.

Außerdem fühlt es sich wie der Weg Paradigma ist nicht nur eine Hierarchie - Allgemeine frame → spezifische Unterseite - aber in Erster Instanz eine Darstellung der stack im navigator. Ich selbst habe betrogen, aber es wird deutlich Lesen diese:

String initialRoute

final

Den Namen der ersten route zeigen.

Standardmäßig, diese verzögert zu dart:ui.Fenster.defaultRouteName.

Wenn dieser string enthält alle /- Zeichen, dann wird der string split auf
diese Zeichen und Teilstrings vom Anfang der Kette bis zu
jedes solche Zeichen sind, die wiederum als Routen zu schieben.

Zum Beispiel, wenn die route /Aktien/HOOLI wurde als initialRoute,
dann würde der Navigator drücken Sie die folgende Routen am Start: /,
/Bestände /stocks/HOOLI. Dies ermöglicht deep linking, wobei der
Anwendung pflegen Sie eine vorhersehbare route Geschichte.

Einen möglichen workaround, wie daraus folgt, ist, zu nutzen, die Pfadnamen zu instanziieren des Kind-widgets, um einen state-variable, um zu wissen, was um zu zeigen:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new ActionPage(title: 'Flutter Demo Home Page'),
      routes: <String, WidgetBuilder>{
        '/action/plus': (BuildContext context) => new ActionPage(sub: 'plus'),
        '/action/minus': (BuildContext context) => new ActionPage(sub: 'minus'),
      },
    );
  }
}

class ActionPage extends StatefulWidget {
  ActionPage({Key key, this.title, this.sub = 'plus'}) : super(key: key);

  final String title, sub;

  int counter;

  final Map<String, dynamic> subroutes = {
    'plus': (BuildContext context, int count, dynamic setCount) =>
        new PlusSubPage(count, setCount),
    'minus': (BuildContext context, int count, dynamic setCount) =>
        new MinusSubPage(count, setCount),
  };

  @override
  ActionPageState createState() => new ActionPageState();
}

class ActionPageState extends State<ActionPage> {
  int _main_counter = 0;

  String subPageState;

  @override
  void initState() {
    super.initState();
    subPageState = widget.sub;
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('Testing subpages'),
          actions: <Widget>[
            new FlatButton(
                child: new Text('+1'),
                onPressed: () {
                  if (subPageState != 'plus') {
                    setState(() => subPageState = 'plus');
                    setState(() => null);
                  }
                }),
            new FlatButton(
                child: new Text('-1'),
                onPressed: () {
                  if (subPageState != 'minus') {
                    setState(() => subPageState = 'minus');
                    setState(() => null);
                  }
                }),
          ],
        ),
        body: widget.subroutes[subPageState](context, _main_counter, (count) {
          _main_counter = count;
        }));
  }
}

class PlusSubPage extends StatefulWidget {
  PlusSubPage(this.counter, this.setCount);
  final setCount;
  final int counter;
  @override
  _PlusSubPageState createState() => new _PlusSubPageState();
}

class _PlusSubPageState extends State<PlusSubPage> {
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    _counter = widget.counter;
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
      widget.setCount(_counter);
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new IconButton(
            icon: const Icon(Icons.add),
            onPressed: _incrementCounter,
          ),
          new Text(
            'You have pushed the button this many times:',
          ),
          new Text(
            '$_counter',
            style: Theme.of(context).textTheme.display1,
          ),
        ],
      ),
    );
  }
}

class MinusSubPage extends StatefulWidget {
  MinusSubPage(this.counter, this.setCount);
  final setCount;
  final int counter;
  @override
  _MinusSubPageState createState() => new _MinusSubPageState();
}

class _MinusSubPageState extends State<MinusSubPage> {
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    _counter = widget.counter;
  }

  void _decrementCounter() {
    setState(() {
      _counter--;
      widget.setCount(_counter);
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new IconButton(
            icon: const Icon(Icons.remove),
            onPressed: _decrementCounter,
          ),
          new Text(
            'You have pushed the button this many times:',
          ),
          new Text(
            '$_counter',
            style: Theme.of(context).textTheme.display1,
          ),
        ],
      ),
    );
  }
}

Jedoch ist dies keine stack-Speicher auf dem niedrigeren Niveau. In Fall, dass Sie behandeln möchten, die Reihenfolge der subroutes-widget - Sie können wickeln Sie die subroute container in einem WillPopScope, zu definieren, was es tun soll, wenn der Benutzer drückt back - Taste, und speichern Sie die Reihenfolge der subroutes in einem Stapel. Aber ich fühle mich nicht wie suggeriert so eine Sache.

Mein letzten Vorschlag ist die Implementierung von einfachen Strecken - ohne "Stufen" -, verwalten von benutzerdefinierten übergänge zum ausblenden der Veränderung der "äußeren" layout und übergeben Sie die Daten durch die Seiten, oder halten Sie in eine richtige Klasse bietet Ihnen app-Zustand.

PS: check auch Held Animationen, Sie können Ihnen die Kontinuität, die Sie suchen zwischen den Ansichten.