Flutter中如何在嵌套列表DishMenuTypesDishTypesDishTypesLocales的name字段前插入"All"选项

要实现给从API获取的DishTypes列表最前面添加"All"选项，你需要构造对应的模型对象并插入到列表开头，同时注意不要修改原API返回的数据（避免影响其他业务逻辑），并正确使用chips_choice库渲染选择芯片。

步骤1：构造"All"对应的模型对象 #

我们需要创建一个DishMenuTypesDishTypes实例，它的dishTypesLocales数组里包含一个DishMenuTypesDishTypesDishTypesLocales对象，将name字段设为"All"即可：

final allDishType = DishMenuTypesDishTypes(
  dishTypesLocales: [
    DishMenuTypesDishTypesDishTypesLocales(name: "All")
  ],
);

步骤2：修改buildDishMenuTypes方法 #

不要直接修改传入的data列表，而是复制一份新列表，把"All"选项插入到开头，再用chips_choice的ChipsChoice.builder生成所有选择芯片：

Widget buildDishMenuTypes(List<DishMenuTypesDishTypes> data) {
  // 复制原列表，避免修改API返回的原始数据
  final modifiedData = List<DishMenuTypesDishTypes>.from(data);
  // 插入"All"选项到列表最前面
  modifiedData.insert(0, DishMenuTypesDishTypes(
    dishTypesLocales: [
      DishMenuTypesDishTypesDishTypesLocales(name: "All")
    ],
  ));

  // 假设你维护了一个选中状态变量（比如在State类中定义int _selectedIndex = 0;）
  return ChipsChoice<int>.builder(
    value: _selectedIndex,
    onChanged: (value) => setState(() => _selectedIndex = value),
    itemCount: modifiedData.length,
    itemBuilder: (context, index) {
      // 处理空值，防止空指针异常
      final locale = modifiedData[index].dishTypesLocales?.first;
      final displayName = locale?.name ?? "Unknown";
      return ChipsChoiceItem(
        label: displayName,
        selected: _selectedIndex == index,
      );
    },
  );
}

关键注意事项 #

• 避免修改原数据：用List.from(data)复制列表，确保API返回的原始数据不会被意外修改，避免影响其他依赖该数据的逻辑。
• 空值处理：对dishTypesLocales和name字段做判空处理，防止出现空指针异常。
• 选中状态维护：需要在你的State类中维护一个选中索引变量（比如int _selectedIndex = 0;），用来跟踪用户选择的选项。

完整StatefulWidget示例 #

如果你的组件是StatefulWidget，完整代码示例如下：

class DishTypeChipSelector extends StatefulWidget {
  final List<DishMenuTypesDishTypes> dishTypes;

  const DishTypeChipSelector({Key? key, required this.dishTypes}) : super(key: key);

  @override
  State<DishTypeChipSelector> createState() => _DishTypeChipSelectorState();
}

class _DishTypeChipSelectorState extends State<DishTypeChipSelector> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    final modifiedData = List<DishMenuTypesDishTypes>.from(widget.dishTypes);
    modifiedData.insert(0, DishMenuTypesDishTypes(
      dishTypesLocales: [
        DishMenuTypesDishTypesDishTypesLocales(name: "All")
      ],
    ));

    return ChipsChoice<int>.builder(
      value: _selectedIndex,
      onChanged: (value) => setState(() => _selectedIndex = value),
      itemCount: modifiedData.length,
      itemBuilder: (context, index) {
        final locale = modifiedData[index].dishTypesLocales?.first;
        final displayName = locale?.name ?? "Unknown";
        return ChipsChoiceItem(
          label: displayName,
          selected: _selectedIndex == index,
        );
      },
    );
  }
}

这样修改后，你就能看到顺序为"All"、"A"、"B"的选择芯片了。

内容的提问来源于stack exchange，提问作者Mohammed Nabil