Flutter中RadioListTile无法实现单选、选中多个条目如何解决?
问题原因
你代码的核心问题是:保存选中状态的id变量更新逻辑被封装在了每个列表项独立的StatefulBuilder内部,StatefulBuilder的setState只会触发自身对应区域的重绘,不会同步更新其他列表项的groupValue,因此会出现可以多选的异常效果。
修复方案
推荐以下两种实现方式:
方案1:上层State管理选中值(逻辑最简单,适配大多数场景)
将选中状态提升到当前页面的State类中,复用页面全局的setState触发所有列表项重绘,同步选中状态:
// 1. 将选中状态定义在当前页面的State类中 int? _selectedSupplierIndex = -1; ListView showSuppliersList(List<Suppliers>? suppliersList) { return ListView.builder( itemCount: suppliersList!.length, itemBuilder: (context, index) { return RadioListTile<int>( value: index, groupValue: _selectedSupplierIndex, title: Text(suppliersList[index].supplierName), onChanged: (value) { setState(() { _selectedSupplierIndex = value; }); }, ); } ); }
方案2:ValueNotifier实现局部刷新(性能更优,适合长列表)
如果不想触发整个页面重绘,可以用ValueNotifier包裹选中值,配合ValueListenableBuilder实现仅列表项的局部更新:
ListView showSuppliersList(List<Suppliers>? suppliersList) { final ValueNotifier<int?> _selectedIndex = ValueNotifier(-1); return ListView.builder( itemCount: suppliersList!.length, itemBuilder: (context, index) { return ValueListenableBuilder<int?>( valueListenable: _selectedIndex, builder: (context, selectedId, child) { return RadioListTile<int>( value: index, groupValue: selectedId, title: Text(suppliersList[index].supplierName), onChanged: (value) { _selectedIndex.value = value; }, ); } ); } ); }
内容的提问来源于stack exchange,提问作者user16772576
相关产品推荐
相关产品推荐

