Flutter技术问询：如何判断TextFormField的启用状态？

要实现这个需求，核心是通过状态变量绑定TextFormField的启用状态，再根据该变量动态调整标签样式，具体步骤如下：

1. 用StatefulWidget维护启用状态 #

创建一个StatefulWidget，在状态类中定义布尔变量，直接关联到TextFormField的enabled属性，这样就能直接获取当前控件的启用/禁用状态值。

2. 根据状态动态设置标签颜色 #

在InputDecoration的labelStyle中，根据布尔变量的值设置不同的颜色，同时可以自定义边框样式，和系统默认的边框状态保持一致。

完整代码示例 #

import 'package:flutter/material.dart';

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

  @override
  State<EnabledStateForm> createState() => _EnabledStateFormState();
}

class _EnabledStateFormState extends State<EnabledStateForm> {
  // 控制TextFormField的启用状态，直接作为状态布尔值使用
  bool _isTextFieldEnabled = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextFormField(
              enabled: _isTextFieldEnabled,
              decoration: InputDecoration(
                labelText: '请输入内容',
                // 根据启用状态设置标签颜色
                labelStyle: TextStyle(
                  color: _isTextFieldEnabled ? Colors.blueAccent : Colors.grey[600],
                ),
                // 自定义边框，和启用/禁用状态对应
                enabledBorder: const OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.blueAccent),
                ),
                disabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.grey[600]!),
                ),
              ),
            ),
            const SizedBox(height: 20),
            // 示例：添加按钮切换启用状态
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _isTextFieldEnabled = !_isTextFieldEnabled;
                });
              },
              child: Text(_isTextFieldEnabled ? '禁用输入框' : '启用输入框'),
            )
          ],
        ),
      ),
    );
  }
}

扩展：结合焦点状态（点击后获取焦点的情况） #

如果需要区分“点击后获取焦点”的状态（此时边框样式会变化），可以通过FocusNode监听焦点变化，结合启用状态一起调整标签颜色：

class _EnabledStateFormState extends State<EnabledStateForm> {
  bool _isTextFieldEnabled = true;
  late FocusNode _textFieldFocusNode;

  @override
  void initState() {
    super.initState();
    _textFieldFocusNode = FocusNode();
    // 监听焦点变化
    _textFieldFocusNode.addListener(() {
      setState(() {});
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      enabled: _isTextFieldEnabled,
      focusNode: _textFieldFocusNode,
      decoration: InputDecoration(
        labelText: '请输入内容',
        labelStyle: TextStyle(
          color: _isTextFieldEnabled
              ? (_textFieldFocusNode.hasFocus ? Colors.greenAccent : Colors.blueAccent)
              : Colors.grey[600]!,
        ),
        enabledBorder: const OutlineInputBorder(
          borderSide: BorderSide(color: Colors.blueAccent),
        ),
        focusedBorder: const OutlineInputBorder(
          borderSide: BorderSide(color: Colors.greenAccent),
        ),
        disabledBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.grey[600]!),
        ),
      ),
    );
  }
}

关键说明 #

• 直接通过_isTextFieldEnabled变量就能获取TextFormField当前的启用/禁用状态布尔值，它和控件的实际状态完全绑定。
• 所有样式调整都通过setState触发重绘，确保状态变化后界面实时更新。

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