如何使用 Flutter 制作类似的小部件列表

Question

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

Main screen

Add screen

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

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

如何使用 Flutter 制作类似的小部件列表

how to make similar widget list with addition Flutter

flutter

dart

listview

checkbox