Flutter中如何通过TextField在页面间传递参数？

问题根源 #

1. _zipController 是 NewAddress 组件内部的私有变量，无状态的 StartScreen 无法直接访问，因此会提示未定义。
2. DataScreen 的参数接收逻辑有误，需要用标准的构造函数传参方式来获取值。

正确实现步骤 #

1. 给NewAddress组件添加回调，暴露输入的邮编值

修改 NewAddress，新增一个回调函数，用于把输入的邮政编码传递给父组件 StartScreen：

class NewAddress extends StatefulWidget {
  // 定义回调，传递输入的邮编
  final Function(String) onZipCodeUpdated;

  const NewAddress({super.key, required this.onZipCodeUpdated});

  @override
  State<NewAddress> createState() => _NewAddressState();
}

class _NewAddressState extends State<NewAddress> {
  final TextEditingController _zipController = TextEditingController();

  @override
  void initState() {
    super.initState();
    // 监听输入框变化，实时把值传给父组件
    _zipController.addListener(() {
      widget.onZipCodeUpdated(_zipController.text);
    });
  }

  @override
  void dispose() {
    // 记得销毁控制器，避免内存泄漏
    _zipController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _zipController,
      keyboardType: TextInputType.number,
      decoration: const InputDecoration(labelText: '邮政编码'),
    );
  }
}

2. 在StartScreen中接收并保存邮编，跳转时传递给DataScreen

这里提供两种实现方式，你可以根据需求选择：

方式一：将StartScreen改为有状态组件

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

  @override
  State<StartScreen> createState() => _StartScreenState();
}

class _StartScreenState extends State<StartScreen> {
  String _currentZipCode = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('起始页')),
      body: Column(
        children: [
          NewAddress(
            onZipCodeUpdated: (zipCode) {
              setState(() {
                _currentZipCode = zipCode;
              });
            },
          ),
          ElevatedButton(
            onPressed: () {
              // 跳转时把保存的邮编传给DataScreen
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => DataScreen(zipCode: _currentZipCode),
                ),
              );
            },
            child: const Text('跳转到数据页'),
          ),
        ],
      ),
    );
  }
}

方式二：保持StartScreen为无状态，用ValueNotifier管理状态

class StartScreen extends StatelessWidget {
  StartScreen({super.key});

  // 用ValueNotifier管理临时状态
  final ValueNotifier<String> _zipCodeNotifier = ValueNotifier('');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('起始页')),
      body: Column(
        children: [
          NewAddress(
            onZipCodeUpdated: (zipCode) {
              _zipCodeNotifier.value = zipCode;
            },
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => DataScreen(zipCode: _zipCodeNotifier.value),
                ),
              );
            },
            child: const Text('跳转到数据页'),
          ),
        ],
      ),
    );
  }
}

3. 正确实现DataScreen接收并展示邮编

DataScreen 通过构造函数接收邮编参数，直接使用即可：

class DataScreen extends StatelessWidget {
  // 声明必填的邮编参数
  final String zipCode;

  const DataScreen({super.key, required this.zipCode});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('数据页')),
      body: Center(
        child: Text('收到的邮政编码：$zipCode'),
      ),
    );
  }
}

额外补充 #

如果不想实时监听输入框变化，也可以通过 GlobalKey 让 StartScreen 主动获取 NewAddress 里的邮编值，不过回调的方式更符合Flutter的状态管理最佳实践。

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