Flutter技术咨询:如何实现仅当扫描条码未存在时显示按钮
问题:扫描条码后仅当未在动态列表中存在时显示按钮
原本设定扫描物品后就显示按钮,实际需求为:仅当扫描的条码未在动态列表中存在时,才显示该按钮。
当前代码如下:
Column( children: [ if (_scanBarcode.isEmpty) ...[ Text("NIKS") ] else ...[ ElevatedButton.icon(onPressed: () => _showFormadd(null), icon: Icon( // <-- Icon Icons.download, size: 24.0, ), label: Text('Artikel staat nog niet in de database : $_scanBarcode\n', textAlign: TextAlign.center, style: const TextStyle(fontSize: 20, height: 1.5) ), // <-- Text ), ] ] ),
我考虑修改else语句为else if,使用contains或比较逻辑来判断,但与动态列表对比时无法生效。想确认此方向是否正确,或是有其他更优实现方式?
解决方案
你的方向是对的,用contains或any做存在性判断是正确思路,失效大概率是因为列表元素的对比逻辑错误,或是列表更新未触发UI重建,以下是具体实现方案:
确认列表元素的对比逻辑
如果动态列表是字符串列表(如List<String> _dynamicBarcodes),直接用!_dynamicBarcodes.contains(_scanBarcode)即可判断;如果是自定义对象列表(如包含barcode字段的Item类),不能直接用contains,需要通过字段匹配判断:// 自定义对象列表的判断方式 !_dynamicItems.any((item) => item.barcode == _scanBarcode)修改条件判断代码
将原有的else分支替换为带列表判断的else if,同时可补充条码已存在时的提示分支:Column( children: [ if (_scanBarcode.isEmpty) ...[ Text("NIKS") ] // 仅当条码未在动态列表中存在时显示按钮 else if (!_dynamicBarcodes.contains(_scanBarcode)) ...[ ElevatedButton.icon( onPressed: () => _showFormadd(null), icon: Icon( Icons.download, size: 24.0, ), label: Text( 'Artikel staat nog niet in de database : $_scanBarcode\n', textAlign: TextAlign.center, style: const TextStyle(fontSize: 20, height: 1.5) ), ), ] // 条码已存在时显示提示 else ...[ Text("Dit artikel staat al in de database: $_scanBarcode", style: TextStyle(fontSize: 18, color: Colors.grey[600]) ) ] ], ),确保UI随列表更新重建
如果动态列表是通过setState管理的,更新列表后必须调用setState(() {})触发UI刷新;如果使用Provider、Riverpod等状态管理库,要确保状态更新时通知到对应UI组件。
内容的提问来源于stack exchange,提问作者Renzo
相关产品推荐
相关产品推荐

