Flutter中TextFormField联动赋值问题求助

核心实现思路 #

通过TextEditingController监听第一个输入框的内容变化，实时计算并更新第二个输入框的控制器值，实现联动效果。

完整代码示例 #

import 'package:flutter/material.dart';

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

  @override
  State<LinkedTextFields> createState() => _LinkedTextFieldsState();
}

class _LinkedTextFieldsState extends State<LinkedTextFields> {
  late final TextEditingController _firstController;
  late final TextEditingController _secondController;

  @override
  void initState() {
    super.initState();
    _firstController = TextEditingController();
    _secondController = TextEditingController();
    
    // 添加监听，实时响应第一个输入框的内容变化
    _firstController.addListener(_updateSecondField);
  }

  void _updateSecondField() {
    final inputValue = _firstController.text;
    // 这里是联动逻辑：输入1时显示2，可根据需求修改规则
    if (inputValue == '1') {
      _secondController.text = '2';
    } else {
      // 其他情况可以清空或设置默认值
      _secondController.text = '';
    }
  }

  @override
  void dispose() {
    _firstController.dispose();
    _secondController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('输入框联动示例')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextFormField(
              controller: _firstController,
              decoration: const InputDecoration(labelText: '第一个输入框'),
              keyboardType: TextInputType.number,
            ),
            const SizedBox(height: 16),
            TextFormField(
              controller: _secondController,
              decoration: const InputDecoration(labelText: '第二个输入框'),
              // 如果不需要手动修改第二个输入框，设置readOnly为true
              readOnly: true,
            ),
          ],
        ),
      ),
    );
  }
}

关键说明 #

• 使用TextEditingController分别绑定两个输入框，通过addListener监听第一个控制器的内容变化
• 在监听回调_updateSecondField中实现自定义的联动规则，比如输入1时设置第二个输入框为2
• 记得在组件销毁时调用dispose()释放控制器资源，避免内存泄漏
• 如果第二个输入框不需要手动编辑，可设置readOnly: true提升用户体验

更新：看到你已经解决了问题，恭喜！如果后续有其他Flutter相关的问题，欢迎再来提问。

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