如何在Flutter获得当前路线?

时间:2017-09-29 07:33:45

标签: routing navigation flutter

在点击persistent bottom bar中的按钮时实施route need to be restored,之前的bottom bar

单击底栏中的按钮时,将保存其当前路径路径(/a/b/c),并根据按钮单击恢复以前保存的路径。

从概念上讲,用户会将每个按钮视为工作空间,其状态永远不会丢失(包括后台堆栈)。用户可以安全地从一个工作区切换到另一个工作区。

当路由为rewinding to root

时,如何在Flutter中获取当前路径路径

6 个答案:

答案 0 :(得分:6)

NavigatorState不会公开用于获取当前路径路径的API,Route也不会公开用于确定路径路径的API。路线可以(通常是)匿名的。您现在可以使用isCurrent方法查看给定的Route是否位于导航器堆栈的顶部,但这对您的用例来说不是很方便。

我建议您对此问题采取不同的方法,并且根本不回溯到根目录。相反,请为Navigator的每个窗格使用不同的BottomNavigationBar窗口小部件。这样,在窗格之间切换时,您不必倒回堆栈。您可以将Navigator小部件包装在OpacityIgnorePointer小部件中,以便在不破坏其堆栈时隐藏它们。

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

答案 1 :(得分:4)

主要出于存档目的而发布此答案,但是正如@ikben所述,获取当前路线及其所有属性的一种方法是ModalRoute.of(context)。这将返回一个ModalRoute,尽管其名称正确,但它适用于大多数Navigator.push呼叫,而不仅是showDialog。有用的属性包括Route.settingsRoute.navigatorRoute.isFirst

答案 2 :(得分:2)

这应该给您确切的路线名称

import 'package:path/path.dart';

ModalRoute.of(context).settings.name

答案 3 :(得分:1)

要获取当前路线名称示例/ home或/ page,请尝试

ModalRoute.of(context).settings.name

答案 4 :(得分:0)

我找到了一个更简单的解决方案。我喜欢 StatelessWidget 的所以我用静态来做,但你可以用 StatefulWidget 来做。如果您有分层导航,您将需要一个 StatefulWidget。这是我的 NavDrawer 中的一个磁贴。 (静态的名声不好,但在 UI 中还不错,只有一个进程在运行单个线程。)

class NavListTile extends StatelessWidget {
  static String currentRoute = 'dashboard';
  final String route;

  const NavListTile({
    Key? key,
    required this.route,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var isCurrent = currentRoute == route;
    String suffix = isCurrent ? '_green' : '';
    return ListTile(
      title: NavMenuItem(capitalizedRoute, isCurrent,
          "assets/images/" + route + suffix + ".png", context),
      onTap: () {
        currentRoute = route;
        Navigator.of(context).pushNamed('/' + route);
      },
    );
  }
}

答案 5 :(得分:0)

如果您想通过使用导航键获取当前路线,可以使用 popUntil 方法:

String? currentPath;
navigatorKey.currentState?.popUntil((route) {
  currentPath = route.settings.name;
  return true;
});