Flutter中如何将多个TextEditingController关联至单个按钮以清除文本？

核心思路 #

给每个TextField绑定独立的TextEditingController，在按钮点击事件中统一调用所有控制器的清除方法即可。

具体实现步骤 #

• 第一步：在State类中声明并初始化三个TextEditingController实例
• 第二步：将每个控制器分别绑定到对应的TextField的controller参数上
• 第三步：给清除按钮添加点击事件，逐个调用控制器的clear()方法
• 第四步：在页面销毁时（dispose方法）释放所有控制器资源，避免内存泄漏

完整示例代码 #

import 'package:flutter/material.dart';

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

  @override
  State<MultiTextFieldClearDemo> createState() => _MultiTextFieldClearDemoState();
}

class _MultiTextFieldClearDemoState extends State<MultiTextFieldClearDemo> {
  // 声明三个TextEditingController
  final TextEditingController _controller1 = TextEditingController();
  final TextEditingController _controller2 = TextEditingController();
  final TextEditingController _controller3 = TextEditingController();

  // 一键清除方法
  void _clearAllText() {
    _controller1.clear();
    _controller2.clear();
    _controller3.clear();
    // 也可以用_controller.text = '';效果一致
  }

  @override
  void dispose() {
    // 页面销毁时释放控制器
    _controller1.dispose();
    _controller2.dispose();
    _controller3.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: [
            TextField(
              controller: _controller1,
              decoration: const InputDecoration(hintText: '输入框1'),
            ),
            const SizedBox(height: 16),
            TextField(
              controller: _controller2,
              decoration: const InputDecoration(hintText: '输入框2'),
            ),
            const SizedBox(height: 16),
            TextField(
              controller: _controller3,
              decoration: const InputDecoration(hintText: '输入框3'),
            ),
            const SizedBox(height: 32),
            ElevatedButton(
              onPressed: _clearAllText,
              child: const Text('一键清除所有内容'),
            ),
          ],
        ),
      ),
    );
  }
}

额外优化（可选） #

如果需要管理更多输入框，可以把控制器放到一个List中，遍历调用清除方法，代码更简洁：

final List<TextEditingController> _controllers = [
  TextEditingController(),
  TextEditingController(),
  TextEditingController(),
];

void _clearAllText() {
  for (var controller in _controllers) {
    controller.clear();
  }
}

// dispose时也遍历释放
@override
void dispose() {
  for (var controller in _controllers) {
    controller.dispose();
  }
  super.dispose();
}

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