如何在Flutter中展示WooCommerce的指定商品分类

实现方案 #

你可以通过「客户端过滤全量分类列表」或者「接口请求时直接限定返回分类」两种方式实现，优先推荐第二种更省资源。 #

方案1：直接修改现有代码过滤分类

1. 先确认你需要展示的分类ID（可在WooCommerce后台分类管理页查看每个分类的对应ID）
2. 修改_buildCategoryList方法，先过滤出指定分类再渲染，修改后的完整代码如下：

Widget _buildCategoryList(List<categoryModel.Category> categories) {
  // 👇 替换为你实际需要展示的分类ID列表
  final allowedCategoryIds = <int>[10, 23, 45, 68];
  // 过滤出符合要求的分类
  final filteredCategories = categories.where((category) => allowedCategoryIds.contains(category.categoryId)).toList();

  return Container(
    height: 120,
    alignment: Alignment.centerLeft,
    child: ListView.builder(
      shrinkWrap: true,
      physics: const ClampingScrollPhysics(),
      scrollDirection: Axis.horizontal,
      itemCount: filteredCategories.length, // 改用过滤后的列表长度
      itemBuilder: (context, index) {
        var data = filteredCategories[index]; // 从过滤后的列表取数据
        return SizedBox(
          width: 100,
          child: Padding(
            padding: const EdgeInsets.only(left: 10),
            child: InkWell(
              onTap: () {
                // Navigator.push(
                //     context,
                //     MaterialPageRoute(
                //         builder: (context) => ProductPage(
                //               categoryId: data.categoryId,
                //             )));
              },
              child: Column(
                children: [
                  Container(
                    margin: const EdgeInsets.only(top:10),
                    width: 60,
                    height: 60,
                    alignment: Alignment.center,
                    child: data.image != null
                        ? ClipRRect(
                            borderRadius: BorderRadius.circular(50),
                            child: Image.network(
                              data.image.url,
                              fit: BoxFit.cover,
                            ),
                          )
                        : const SizedBox.shrink(),
                    decoration: const BoxDecoration(
                        shape: BoxShape.circle,
                        color: Palette.backgroundColor,
                        boxShadow: [
                          BoxShadow(
                            color: Colors.white,
                            offset: Offset(0, 0),
                            blurRadius: 2,
                          )
                        ]),
                  ),
                  Text(
                    data.categoryName.toString(),
                    style: const TextStyle(
                        fontSize: 13,
                        color: Colors.white,
                        fontWeight: FontWeight.w500),
                    textAlign: TextAlign.center,
                  ),
                ],
              )
          ),
        ),
      );
    },
  ),
);
}

如果需要按分类名称过滤，把过滤逻辑替换为下方代码即可，注意分类名称要和后台填写的完全匹配：

final allowedCategoryNames = <String>["男装", "女装", "鞋靴"];
final filteredCategories = categories.where((category) => allowedCategoryNames.contains(category.categoryName)).toList();

方案2：接口请求时直接限定返回分类（更推荐）

请求WooCommerce分类接口时，在请求参数中添加include字段，值为你需要展示的分类ID用英文逗号拼接，示例请求路径：
your-domain/wp-json/wc/v3/products/categories?include=10,23,45,68
这种方式不需要客户端做过滤，减少了无用数据的传输，加载速度更快。

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