Flutter 中如何使用路由名称进行导航？

推荐答案

在 Flutter 中，可以使用 Navigator.pushNamed 方法通过路由名称进行导航。首先，需要在 MaterialApp 或 CupertinoApp 中定义路由表，然后使用 Navigator.pushNamed 方法进行导航。

// www.javascriptcn.com code example
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/details': (context) => DetailsScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/details');
          },
          child: Text('Go to Details'),
        ),
      ),
    );
  }
}

class DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Details'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back'),
        ),
      ),
    );
  }
}

本题详细解读

1. 定义路由表

在 MaterialApp 或 CupertinoApp 中，可以通过 routes 属性定义路由表。路由表是一个 Map<String, WidgetBuilder>，其中键是路由名称，值是一个返回对应页面的 WidgetBuilder 函数。

routes: {
  '/': (context) => HomeScreen(),
  '/details': (context) => DetailsScreen(),
},

2. 使用 Navigator.pushNamed 进行导航

在需要导航的地方，使用 Navigator.pushNamed 方法并传入上下文和路由名称即可跳转到对应的页面。

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

3. 返回上一页

在目标页面中，可以使用 Navigator.pop 方法返回到上一页。

Navigator.pop(context);

4. 初始路由

可以通过 initialRoute 属性设置应用的初始路由。如果未设置 initialRoute，则默认使用 '/' 作为初始路由。

initialRoute: '/',

5. 路由参数传递

如果需要传递参数，可以使用 Navigator.pushNamed 的 arguments 参数，并在目标页面中通过 ModalRoute.of(context).settings.arguments 获取参数。

Navigator.pushNamed(context, '/details', arguments: 'Hello, Details!');

在目标页面中：

final String message = ModalRoute.of(context).settings.arguments;

通过这种方式，可以在 Flutter 中轻松地使用路由名称进行导航。