flutter路由管理 - 翔子的博客

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

MaterialPageRoute#

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

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

Navigator#

路由管理组件

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

路由传参#

1
// 压栈处理
2
var result = await Navigator.push(
3
  context,
4
  MaterialPageRoute(
5
    builder: (context) {
6
      return TipRoute(
7
        // 路由参数
8
        text: "我是提示xxxx",
9
      );
10
    },
11
  ),
12
);
13
//输出`TipRoute`路由返回结果
14
print("路由返回值: $result");
15

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

命名路由#

1
MaterialApp(
2
  title: 'Flutter Demo',
3
  theme: ThemeData(primarySwatch: Colors.blue),
4
  //名为"/"的路由作为应用的home(首页)
5
  initialRoute:"/",
6
  //注册路由表
7
  routes:{
8
    "new_page":(context) => NewRoute(),
9
    "/":(context) => MyHomePage(title: '首页'), //注册首页路由
10
  },
11
);
12
// 跳转
13
Navigator.pushNamed(context, "new_page");
14
Navigator.pushReplacementNamed(context, "new_page");
15
// 参数传递
16
Navigator.pushNamed(context, "new_page", arguments: "hi");
17
@override
18
Widget build(BuildContext context) {
19
  var args = ModalRoute.of(context).settings.arguments; // "hi"

路由守卫#

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

音乐

音乐

MaterialPageRoute#

Navigator#

路由传参#

命名路由#

路由守卫#

音乐

文章目录