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

与 UI 的交互是任何应用程序的组成部分。但通常情况下，信息需要从一个屏幕发送到另一个屏幕。例如，假设您需要将有关 UI 的选定或点击组件的数据传递到另一个路由(即页面)。在本文中，我们将通过构建一个简单的应用程序来详细探讨将数据发送到另一个屏幕的过程。

为了更好地理解，我们将构建一个任务备忘录应用程序，在主屏幕上列出所有待处理的任务，当单击任何任务时，任务的相应详细说明会显示在另一个页面上。在这里，我们将把数据从主屏幕(被点击的任务)传递到描述屏幕。

要构建任务备忘录应用程序，请按照以下步骤操作：

• 创建任务类
• 列出主屏幕上的任务
• 通过提取参数设计一个显示任务描述的屏幕
• 将数据传递给点击的任务到描述屏幕

让我们详细研究一下任务。

创建任务类：

定义任务类的简单方法如下所示：

Dart

class Task {
  final String task_name;
  final String description;
  
  Task(this.task_name, this.description);
}

列出任务：

使用ListView生成任务列表。为简单起见，我们将创建一个包含 10 个任务的列表，如下所示：

Dart

final tasks = List.generate(
  10,
  (i) => Task(
    'Task $i',
    'Task Description $i',
  ),
);
  
ListView.builder(
  itemCount: tasks.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(tasks[index].task_name),
    );
  },
);

现在创建一个主屏幕，可以使用StatelessWidget显示列表，如下所示：

Dart

class TodosScreen extends StatelessWidget {
  final List todos;
  
  TodosScreen({Key key, @required this.tasks}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksForGeeks'),
        backgroundColor: Color.green,
      ),
  
      body: ListView.builder(
        itemCount: todos.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(tasks[index].task_name)
          );
        },
      ),
    );
  }
}

通过提取参数设计描述屏幕：

创建一个页面，使用ModelRoute.of() 方法从主屏幕中提取task_name (任务名称)和任务描述作为参数，如下所示：

Dart

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Task task = ModalRoute.of(context).settings.arguments;
    return Scaffold(
      appBar: AppBar(
        title: Text(task.task_name),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(task.description),
      ),
    );
  }
}

将数据传递到描述页面：

现在通过将回调函数分配给使用Navigator 类的Navigator.push()方法的onTap()函数，将description和task_name作为RouteSettings参数传递，如下所示：

Dart

ListView.builder(
  itemCount: tasks.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(tasks[index].task_name),
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => DetailScreen(),
            settings: RouteSettings(
              arguments: tasks[index],
            ),
          ),
        );
      },
    );
  },
),

完整的源代码：

Dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
  
class Task {
  final String task_name;
  final String description;
  
  Todo(this.task_name, this.description);
}
  
void main() {
  runApp(MaterialApp(
    title: 'Passing Data',
    home: TodosScreen(
      tasks: List.generate(
        10,
        (i) => Todo(
          'Task $i',
          'Task Description $i',
        ),
      ),
    ),
  ));
}
  
class TodosScreen extends StatelessWidget {
  final List tasks;
  
  TodosScreen({Key key, @required this.todos}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksForGeeks'),
        backgroundColor: Color.green,
      ),
      body: ListView.builder(
        itemCount: tasks.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(tasks[index].title),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => DetailScreen(),
                  settings: RouteSettings(
                    arguments: tasks[index],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}
  
class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Task task = ModalRoute.of(context).settings.arguments;
    return Scaffold(
      appBar: AppBar(
        title: Text(task.task_name),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(task.description),
      ),
    );
  }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！