✅近期推荐:求职神器
https://bbs.csdn.net/topics/619384540
🔥欢迎大家订阅系列专栏:flutter_鸿蒙next
💬淼学派语录:只有不断的否认自己和肯定自己,才能走出弯曲不平的泥泞路,因为平坦的大路,太tm无趣了!
写在前面
1. 基本路由
基本路由通过 Navigator
类实现。你可以使用 Navigator.push
方法来导航到新页面,使用 Navigator.pop
返回。
Dart
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
@override
Widget 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 {
@override
Widget 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
中定义路由:
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Named Routes Example',
initialRoute: '/',
routes: {
'/': (context) => HomePage(),
'/second': (context) => SecondPage(),
},
);
}
}
导航到命名路由:
Dart
Navigator.pushNamed(context, '/second');
3. 传递参数
3.1 简单参数传递
你可以通过构造函数传递参数。例如:
Dart
class SecondPage extends StatelessWidget {
final String message;
SecondPage({required this.message});
@override
Widget 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 复杂参数传递
在复杂场景中,参数可以是对象。创建一个数据模型并在页面间传递:
Dart
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});
@override
Widget 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
,同时传递返回值:
Dart
final result = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondPage()),
);
// 在 HomePage 中处理返回的结果
print('Received: $result');
5. 动态路由
如果路由参数较多或复杂,使用动态路由可以更加灵活。可以在 onGenerateRoute
中定义路由:
Dart
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 的路由系统强大且灵活,能够满足从简单到复杂的多种需求。通过命名路由、参数传递和动态路由的结合,你可以构建出清晰、易于维护的导航结构。通过上述示例,你可以根据自己的项目需求灵活运用这些路由技巧。