向新屏幕发送数据

通常，您不仅希望导航到新屏幕，还希望将数据传递给该屏幕。例如，您可能希望传递有关已点击项的信息。

请记住：屏幕只是 widget。在此示例中，创建一个待办事项列表。当点击一个待办事项时，导航到一个新屏幕 (widget) 来显示有关该待办事项的信息。此开发手册使用以下步骤：

定义一个 todo 类。
显示一个待办事项列表。
创建一个可以显示待办事项信息的详情屏幕。
导航并向详情屏幕传递数据。

首先，您需要一种简单的方式来表示待办事项。在此示例中，创建一个包含两个数据片段的类：标题和描述。

dartclass Todo {
  final String title;
  final String description;

  const Todo(this.title, this.description);
}

其次，显示一个待办事项列表。在此示例中，生成 20 个待办事项并使用 ListView 显示它们。有关使用列表的更多信息，请参阅使用列表开发手册。

dartfinal todos = List.generate(
  20,
  (i) => Todo(
    'Todo $i',
    'A description of what needs to be done for Todo $i',
  ),
);

dartListView.builder(
  itemCount: todos.length,
  itemBuilder: (context, index) {
    return ListTile(title: Text(todos[index].title));
  },
)

到目前为止，一切顺利。这会生成 20 个待办事项并将其显示在 ListView 中。

为此，我们创建一个 StatelessWidget。我们将其命名为 TodosScreen。由于此页面的内容在运行时不会改变，因此我们必须在此 widget 的范围内要求待办事项列表。

我们将 ListView.builder 作为我们返回给 build() 的 widget 的主体。这将在屏幕上渲染列表，以便您开始使用！

dartclass 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 的默认样式，您可以轻松上手，而无需为以后想做的事情烦恼！

现在，创建第二个屏幕。屏幕的标题包含待办事项的标题，屏幕的主体显示描述。

由于详情屏幕是一个普通的 StatelessWidget，因此要求用户在 UI 中输入一个 Todo。然后，使用给定的 todo 构建 UI。

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

有了 DetailScreen，您就可以执行导航了。在此示例中，当用户点击列表中的待办事项时，导航到 DetailScreen。将待办事项传递给 DetailScreen。

为了捕获用户在 TodosScreen 中的点击，为 ListTile widget 编写一个 onTap() 回调。在 onTap() 回调中，使用 Navigator.push() 方法。

dartbody: 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(
            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(
                  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),
      ),
    );
  }
}

重复前两个步骤。

接下来，创建一个详情屏幕，从 Todo 中提取并显示标题和描述。要访问 Todo，请使用 ModalRoute.of() 方法。此方法返回带有参数的当前路由。

dartclass 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 widget 时，使用 Navigator.push() 导航到 DetailScreen。将参数作为 RouteSettings 的一部分传递。DetailScreen 将提取这些参数。

dartListView.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(
            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]),
          ),
        );
      },
    );
  },
)

dartimport '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(
                  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),
      ),
    );
  }
}

此页面内容有帮助吗？

感谢你的反馈！

提供详情

感谢你的反馈！请告诉我们如何改进。

提供详情

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面最后更新于 2025-04-02。查看源文件或报告问题。

1. 定义一个 todo 类

2. 创建一个待办事项列表

生成待办事项列表

使用 ListView 显示待办事项列表

3. 创建一个 Todo 屏幕来显示列表

4. 创建一个详情屏幕来显示待办事项信息

5. 导航并向详情屏幕传递数据

互动示例

或者，使用 RouteSettings 传递参数

创建一个详情屏幕来提取参数

导航并向详情屏幕传递参数

完整示例