Flutter中从ScreenA跳转至ScreenB并返回数据的正确方法

1. ScreenA 接收返回数据并更新UI #

ScreenA中，你需要利用Navigator.push返回的Future，结合async/await获取返回值，再通过setState触发UI更新：

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

  @override
  State<ScreenA> createState() => _ScreenAState();
}

class _ScreenAState extends State<ScreenA> {
  String? _receivedText;

  void _navigateToScreenB() async {
    // 等待ScreenB关闭并返回数据
    final result = await Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => const ScreenB()),
    );

    // 拿到结果后更新UI
    if (result != null) {
      setState(() {
        _receivedText = result as String;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Screen A')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(_receivedText ?? '暂无返回数据'),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _navigateToScreenB,
              child: const Text('跳转到Screen B'),
            ),
          ],
        ),
      ),
    );
  }
}

2. ScreenB 返回输入的文本 #

在ScreenB中，通过Navigator.pop(context, 数据)将输入框的内容返回给ScreenA：

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

  @override
  State<ScreenB> createState() => _ScreenBState();
}

class _ScreenBState extends State<ScreenB> {
  final _textController = TextEditingController();

  @override
  void dispose() {
    _textController.dispose();
    super.dispose();
  }

  void _sendDataBack() {
    // 携带输入文本关闭页面，返回给上一级
    Navigator.pop(context, _textController.text);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Screen B')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: _textController,
              decoration: const InputDecoration(hintText: '输入要返回的文本'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _sendDataBack,
              child: const Text('返回数据到Screen A'),
            ),
          ],
        ),
      ),
    );
  }
}

核心要点 #

• Navigator.push返回Future<T?>，await可以等待页面关闭后拿到返回结果，这是Flutter导航传值的标准方式。
• 必须通过setState更新ScreenA的UI，因为Flutter只有在组件状态变化时才会重新构建界面。
• 全局变量传值属于不良实践，会导致状态追踪困难，不符合Flutter的状态管理规范。

内容的提问来源于stack exchange，提问作者Navneet Panchayan