如何通过添加 Flutter 制作类似的小部件列表答案

【问题标题】：how to make similar widget list with addition Flutter如何通过添加 Flutter 制作类似的小部件列表
【发布时间】：2022-01-28 14:37:21
【问题描述】：

如何制作类似的复选框（按钮）列表，并能够添加新元素以下是设计示例

Main screen

Add screen

【问题讨论】：

Choicechip 小部件和 Wrap 小部件将帮助您实现同样的目标
pub.dev/packages/chips_choice - 你也可以使用这个包。

标签： flutter dart listview checkbox

【解决方案1】：

这可能有助于您了解您希望在应用中执行的操作：

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'),
        ),
      ],
    );
  }
}

希望这会有所帮助，让您知道您希望我澄清任何事情。

【讨论】：