Flutter中如何通过ListView.builder实现学生考勤用动态单选按钮组

Radio组件通过groupValue参数区分单选分组，同一groupValue对应的所有Radio属于同一分组，同一时间仅能有一个选中项。你当前所有列表行的Radio都共用同一个全局radioValue作为分组值，相当于所有行的单选按钮都属于同一个分组，自然会出现选中一个全部联动的问题。

给每个学生单独维护独立的考勤状态，每一行的Radio仅绑定对应学生的状态值即可。

步骤1：定义学生数据结构 #

先封装学生实体，单独存储每个学生的考勤状态：

class Student {
  final int id;
  final String name;
  // 存储当前学生的考勤状态，示例：0=缺勤 1=出勤 默认-1代表未选择
  int attendanceStatus;
  Student({
    required this.id,
    required this.name,
    this.attendanceStatus = -1
  });
}
// 学生数据源
List<Student> studentList = [];

步骤2：修改列表行Radio的绑定逻辑 #

ListView.builder渲染每一行时，将当前行学生的状态作为Radio的groupValue，选中时仅修改当前学生的状态即可：

ListView.builder(
  itemCount: studentList.length,
  itemBuilder: (context, index) {
    final currentStudent = studentList[index];
    return Row(
      children: [
        // 可在此处补充学生姓名的Text展示组件
        for(var i = 0; i < 2; i++)
        Radio<int>(
            value: i,
            // 仅绑定当前学生的考勤状态作为分组值
            groupValue: currentStudent.attendanceStatus,
            activeColor: Colors.blueAccent,
            onChanged: (val) {
              if(val == null) return;
              // 只更新当前学生的状态
              currentStudent.attendanceStatus = val;
              // 刷新UI
              setState(() {});
            }
        ),
      ],
    );
  }
)

修改后每一行的Radio属于独立分组，互相之间不会产生联动影响。

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