Flutter – 使用 RouteSettings 将数据发送到屏幕

在 Flutter 中，可以使用 Navigator 类管理应用程序中不同屏幕之间的导航。Navigator 有自己的堆栈来管理这些屏幕。当您导航到一个新的屏幕时，Navigator 会将该屏幕推入堆栈中。然后您可以返回到前一个屏幕，Navigator 会将其弹出堆栈。这是传统路由模型的一种实现。

然而，在某些情况下，您需要在屏幕之间共享数据。例如，您可能需要在初始屏幕上选择“主题颜色”，然后将该值传递给下一个屏幕以使其适应新的主题。在这些情况下，您将需要使用 RouteSettings 对象将数据传递到下一个屏幕。

RouteSettings 是什么？

RouteSettings 是路由中的一种基类。当您导航到一个新的屏幕时，您可以将 RouteSettings 传递给 Navigator。Navigator 基于传递的 RouteSettings 对象创建 RouteSettings，并将其添加到路由的历史记录中。

RouteSettings 包含以下属性：

• name - 一个字符串，用于标识路由的唯一名称
• arguments - 一个动态对象，用于传递到下一个屏幕的数据

如何使用 RouteSettings？

准备工作

为了演示如何使用 RouteSettings，我们将创建一个 MaterialApp，并定义两个屏幕：HomeScreen 和 DetailScreen。HomeScreen 将显示一个 ListView，其中包含一些项目。当用户单击一个项时，将导航到 DetailScreen，并将该项目的名称传递到 DetailScreen。

首先，我们需要在 pubspec.yaml 文件中添加一个依赖项:

dependencies:
  flutter:
    sdk: flutter

接下来，我们将创建一个名为 main.dart 的文件，并添加以下代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter RouteSettings Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
      routes: {
        '/detail': (context) => DetailScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('Item $index'),
            onTap: () {
              Navigator.pushNamed(
                context,
                '/detail',
                arguments: 'Item $index',
              );
            },
          );
        },
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final String itemName = ModalRoute.of(context).settings.arguments;

    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('You selected:'),
            Text(
              '$itemName',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
    );
  }
}

在上面的代码中，我们首先定义我们的 MyApp 并在其 build 方法中返回 MaterialApp。我们将主题数据设置为蓝色并在主屏幕上显示 HomeScreen。我们还为后面的路由定义了一个命名路由。/ detail 将显示 DetailScreen。

HomeScreen 还包含一个 ListView，其中包含十个 ListTile。单击列表项时，我们将调用 Navigator.pushNamed 方法，并将名称为 / detail 的路由传递给它。我们还传递了列表项的名称作为 arguments。

最后，我们定义 DetailScreen。在其 build 方法中，我们使用 ModalRoute.of(context).settings.arguments 获取传递的项目名称。然后我们在屏幕上显示这个名称。

测试路由和 RouteSettings

让我们运行应用程序并在主屏幕上单击列表项。应该会看到 DetailScreen，其中包含所选项的名称。

结论

使用 RouteSettings 在 Flutter 中传递数据非常容易。您可以将任何类型的对象传递到另一个屏幕，并将数据保存在 RouteSettings 中。在接收端，您可以使用 ModalRoute.of(context).settings 获取 RouteSettings 对象，并从中提取数据。