Flutter如何根据业务条件动态禁用TextFormField及提交按钮

实现方案 #

Flutter UI由状态驱动，你只需要新增状态变量绑定对应控件属性，选完日期查询DB后更新状态即可，具体步骤如下：

1. 新增状态变量

在当前页面的State类中新增以下变量：

// 控制时长输入框是否可编辑
bool _timeFieldEnabled = true;
// 控制提交按钮是否可点击
bool _submitBtnEnabled = true;
// 存储DB查询到的对应日期时长，无数据则为null
int? _savedDuration;
// 表单全局Key，替换你原来的UniqueKey()，避免表单状态丢失
final _formKey = GlobalKey<FormState>();

2. 修改日期选择逻辑

在_selectDate方法中，用户选完日期后新增DB查询逻辑，查询完成后调用setState更新状态：

Future<void> _selectDate(BuildContext context) async {
  final DateTime? picked = await showDatePicker(
    // 保留你原来的日期选择器配置参数
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(2020),
    lastDate: DateTime(2030),
  );
  if (picked != null) {
    // 原有逻辑：更新选中日期和日期输入框内容
    selectedDate = picked;
    _dateController.text = DateFormat('dd/MM/yyyy').format(picked);
    
    // 新增：查询当前选中日期对应DB中是否有已存时长
    // _queryDurationFromDB为你自行实现的数据库查询方法，入参为选中日期，返回时长或null
    final int? dbDuration = await _queryDurationFromDB(picked);
    
    setState(() {
      if (dbDuration != null) {
        // 已有记录逻辑
        _savedDuration = dbDuration;
        _timeController.text = '${dbDuration} h';
        _timeFieldEnabled = false;
        _submitBtnEnabled = false;
      } else {
        // 无记录逻辑，重置状态
        _savedDuration = null;
        _timeController.clear();
        _timeFieldEnabled = true;
        _submitBtnEnabled = true;
      }
    });
  }
}

3. 绑定状态到控件属性

修改你原有表单中对应控件的属性：

• 首先把Form的key替换成我们定义的全局Key：

Form(
  key: _formKey,
  // 原有子组件配置
)

• 时长输入框TextFormField的enabled属性和hintText绑定状态：

TextFormField(
  controller: _timeController,
  textAlign: TextAlign.center,
  // 绑定可编辑状态
  enabled: _timeFieldEnabled,
  decoration: InputDecoration(
    // 动态绑定hintText
    hintText: _savedDuration != null ? '${_savedDuration} h' : '0 h',
    contentPadding: EdgeInsets.zero,
    filled: true,
    fillColor: Colors.white
  ),
)

• 提交按钮的onPressed绑定可点击状态：

ElevatedButton(
  // 禁用状态下传null即可自动置灰不可点击
  onPressed: _submitBtnEnabled ? () async {
    postTimes(await convertDate(selectedDate), convertTime(_timeController.text));
  } : null,
  child: Text("Enregistrer")
)

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