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

写在前面

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

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'),
),
),
);
}
}

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

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(),
},
);
}
}

导航到命名路由：

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

1. 传递参数
   3.1 简单参数传递
   你可以通过构造函数传递参数。例如：

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 复杂参数传递
在复杂场景中，参数可以是对象。创建一个数据模型并在页面间传递：

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)),
),
);

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

final result = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondPage()),
);

// 在 HomePage 中处理返回的结果
print('Received: $result');

1. 动态路由
   如果路由参数较多或复杂，使用动态路由可以更加灵活。可以在 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 的路由系统强大且灵活，能够满足从简单到复杂的多种需求。通过命名路由、参数传递和动态路由的结合，你可以构建出清晰、易于维护的导航结构。通过上述示例，你可以根据自己的项目需求灵活运用这些路由技巧。
————————————————

                        版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/lbcyllqj/article/details/143196729