我如何制作類似的復選框(按鈕)串列,并能夠添加新元素這里是設計示例
主螢屏
添加畫面
uj5u.com熱心網友回復:
這可以幫助您了解您希望在應用中執行的操作:
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key, this.familyName = 'No Name Provided'})
: super(key: key);
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final List items =
List.generate(5, (index) => {'label': 'item', 'selected': false});
late String _new;
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Wrap(
children: List<Widget>.generate(
items.length,
(int index) {
String _label = items[index]['label'];
bool _selected = items[index]['selected'];
return ChoiceChip(
label: Text(_label),
selected: _selected,
onSelected: (bool selected) {
setState(() {
items[index]['selected'] = selected;
});
},
);
},
).toList(),
),
TextField(onChanged: (String value) => _new = value),
ElevatedButton.icon(
onPressed: () =>
setState(() => items.add({'label': _new, 'selected': true})),
icon: const Icon(Icons.add),
label: const Text('Add New'),
),
],
);
}
}
希望這會有所幫助,讓您知道您希望我澄清任何事情。
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/429940.html
