flutter路由管理
正在加载今日诗词....
2024-05-02

Flutter 路由管理也称为导航管理,Android 和 IOS 相同,都是维护一个路由栈。

MaterialPageRoute

MaterialPageRoute 是 Material 提供的组件,针对不同平台,实现不同的切换动画,表示占有整个屏幕空间的一个模态路由页面

MaterialPageRoute({
  WidgetBuilder builder, // 返回新路由的实例
  RouteSettings settings, // 路由的配置信息,如路由名称、是否初始路由(首页)
  bool maintainState = true, // 原路由是否要保存在内存中
  bool fullscreenDialog = false, // 是否全屏模态对话框
})

路由管理组件

// 压栈处理
Navigator.push(
  context,  // build 方法的参数
  MaterialPageRoute(builder: (_) => SecondPage()),
)
// 出栈
Navigator.pop(context);

路由传参

// 压栈处理
var result = await Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) {
      return TipRoute(
        // 路由参数
        text: "我是提示xxxx",
      );
    },
  ),
);
//输出`TipRoute`路由返回结果
print("路由返回值: $result");

// TipRoute
class TipRoute extends StatelessWidget {
  TipRoute({
    super.key,
    required this.text, // 接收一个text参数
  });
Navigator.pop(context, "我是返回值")

命名路由

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(primarySwatch: Colors.blue),
  //名为"/"的路由作为应用的home(首页)
  initialRoute:"/",
  //注册路由表
  routes:{
    "new_page":(context) => NewRoute(),
    "/":(context) => MyHomePage(title: '首页'), //注册首页路由
  },
);
// 跳转
Navigator.pushNamed(context, "new_page");
Navigator.pushReplacementNamed(context, "new_page");
// 参数传递
Navigator.pushNamed(context, "new_page", arguments: "hi");

Widget build(BuildContext context) {
  var args = ModalRoute.of(context).settings.arguments; // "hi"

路由守卫

MaterialApp(
  ... //省略无关代码
  onGenerateRoute:(RouteSettings settings){
    return MaterialPageRoute(builder: (context){
      String routeName = settings.name;
      // 如果访问的路由页需要登录,但当前未登录,则直接返回登录页路由。
    }
  );
  }
);

京ICP备2022027737号
Copyright © 2022 - present @wangxiang

  • ☀️
  • 🌑