向新屏幕发送数据
通常，你不仅想导航到新屏幕，还想向屏幕传递数据。例如，你可能想传递关于被点击项目的信息。
记住：屏幕只是小部件。在这个例子中，创建一个 Todo 列表。当一个 Todo 被点击时，导航到一个新屏幕（小部件），该屏幕显示关于该 Todo 的信息。本指南使用以下步骤：
- 定义一个 Todo 类。
- 显示一个 Todo 列表。
- 创建一个详细信息屏幕，可以显示关于 Todo 的信息。
- 导航并传递数据到详细信息屏幕。
1. 定义一个 Todo 类
#首先，你需要一种简单的方式来表示 Todo。在这个例子中，创建一个包含两个数据片段的类：标题和描述。
dart
class Todo {
final String title;
final String description;
const Todo(this.title, this.description);
}2. 创建一个 Todo 列表
#其次，显示一个 Todo 列表。在这个例子中，生成 20 个 Todo 并使用 ListView 显示它们。有关列表的更多信息，请参阅使用列表指南。
生成 Todo 列表
#dart
final todos = List.generate(
20,
(i) => Todo(
'Todo $i',
'A description of what needs to be done for Todo $i',
),
);使用 ListView 显示 Todo 列表
#dart
ListView.builder(
itemCount: todos.length,
itemBuilder: (context, index) {
return ListTile(title: Text(todos[index].title));
},
)到目前为止，一切顺利。这将生成 20 个 Todo 并将它们显示在 ListView 中。
3. 创建一个 Todo 屏幕来显示列表
#为此，我们创建一个 StatelessWidget。我们称之为 TodosScreen。由于此页面的内容在运行时不会改变，我们将在此小部件的范围内要求 Todo 列表。
我们将 ListView.builder 作为我们返回给 build() 的小部件的主体传递。这将把列表渲染到屏幕上，供你开始使用！
dart
class TodosScreen extends StatelessWidget {
// Requiring the list of todos.
const TodosScreen({super.key, required this.todos});
final List<Todo> todos;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Todos')),
//passing in the ListView.builder
body: ListView.builder(
itemCount: todos.length,
itemBuilder: (context, index) {
return ListTile(title: Text(todos[index].title));
},
),
);
}
}使用 Flutter 的默认样式，你可以轻松地完成工作，而不必为以后想做的事情而烦恼！
4. 创建一个详细信息屏幕来显示 Todo 的信息
#现在，创建第二个屏幕。屏幕的标题包含 Todo 的标题，屏幕的主体显示描述。
由于详细信息屏幕是一个普通的 StatelessWidget，因此要求用户在 UI 中输入一个 Todo。然后，使用给定的 Todo 构建 UI。
dart
class DetailScreen extends StatelessWidget {
// In the constructor, require a Todo.
const DetailScreen({super.key, required this.todo});
// Declare a field that holds the Todo.
final Todo todo;
@override
Widget build(BuildContext context) {
// Use the Todo to create the UI.
return Scaffold(
appBar: AppBar(title: Text(todo.title)),
body: Padding(
padding: const EdgeInsets.all(16),
child: Text(todo.description),
),
);
}
}5. 导航并传递数据到详细信息屏幕
#有了 DetailScreen，你就可以执行导航了。在这个例子中，当用户点击列表中的一个 Todo 时，导航到 DetailScreen。将 Todo 传递给 DetailScreen。
要在 TodosScreen 中捕获用户的点击，请为 ListTile 小部件编写一个onTap() 回调。在 onTap() 回调中，使用Navigator.push() 方法。
dart
body: ListView.builder(
itemCount: todos.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(todos[index].title),
// When a user taps the ListTile, navigate to the DetailScreen.
// Notice that you're not only creating a DetailScreen, you're
// also passing the current todo through to it.
onTap: () {
Navigator.push(
context,
MaterialPageRoute<void>(
builder: (context) => DetailScreen(todo: todos[index]),
),
);
},
);
},
),互动示例
#import 'package:flutter/material.dart';
class Todo {
final String title;
final String description;
const Todo(this.title, this.description);
}
void main() {
runApp(
MaterialApp(
title: 'Passing Data',
home: TodosScreen(
todos: List.generate(
20,
(i) => Todo(
'Todo $i',
'A description of what needs to be done for Todo $i',
),
),
),
),
);
}
class TodosScreen extends StatelessWidget {
const TodosScreen({super.key, required this.todos});
final List<Todo> todos;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Todos')),
body: ListView.builder(
itemCount: todos.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(todos[index].title),
// When a user taps the ListTile, navigate to the DetailScreen.
// Notice that you're not only creating a DetailScreen, you're
// also passing the current todo through to it.
onTap: () {
Navigator.push(
context,
MaterialPageRoute<void>(
builder: (context) => DetailScreen(todo: todos[index]),
),
);
},
);
},
),
);
}
}
class DetailScreen extends StatelessWidget {
// In the constructor, require a Todo.
const DetailScreen({super.key, required this.todo});
// Declare a field that holds the Todo.
final Todo todo;
@override
Widget build(BuildContext context) {
// Use the Todo to create the UI.
return Scaffold(
appBar: AppBar(title: Text(todo.title)),
body: Padding(
padding: const EdgeInsets.all(16),
child: Text(todo.description),
),
);
}
}
或者，使用 RouteSettings 传递参数
#重复前两个步骤。
创建详细信息屏幕以提取参数
#接下来，创建一个详细信息屏幕，该屏幕从 Todo 中提取并显示标题和描述。要访问 Todo，请使用ModalRoute.of() 方法。此方法返回带有参数的当前路由。
dart
class DetailScreen extends StatelessWidget {
const DetailScreen({super.key});
@override
Widget build(BuildContext context) {
final todo = ModalRoute.of(context)!.settings.arguments as Todo;
// Use the Todo to create the UI.
return Scaffold(
appBar: AppBar(title: Text(todo.title)),
body: Padding(
padding: const EdgeInsets.all(16),
child: Text(todo.description),
),
);
}
}导航并传递参数到详细信息屏幕
#最后，当用户点击 ListTile 小部件时，使用 Navigator.push() 导航到 DetailScreen。将参数作为 RouteSettings 的一部分传递。DetailScreen 提取这些参数。
dart
ListView.builder(
itemCount: todos.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(todos[index].title),
// When a user taps the ListTile, navigate to the DetailScreen.
// Notice that you're not only creating a DetailScreen, you're
// also passing the current todo through to it.
onTap: () {
Navigator.push(
context,
MaterialPageRoute<void>(
builder: (context) => const DetailScreen(),
// Pass the arguments as part of the RouteSettings. The
// DetailScreen reads the arguments from these settings.
settings: RouteSettings(arguments: todos[index]),
),
);
},
);
},
)完整示例
#dart
import 'package:flutter/material.dart';
class Todo {
final String title;
final String description;
const Todo(this.title, this.description);
}
void main() {
runApp(
MaterialApp(
title: 'Passing Data',
home: TodosScreen(
todos: List.generate(
20,
(i) => Todo(
'Todo $i',
'A description of what needs to be done for Todo $i',
),
),
),
),
);
}
class TodosScreen extends StatelessWidget {
const TodosScreen({super.key, required this.todos});
final List<Todo> todos;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Todos')),
body: ListView.builder(
itemCount: todos.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(todos[index].title),
// When a user taps the ListTile, navigate to the DetailScreen.
// Notice that you're not only creating a DetailScreen, you're
// also passing the current todo through to it.
onTap: () {
Navigator.push(
context,
MaterialPageRoute<void>(
builder: (context) => const DetailScreen(),
// Pass the arguments as part of the RouteSettings. The
// DetailScreen reads the arguments from these settings.
settings: RouteSettings(arguments: todos[index]),
),
);
},
);
},
),
);
}
}
class DetailScreen extends StatelessWidget {
const DetailScreen({super.key});
@override
Widget build(BuildContext context) {
final todo = ModalRoute.of(context)!.settings.arguments as Todo;
// Use the Todo to create the UI.
return Scaffold(
appBar: AppBar(title: Text(todo.title)),
body: Padding(
padding: const EdgeInsets.all(16),
child: Text(todo.description),
),
);
}
}