Flutter – 将数据发送到屏幕

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

设计描述屏幕：

再次使用StatelessWidget为描述页面创建路由。屏幕的标题栏应显示task_name (任务名称)，正文应包含任务的描述，如下所示：

Dart

class DetailScreen extends StatelessWidget {
  
  final Task task;
  
  DetailScreen({Key key, @required this.todo}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(task.task_name),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(task.description),
      ),
    );
  }
}

将数据传递到描述页面：

这里我们将给onTap()函数分配一个回调函数，该函数使用Navigator claas 的Navigator.push()方法将数据传递到描述屏幕，如下所示：

Dart

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

完整的源代码：

Dart

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

输出：

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

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