在Flutter中,取消选择已经选中的项目可以通过以下步骤实现:
以下是一个示例代码:
class MyListView extends StatefulWidget {
@override
_MyListViewState createState() => _MyListViewState();
}
class _MyListViewState extends State<MyListView> {
List<bool> _selectedItems = List.generate(10, (index) => false);
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
setState(() {
_selectedItems[index] = !_selectedItems[index];
// 如果只能选择一个项目,取消其他项目的选中状态
for (int i = 0; i < _selectedItems.length; i++) {
if (i != index) {
_selectedItems[i] = false;
}
}
});
},
child: Container(
color: _selectedItems[index] ? Colors.blue : Colors.white,
child: ListTile(
title: Text('Item $index'),
),
),
);
},
);
}
}
在上述示例中,我们使用了一个List<bool>来保存每个项目的选中状态。当点击一个项目时,更新对应项目的选中状态,并通过setState()方法通知Flutter框架重新构建UI。如果只能选择一个项目,我们还会将其他项目的选中状态设置为false,以取消它们的选中状态。
这样,当点击另一个项目时,之前选中的项目会自动取消选择,而当前点击的项目会被选中。
云+社区沙龙online [新技术实践]
“中小企业”在线学堂
云+社区技术沙龙 [第31期]
云+社区技术沙龙[第12期]
serverless days
DBTalk
领取专属 10元无门槛券
手把手带您无忧上云