You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter实现ListView每行成对单选按钮(出勤/缺勤)的持久化选择

问题分析与解决方案

你当前的问题核心是所有行的单选按钮共享了同一个attendenceValue变量,导致切换任意一行的选择时,全局的groupValue被覆盖,之前的选择全部丢失。要实现每行独立的单选组,需要给每个学生单独存储出勤状态。

具体修改步骤:

  1. 替换全局变量为状态集合
    在你的State类中,把单个的attendenceValue替换为一个Map(或列表),用来存储每个学生的出勤状态:

    // 用index作为key,存储对应学生的出勤状态:"present"或"absent"
    Map<int, String> attendanceStatus = {};
    
  2. 修改Radio组件的关联逻辑
    针对每行的Radio,将groupValue改为对应学生的状态,同时简化value的命名(无需拼接index,因为每个行的状态是独立管理的):

修改后的完整代码:

Expanded(
  flex: 9,
  child: ListView.builder(
    itemCount: listStudents.length,
    itemBuilder: (_, index) {
      // 获取当前学生的出勤状态,默认设为"absent"(可根据需求调整)
      final currentStatus = attendanceStatus[index] ?? "absent";
      
      return Container(
        margin: const EdgeInsets.all(8),
        padding: const EdgeInsets.symmetric(horizontal: 15),
        decoration: BoxDecoration(
          color: Colors.white70,
          borderRadius: BorderRadius.circular(15)
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Wrap(
              children: [
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SmallText(text: listStudents[index].name!, fontFamily: 'Poppins'),
                  ],
                ),
              ],
            ),
            Wrap(
              children: [
                Radio(
                  value: "absent", 
                  groupValue: currentStatus, 
                  fillColor: MaterialStateColor.resolveWith((states) => Colors.redAccent),
                  onChanged: (val) {
                    setState(() {
                      attendanceStatus[index] = val.toString();
                    });
                  },
                ),
                Radio(
                  value: "present", 
                  groupValue: currentStatus, 
                  fillColor: MaterialStateColor.resolveWith((states) => Colors.greenAccent),
                  onChanged: (val) {
                    setState(() {
                      attendanceStatus[index] = val.toString();
                    });
                  },
                ),
              ],
            ),
          ],
        ),
      );
    }
  ),
)

额外优化建议:

  • 如果你的学生对象有唯一ID(比如student.id),建议用ID作为Map的key,而不是index。这样当列表排序或增删学生时,状态不会因为index变化而混乱。
  • 可以在初始化时给所有学生设置默认状态,比如:
    @override
    void initState() {
      super.initState();
      // 初始化所有学生默认缺勤
      for (int i = 0; i < listStudents.length; i++) {
        attendanceStatus[i] = "absent";
      }
    }
    

内容的提问来源于stack exchange,提问作者astraa

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.16 07:46:00