Flutter分页ListView翻页后选中项勾选状态错位如何修复？

问题现象 #

带分页加载的职位列表实现单选保存交互时，出现选中状态匹配错误：在某一页勾选某一职位项后，切换到其他分页页面时，勾选标记会固定出现在新页面相同索引的列表项位置，无法和原本选中的职位数据正确关联，翻页过程中勾选标记始终停留在同索引位置，和实际选中的职位数据脱节。

异常效果 #

根因分析 #

现有实现错误使用列表当前页的渲染索引作为选中状态的判断依据。分页切换后，当前页的职位列表数据会被替换，列表项索引会从0重新开始计数，索引值和跨页的职位数据没有唯一绑定关系，只要不同页面的列表项索引相同，就会被错误判定为选中状态。

原有问题代码 #

int? _selectedPosition;

child: ListView.separated(
  shrinkWrap: true,
  itemCount: _positionsList?.length ?? 0,
  itemBuilder: (context, index) {
    return ListTile(
      trailing: _checkPosition(index)
          ? Image.asset(
              Assets.assetsCheckmark,
              width: 13,
              height: 10,
            )
          : const SizedBox.shrink(),
      title: Text(_positionsList![index].name ?? ''),
      onTap: () => _selectPosition(index),
    );
  },
  separatorBuilder: (context, index) {
    return const Divider();
  },
),

void _selectPosition(int index) {
  if (_selectedPosition != index) {
    setState(() {
      _selectedPosition = index;
    });
  } else {
    setState(() {
      _selectedPosition = null;
    });
  }
}
bool _checkPosition(int index) {
  return _selectedPosition == index ? true : false;
}

修复方案 #

放弃用当前页索引存储选中状态，改为存储选中职位的唯一标识（比如职位id），列表渲染时通过职位唯一标识匹配判断是否选中，完全脱离分页索引的影响，就能保证选中状态和职位数据正确绑定。
修复后代码示例：

// 存储选中职位的唯一标识，字段类型和职位实体的唯一字段保持一致即可
// 比如职位id是int类型就定义为int?，是String就定义为String?
String? _selectedPositionId;

child: ListView.separated(
  shrinkWrap: true,
  itemCount: _positionsList?.length ?? 0,
  itemBuilder: (context, index) {
    final positionItem = _positionsList![index];
    return ListTile(
      // 用职位唯一id判断选中状态，和列表索引无关
      trailing: positionItem.id == _selectedPositionId
          ? Image.asset(
              Assets.assetsCheckmark,
              width: 13,
              height: 10,
            )
          : const SizedBox.shrink(),
      title: Text(positionItem.name ?? ''),
      onTap: () {
        setState(() {
          // 点击时更新存储的选中职位id
          if (_selectedPositionId != positionItem.id) {
            _selectedPositionId = positionItem.id;
          } else {
            // 重复点击当前选中项则取消选中
            _selectedPositionId = null;
          }
        });
      },
    );
  },
  separatorBuilder: (context, index) {
    return const Divider();
  },
),

如果职位实体没有单独的id字段，也可以用不会重复的字段组合生成唯一标识（比如公司id+职位名称），核心逻辑是选中状态和数据本身的固定属性绑定，不要和列表渲染生成的临时索引绑定。

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