Flutter 中如何处理返回结果？

推荐答案

在 Flutter 中，处理返回结果通常通过 Navigator.push 和 Navigator.pop 方法来实现。具体步骤如下：

1. 发送数据到新页面：

   • 使用 Navigator.push 方法导航到新页面，并通过 MaterialPageRoute 传递参数。
   • 示例代码：

     final result = await Navigator.push(
       context,
       MaterialPageRoute(
         builder: (context) => NewPage(),
       ),
     );
     print('返回结果: $result');

2. 从新页面返回数据：

   • 在新页面中，使用 Navigator.pop 方法返回数据。
   • 示例代码：

     Navigator.pop(context, '返回的数据');

3. 处理返回结果：

   • 在发起导航的页面中，使用 await 等待返回结果，并在 Navigator.push 的返回值中获取数据。

本题详细解读

1. 发送数据到新页面

在 Flutter 中，Navigator.push 方法用于导航到新页面。通过 MaterialPageRoute，可以将数据传递到新页面。Navigator.push 返回一个 Future，该 Future 会在新页面返回时完成，并携带返回的数据。

2. 从新页面返回数据

在新页面中，使用 Navigator.pop 方法可以返回数据。Navigator.pop 的第二个参数是返回的数据，可以是任意类型的数据（如字符串、对象等）。当调用 Navigator.pop 时，页面会关闭，并将数据传递回发起导航的页面。

3. 处理返回结果

在发起导航的页面中，使用 await 关键字等待 Navigator.push 的返回值。这个返回值就是新页面通过 Navigator.pop 返回的数据。通过这种方式，可以在页面之间传递和处理数据。

示例代码

// www.javascriptcn.com code example
// 发起导航的页面
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            final result = await Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => NewPage(),
              ),
            );
            print('返回结果: $result');
          },
          child: Text('跳转到新页面'),
        ),
      ),
    );
  }
}

// 新页面
class NewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('New Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context, '返回的数据');
          },
          child: Text('返回数据'),
        ),
      ),
    );
  }
}

在这个示例中，HomePage 通过 Navigator.push 导航到 NewPage，并在 NewPage 中通过 Navigator.pop 返回数据。HomePage 使用 await 等待返回结果，并在控制台中打印返回的数据。