Flutter中Radio单选按钮点击后值无法正常选中更新

核心错误点 #

• 选中状态变量id定义在_buildOmsIDTextField构建方法内部，每次setState触发组件重绘时，build方法重新执行会把id重置为初始值1，更新后的状态无法持久保存。
• RadioListTile的两个核心参数赋值颠倒：groupValue是整个单选组共享的当前选中值，需要所有单选项共用同一个变量；value是单个选项自身的唯一标识，原代码将二者写反，单选匹配逻辑完全失效。

修复方案 #

1. 将存储选中状态的id、选中文本radioItemHolder、固定选项列表nList移到build方法外部，作为对应State类的成员变量，避免组件重建时被重复初始化。
2. 修正RadioListTile参数赋值：所有单选项统一传入状态变量id作为groupValue，每个单选项传入自身的data.index作为value。
3. 点击回调中正常更新状态变量即可。

修正后完整代码 #

// 以下变量均放在对应State类的成员位置，不要写在build方法内
int id = 1;
String? radioItemHolder;
final List<OptionList> nList = [
  OptionList(
    padding : const EdgeInsets.fromLTRB(14.0, 180, 25, 50),
    index: 1,
    option: "Accept",
  ),
  OptionList(
    padding : const EdgeInsets.all(14.0),
    index: 2,
    option: "Reject",
  ),
];

Widget _buildOmsIDTextField() {
  return Column(
    children: <Widget>[
      const Padding(
        padding: EdgeInsets.all(14.0),
        child: Text("Please Select an Option", style: TextStyle(fontSize: 23))
      ),
      SizedBox(
        height: 150.0,
        child: Column(
          children: nList.map((data) => RadioListTile(
            title: Text(data.option),
            // 单选组统一的当前选中值
            groupValue: id,
            // 当前选项自身的标识值
            value: data.index,
            onChanged: (val) {
              setState(() {
                radioItemHolder = data.option;
                id = data.index;
              });
            },
          )).toList(),
        ),
      ),
    ],
  );
}

补充说明：原代码中OptionList定义的padding属性目前没有实际应用到布局中，如果需要给不同选项设置不同内边距，需要在外层包裹Padding组件传入data.padding参数。

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