从屏幕返回数据

在某些情况下，您可能需要从新屏幕返回数据。例如，假设您推送一个新屏幕，向用户呈现两个选项。当用户点击一个选项时，您希望将用户的选择告知第一个屏幕，以便它可以根据该信息采取行动。

您可以使用 Navigator.pop() 方法通过以下步骤完成此操作：

1. 定义主屏幕
2. 添加一个启动选择屏幕的按钮
3. 显示带有两个按钮的选择屏幕
4. 当点击按钮时，关闭选择屏幕
5. 在主屏幕上显示带有选择的SnackBar

主屏幕显示一个按钮。点击时，它将启动选择屏幕。

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Returning Data Demo'),
      ),
      // 在下一步中创建 SelectionButton 小部件。
      body: const Center(
        child: SelectionButton(),
      ),
    );
  }
}

现在，创建 SelectionButton，它执行以下操作：

• 点击时启动 SelectionScreen。
• 等待 SelectionScreen 返回结果。

class SelectionButton extends StatefulWidget {
  const SelectionButton({super.key});

  @override
  State<SelectionButton> createState() => _SelectionButtonState();
}

class _SelectionButtonState extends State<SelectionButton> {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        _navigateAndDisplaySelection(context);
      },
      child: const Text('Pick an option, any option!'),
    );
  }

  Future<void> _navigateAndDisplaySelection(BuildContext context) async {
    // Navigator.push 返回一个 Future，该 Future 在 Selection Screen 上调用
    // Navigator.pop 后完成。
    final result = await Navigator.push(
      context,
      // 在下一步中创建 SelectionScreen。
      MaterialPageRoute(builder: (context) => const SelectionScreen()),
    );
  }
}

现在，构建一个包含两个按钮的选择屏幕。当用户点击一个按钮时，该应用将关闭选择屏幕，并让主屏幕知道点击了哪个按钮。

此步骤定义 UI。下一步添加返回数据的代码。

class SelectionScreen extends StatelessWidget {
  const SelectionScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Pick an option'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.all(8),
              child: ElevatedButton(
                onPressed: () {
                  // 使用“Yep”弹出...
                },
                child: const Text('Yep!'),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8),
              child: ElevatedButton(
                onPressed: () {
                  // 使用“Nope”弹出...
                },
                child: const Text('Nope.'),
              ),
            )
          ],
        ),
      ),
    );
  }
}

现在，更新两个按钮的 onPressed() 回调。要将数据返回到第一个屏幕，请使用 Navigator.pop() 方法，该方法接受一个名为 result 的可选第二个参数。任何结果都将返回到 SelectionButton 中的 Future。

ElevatedButton(
  onPressed: () {
    // 关闭屏幕并返回“Yep!”作为结果。
    Navigator.pop(context, 'Yep!');
  },
  child: const Text('Yep!'),
)

ElevatedButton(
  onPressed: () {
    // 关闭屏幕并返回“Nope.”作为结果。
    Navigator.pop(context, 'Nope.');
  },
  child: const Text('Nope.'),
)

现在您正在启动选择屏幕并等待结果，您需要对返回的信息执行某些操作。

在这种情况下，通过使用 SelectionButton 中的 _navigateAndDisplaySelection() 方法，显示一个显示结果的SnackBar：

// 启动 SelectionScreen 并等待 Navigator.pop 返回结果的方法。
Future<void> _navigateAndDisplaySelection(BuildContext context) async {
  // Navigator.push 返回一个 Future，该 Future 在 Selection Screen 上调用
  // Navigator.pop 后完成。
  final result = await Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => const SelectionScreen()),
  );

  // 当从 StatefulWidget 使用 BuildContext 时，必须在异步间隔后检查 mounted 属性。
  if (!context.mounted) return;

  // 选择屏幕返回结果后，隐藏任何之前的 SnackBar 并显示新的结果。
  ScaffoldMessenger.of(context)
    ..removeCurrentSnackBar()
    ..showSnackBar(SnackBar(content: Text('$result')));
}

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      title: 'Returning Data',
      home: HomeScreen(),
    ),
  );
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Returning Data Demo'),
      ),
      body: const Center(
        child: SelectionButton(),
      ),
    );
  }
}

class SelectionButton extends StatefulWidget {
  const SelectionButton({super.key});

  @override
  State<SelectionButton> createState() => _SelectionButtonState();
}

class _SelectionButtonState extends State<SelectionButton> {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        _navigateAndDisplaySelection(context);
      },
      child: const Text('Pick an option, any option!'),
    );
  }

  // 启动 SelectionScreen 并等待 Navigator.pop 返回结果的方法。
  Future<void> _navigateAndDisplaySelection(BuildContext context) async {
    // Navigator.push 返回一个 Future，该 Future 在 Selection Screen 上调用
    // Navigator.pop 后完成。
    final result = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const SelectionScreen()),
    );

    // 当从 StatefulWidget 使用 BuildContext 时，必须在异步间隔后检查 mounted 属性。
    if (!context.mounted) return;

    // 选择屏幕返回结果后，隐藏任何之前的 SnackBar 并显示新的结果。
    ScaffoldMessenger.of(context)
      ..removeCurrentSnackBar()
      ..showSnackBar(SnackBar(content: Text('$result')));
  }
}

class SelectionScreen extends StatelessWidget {
  const SelectionScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Pick an option'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8),
              child: ElevatedButton(
                onPressed: () {
                  // 关闭屏幕并返回“Yep!”作为结果。
                  Navigator.pop(context, 'Yep!');
                },
                child: const Text('Yep!'),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8),
              child: ElevatedButton(
                onPressed: () {
                  // 关闭屏幕并返回“Nope.”作为结果。
                  Navigator.pop(context, 'Nope.');
                },
                child: const Text('Nope.'),
              ),
            )
          ],
        ),
      ),
    );
  }
}

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