flutter怎么实现循环出多个复选框,点击其中一个时不会干扰其他的复选框,当点击其中复选框时,将他的id值存到数组中,而不是点击下一个就将当前的值覆盖住
时间: 2024-04-13 07:30:06 浏览: 127
multiselect_formfield:Flutter软件包,使用警报对话框提供多选表单字段,以选中带有复选框的多个项目并显示为筹码
要实现这个功能,您可以创建一个包含复选框和id的自定义数据模型,并在点击复选框时更新相应的数据模型。然后,您可以将选中的复选框的id存储在一个List中。以下是一个示例代码:
```dart
import 'package:flutter/material.dart';
class CheckboxItem {
int id;
bool isChecked;
CheckboxItem({this.id, this.isChecked});
}
class CheckboxList extends StatefulWidget {
@override
_CheckboxListState createState() => _CheckboxListState();
}
class _CheckboxListState extends State<CheckboxList> {
List<CheckboxItem> _checkboxItems = List.generate(
10,
(index) => CheckboxItem(id: index, isChecked: false),
);
List<int> _selectedIds = [];
void _updateSelectedIds() {
_selectedIds.clear();
for (var item in _checkboxItems) {
if (item.isChecked) {
_selectedIds.add(item.id);
}
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Checkbox List'),
),
body: ListView.builder(
itemCount: _checkboxItems.length,
itemBuilder: (context, index) {
return ListTile(
title: Text('Item ${_checkboxItems[index].id}'),
trailing: Checkbox(
value: _checkboxItems[index].isChecked,
onChanged: (value) {
setState(() {
_checkboxItems[index].isChecked = value;
_updateSelectedIds();
});
},
),
);
},
),
);
}
}
void main() {
runApp(MaterialApp(
home: CheckboxList(),
));
}
```
在上面的示例中,我们创建了一个CheckboxItem类来表示每个复选框的数据模型。每次点击复选框时,我们更新对应的数据模型并调用_updateSelectedIds方法来更新选中的id列表。最后,将选中的id存储在_selectedIds列表中。
希望对您有所帮助!如果有任何其他问题,请随时提问。
阅读全文