Flutter 鸿蒙next中的路由使用详解【基础使用】

✅近期推荐：求职神器

https://bbs.csdn.net/topics/619384540

🔥欢迎大家订阅系列专栏：flutter_鸿蒙next
💬淼学派语录：只有不断的否认自己和肯定自己，才能走出弯曲不平的泥泞路，因为平坦的大路，太tm无趣了！

 写在前面

1. 基本路由

基本路由通过 Navigator 类实现。你可以使用 Navigator.push 方法来导航到新页面，使用 Navigator.pop 返回。

import 'package:flutter/material.dart';class HomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Home Page')),body: Center(child: ElevatedButton(onPressed: () {Navigator.push(context,MaterialPageRoute(builder: (context) => SecondPage()),);},child: Text('Go to Second Page'),),),);}
}class SecondPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Second Page')),body: Center(child: ElevatedButton(onPressed: () {Navigator.pop(context);},child: Text('Back to Home Page'),),),);}
}

2. 命名路由

命名路由允许你以字符串形式定义路由，便于管理和维护。在 MaterialApp 中定义路由：

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Named Routes Example',initialRoute: '/',routes: {'/': (context) => HomePage(),'/second': (context) => SecondPage(),},);}
}

导航到命名路由：

Navigator.pushNamed(context, '/second');

3. 传递参数

3.1 简单参数传递

你可以通过构造函数传递参数。例如：

class SecondPage extends StatelessWidget {final String message;SecondPage({required this.message});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Second Page')),body: Center(child: Text(message)),);}
}// 使用命名路由传递参数
Navigator.push(context,MaterialPageRoute(builder: (context) => SecondPage(message: 'Hello from Home!'),),
);

3.2 复杂参数传递

在复杂场景中，参数可以是对象。创建一个数据模型并在页面间传递：

class User {final String name;final int age;User(this.name, this.age);
}// 在 SecondPage 中接收 User 对象
class SecondPage extends StatelessWidget {final User user;SecondPage({required this.user});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('User Details')),body: Center(child: Text('Name: ${user.name}, Age: ${user.age}')),);}
}// 使用 Navigator 传递 User 对象
Navigator.push(context,MaterialPageRoute(builder: (context) => SecondPage(user: User('Alice', 30)),),
);

4. 返回参数

从一个页面返回参数可以使用 Navigator.pop，同时传递返回值：

final result = await Navigator.push(context,MaterialPageRoute(builder: (context) => SecondPage()),
);// 在 HomePage 中处理返回的结果
print('Received: $result');

5. 动态路由

如果路由参数较多或复杂，使用动态路由可以更加灵活。可以在 onGenerateRoute 中定义路由：

MaterialApp(onGenerateRoute: (settings) {if (settings.name == '/user') {final User user = settings.arguments as User;return MaterialPageRoute(builder: (context) => UserPage(user: user),);}return null; // 其他路由},
);// 使用动态路由
Navigator.pushNamed(context,'/user',arguments: User('Bob', 25),
);

写在最后

Flutter 的路由系统强大且灵活，能够满足从简单到复杂的多种需求。通过命名路由、参数传递和动态路由的结合，你可以构建出清晰、易于维护的导航结构。通过上述示例，你可以根据自己的项目需求灵活运用这些路由技巧。