Flutter中如何通过单选按钮勾选/取消勾选启用/禁用TextField

直接通过单选按钮的选中状态绑定 TextField 的启用状态即可实现需求，以下是调整后的代码和关键点说明：

1. 先确保枚举定义正确（如果还没定义） #

enum SingingCharacter { checked, unchecked }

2. 状态类中维护单选按钮选中状态 #

在你的 State 类中声明变量：

SingingCharacter? _character;

3. 修改单选按钮与 TextField 代码 #

ListTile(
  title: const Text('按公里计费规则'),
  leading: Radio<SingingCharacter>(
    value: SingingCharacter.checked,
    groupValue: _character,
    fillColor: MaterialStateColor.resolveWith((states) => Colors.black),
    onChanged: (SingingCharacter? value) {
      setState(() {
        _character = value;
      });
    },
  ),
),
TextFormField(
  // 核心：单选按钮选中checked时启用，否则禁用
  enabled: _character == SingingCharacter.checked,
  onSaved: (value) => print(kiloMeter.text),
  decoration: InputDecoration(
    hintStyle: TextStyle(
      fontFamily: "Proxima Nova",
      fontWeight: FontWeight.w300,
    ),
    border: InputBorder.none,
    labelStyle: TextStyle(
      color: Color(0xffFAFAFA),
    ),
  ),
  inputFormatters: [
    FilteringTextInputFormatter.allow(RegExp(r"[0-9]+"))
    // 若业务允许输入空格，可保留原正则中的|\s
  ],
  controller: kiloMeter,
  validator: (value) {
    // 仅当选中单选按钮时才校验输入
    if (_character == SingingCharacter.checked) {
      if (value == null || value.isEmpty) {
        return '请输入公里数';
      }
      final num? km = num.tryParse(value);
      if (km == null || km != 1000) {
        return '请输入正确的公里数（需为1000）';
      }
    }
    return null;
  },
),

关键点说明 #

• 去掉了冗余的_kilometerButtonDisable变量，直接通过_character的状态控制 TextField 启用状态，逻辑更简洁。
• 单选按钮选中SingingCharacter.checked时，TextField自动启用；切换到其他选项（或取消选中）时，TextField自动禁用。
• 优化了校验逻辑：只有选中单选按钮时才触发输入校验，避免未选中时弹出错误提示。
• 调整了输入格式规则，默认限制仅输入数字（需保留空格可自行修改正则）。

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