web-dev-qa-db-fra.com

Comment obtenir le chemin de l'itinéraire actuel à Flutter?

Lors de l'implémentation barre inférieure persistante , la précédente la route doit être restaurée lorsqu'un bouton dans la barre inférieure a été cliqué.

Lorsqu'un bouton dans la barre inférieure est cliqué, son chemin d'itinéraire actuel ( / a/b/c ) est enregistré et l'itinéraire précédemment enregistré est restauré en fonction du clic du bouton.

Conceptuellement, l'utilisateur considérera chaque bouton comme un espace de travail et son état ne sera jamais perdu (y compris la pile arrière). L'utilisateur peut passer en toute sécurité d'un espace de travail à un autre.

Comment obtenir le chemin de l'itinéraire actuel dans Flutter, lorsque le routage est rembobinage à la racine ?

routingnavigationflutter
17
Kyaw Tun

NavigatorState n'expose pas d'API pour obtenir le chemin de l'itinéraire actuel, et Route n'expose pas non plus d'API pour déterminer le chemin d'un itinéraire. Les itinéraires peuvent être (et sont souvent) anonymes. Vous pouvez savoir si un Route donné est en haut de la pile du navigateur en utilisant la méthode isCurrent , mais ce n'est pas très pratique pour votre utilisation Cas.

Je recommanderais que vous adoptiez une approche différente de ce problème et que vous ne rembobiniez pas du tout à la racine. À la place, utilisez un widget Navigator différent pour chaque volet du BottomNavigationBar. De cette façon, vous n'aurez pas à rembobiner la pile lors du basculement entre les volets. Vous pouvez encapsuler vos widgets Navigator dans Opacity et IgnorePointer widgets pour les masquer lorsqu'ils ne sont pas censés être visible sans détruire leur pile.

app video

import 'package:flutter/material.Dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class SecurePage extends StatelessWidget {
  final int index;

  SecurePage(this.index);

  Widget build(BuildContext context) {
    return new Material(
      color: Colors.amber,
      child: new InkWell(
        child: new Center(
          child: new Icon(
            Icons.security,
            color: Colors.white,
            size: index * 100.0 + 20.0,
          ),
        ),
        onTap: () {
          Navigator.of(context).Push(
            new MaterialPageRoute(
              builder: (BuildContext context) {
                return new SecurePage(index + 1);
              },
            ),
          );
        },
      ),
    );
  }
}

class VerifiedPage extends StatelessWidget {
  final int index;

  VerifiedPage(this.index);

  Widget build(BuildContext context) {
    return new Material(
      color: Colors.green,
      child: new InkWell(
        child: new Center(
          child: new Icon(
            Icons.verified_user,
            color: Colors.white,
            size: index * 100.0 + 20.0,
          ),
        ),
        onTap: () {
          Navigator.of(context).Push(
            new MaterialPageRoute(
              builder: (BuildContext context) {
                return new VerifiedPage(index + 1);
              },
            ),
          );
        },
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  int _page = 0;
  List<Widget> initialWidgets = <Widget>[
    new SecurePage(0),
    new VerifiedPage(0),
  ];

  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Stack(
        children: new List<Widget>.generate(initialWidgets.length, (int index) {
          return new IgnorePointer(
            ignoring: index != _page,
            child: new Opacity(
              opacity: _page == index ? 1.0 : 0.0,
              child: new Navigator(
                onGenerateRoute: (RouteSettings settings) {
                  return new MaterialPageRoute(
                    builder: (_) => initialWidgets[index],
                  );
                },
              ),
            ),
          );
        }),
      ),
      bottomNavigationBar: new BottomNavigationBar(
        currentIndex: _page,
        onTap: (int index) {
          setState(() {
            _page = index;
          });
        },
        items: <BottomNavigationBarItem>[
          new BottomNavigationBarItem(
            icon: new Icon(Icons.security),
            title: new Text('Secure'),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.verified_user),
            title: new Text('Verified'),
          ),
        ],
      ),
    );
  }
}
10
Collin Jackson

Cela devrait vous donner le nom exact de l'itinéraire

import 'package:path/path.Dart';

ModalRoute.of(context).settings.name
10
ikben

Publier cette réponse principalement à des fins d'archivage, mais comme @ikben l'a mentionné, une façon d'obtenir l'itinéraire actuel et toutes ses propriétés est ModalRoute.of(context). Cela renvoie un ModalRoute , qui malgré son nom, s'applique à la plupart des Navigator.Push appels, pas seulement showDialog. Les propriétés utiles incluent Route.settings , Route.navigator et Route.isFirst .

2
Levi Lesches