打造交互丰富的 Flutter 标签选择器：基于 ChoiceChip 的实现指南

2023-10-05 02:33:34

Flutter 标签选择器：打造强大而可定制的界面

在现代应用中，标签选择控件是用户界面中必不可少的元素，它们使用户能够轻松选择和管理选项。在 Flutter 中，ChoiceChip 小部件提供了创建美观且可交互的标签选择控件的简单方法。在本指南中，我们将引导你完成使用 ChoiceChip 构建一个强大的标签选择器的分步过程。

创建一个基本实体类

为了管理标签的显示和选择状态，我们需要定义一个基本实体类，该类提供返回标签标签的 getTag 方法。该实体类将作为标签选择器中标签的基础结构。

class BaseSelectEntity {
  final String label;

  BaseSelectEntity({required this.label});

  String getTag() => label;
}

生成 ChoiceChip 列表

下一步是遍历传入的列表，并根据每个实体生成一个 ChoiceChip 小部件。每个 ChoiceChip 将显示标签的标签，并通过 onSelected 回调函数处理用户交互。

List<Widget> generateChoiceChips(List<BaseSelectEntity> entities) {
  return entities.map((entity) => ChoiceChip(
    label: Text(entity.getTag()),
    selected: false,
    onSelected: (isSelected) {
      // 在此处处理用户交互
    },
  )).toList();
}

定义标签选择器组件

现在，我们可以定义标签选择器组件，它将包含 ChoiceChip 列表和处理选定项目的回调函数。

class LabelSelector extends StatefulWidget {
  final List<BaseSelectEntity> entities;
  final Function(List<BaseSelectEntity>) onSelected;

  const LabelSelector({
    Key? key,
    required this.entities,
    required this.onSelected,
  }) : super(key: key);

  @override
  _LabelSelectorState createState() => _LabelSelectorState();
}

管理状态和用户交互

在标签选择器组件的状态类中，我们将维护选定项目的列表。当用户选择一个标签时，我们会更新该列表并调用 onSelected 回调函数。

class _LabelSelectorState extends State<LabelSelector> {
  List<BaseSelectEntity> _selectedEntities = [];

  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: generateChoiceChips(widget.entities),
    );
  }
}