当前位置：首页 > news >正文

Flutter基础（路由页面跳转）

news 来源：原创 2025/6/29 6:26:14

基础路由表配置

直接使用 routes 属性定义简单路由（无需传参）：

MaterialApp(initialRoute: '/', // 初始页面routes: {'/': (context) => HomePage(),         // 首页'/detail': (context) => DetailPage(), // 详情页'/profile': (context) => ProfilePage(),},onUnknownRoute: (settings) =>        // 处理未定义路由MaterialPageRoute(builder: (_) => NotFoundPage()),
);

基础跳转实现

在按钮的 onPressed 回调中调用 Navigator.pushNamed，传入当前 context 和注册的路由路径：

// 在 HomePage 的按钮跳转到详情页
ElevatedButton(onPressed: () {Navigator.pushNamed(context, '/detail'); // 使用命名路由跳转},child: Text('进入详情页'),
);// 在详情页跳转到个人页
ElevatedButton(onPressed: () {Navigator.pushNamed(context, '/profile');},child: Text('进入个人页'),
);

带参数跳转（高级用法）

若需向目标页面传递数据（如商品ID），需结合 arguments 属性和路由解析：

步骤：

跳转时传递参数：

Navigator.pushNamed(context,'/detail',arguments: {'id': 1001, 'title': '商品详情'}, // 动态数据
);

目标页面接收参数（需修改路由表注册方式）：
使用 onGenerateRoute 替代 routes，解析参数并初始化页面。

MaterialApp(onGenerateRoute: (RouteSettings settings) {switch (settings.name) {case '/detail':final args = settings.arguments as Map<String, dynamic>; // 类型转换return MaterialPageRoute(builder: (_) => DetailPage(id: args['id'], title: args['title']),);// 其他路由...}},
);