如何使用FormBuilderFilterChip实现芯片横向排列并支持水平滚动？附解决方案代码

我之前也遇到了相同的需求：想让筛选芯片在同一行展示，并且支持水平滚动浏览。经过调试后找到了可行的解决方法，分享给有需要的开发者：

核心实现思路 #

• 用SingleChildScrollView作为滚动容器，指定scrollDirection: Axis.horizontal开启水平滚动特性
• 将FormBuilderChoiceChip嵌套在Row中，同时设置direction: Axis.horizontal让芯片强制横向排列
• 给FormBuilderChoiceChip的父容器设置合适宽度（示例中设为800，可根据实际需求调整），确保芯片有足够横向空间展开
• 移除输入框默认边框，让芯片区域的UI更简洁清爽
• 通过BlocBuilder监听分类状态变化，动态生成对应的芯片选项

完整实现代码 #

return RefreshIndicator(
  onRefresh: widget.onRefresh ?? () async {},
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        physics: const ClampingScrollPhysics(),
        child: Row(
          children: [
            BlocBuilder<ItemCategoriesBloc, ItemCategoriesState>(
              builder: ((context, state) {
                if (state is ItemCategoriesLoadedState) {
                  List<MapEntry<int, Category>> categoryList = List.from(state.categories.entries);
                  return Container(
                    width: 800,
                    child: FormBuilderChoiceChip(
                      decoration: const InputDecoration(border: InputBorder.none),
                      selectedColor: MyTheme.primary,
                      alignment: WrapAlignment.spaceEvenly,
                      direction: Axis.horizontal,
                      initialValue: categoryList.map((value) => value).toList(),
                      name: 'filter_category',
                      options: categoryList
                          .map(
                            (category) => FormBuilderFieldOption(
                              value: category.value.id,
                              child: Text(category.value.name),
                            ),
                          )
                          .toList(),
                    ),
                  );
                }
                return Container();
              }),
            ),
          ],
        ),
      )
    ],
  )
);

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