Flutter如何根据TextField输入值动态修改ElevatedButton显示文本

直接给输入框加内容监听，实时比对输入值和预设阈值，动态更新按钮文本即可，完整可运行代码如下：

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

// 预设阈值a
int a = 1654;

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  final TextEditingController controller = TextEditingController();
  // 按钮显示的文本，初始值为not ok
  String _buttonText = 'not ok';

  @override
  void initState() {
    super.initState();
    // 绑定输入监听
    controller.addListener(_handleInputChange);
  }

  @override
  void dispose() {
    // 页面对象销毁时释放控制器，避免内存泄漏
    controller.removeListener(_handleInputChange);
    controller.dispose();
    super.dispose();
  }

  // 输入变化时的处理逻辑
  void _handleInputChange() {
    final inputContent = controller.text.trim();
    // 空输入场景
    if (inputContent.isEmpty) {
      if (_buttonText != 'not ok') {
        setState(() => _buttonText = 'not ok');
      }
      return;
    }
    // 输入内容转数字，转换失败说明是非法输入
    final inputValue = int.tryParse(inputContent);
    if (inputValue == null) {
      if (_buttonText != 'not ok') {
        setState(() => _buttonText = 'not ok');
      }
      return;
    }
    // 数值比对，确定目标文本
    final newText = inputValue >= a ? 'ok' : 'not ok';
    if (newText != _buttonText) {
      setState(() => _buttonText = newText);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text(a.toString()),
        const SizedBox(height: 20),
        TextField(
          controller: controller,
          keyboardType: TextInputType.number,
        ),
        const SizedBox(height: 20),
        ElevatedButton(
          style: ElevatedButton.styleFrom(
            minimumSize: const Size(100, 50),
          ),
          onPressed: () {},
          child: Text(_buttonText),
        )
      ],
    );
  }
}

实现说明 #

• 监听逻辑覆盖了所有输入场景，包括删除内容、粘贴内容、输入非数字的异常场景，不会出现运行时报错
• 只有按钮文本确实发生变化时才触发状态更新，减少不必要的组件重绘
• 补全了控制器的监听移除和资源释放逻辑，符合Flutter性能规范
• 输入框设置了数字键盘，从交互层面减少用户输入非数字内容的概率

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