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

✅近期推荐：求职神器

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