13.2 推荐关键词列表

13.2 推荐关键词列表

image-20220801120042577

实现步骤：

第 1 步：数据模型

json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
[
  {
    "id": 42,
    "name": "beanie",
    "slug": "beanie",
    "description": "",
    "count": 1,
    "_links": {
      "self": [
        {
          "href": "https://wp.ducafecat.tech/wp-json/wc/v3/products/tags/42"
        }
      ],
      "collection": [
        {
          "href": "https://wp.ducafecat.tech/wp-json/wc/v3/products/tags"
        }
      ]
    }
  }
]

model

img

第 2 步：API 接口

image-20220722180500948

请求数据 model

lib/common/models/request/product.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/// tags查询请求
class TagsReq {
  final int? page;
  final int? prePage;
  final String? search;
  final String? slug;

  TagsReq({
    this.page,
    this.prePage,
    this.search,
    this.slug,
  });

  Map<String, dynamic> toJson() => {
        'page': page ?? 1,
        'pre_page': prePage ?? 10,
        'search': search ?? "",
        'slug': slug ?? "",
      };
}

lib/common/api/product.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
/// tags 列表
static Future<List<TagsModel>> tags(TagsReq? req) async {
  var res = await WPHttpService.to.get(
    '/products/tags',
    params: req?.toJson(),
  );

  List<TagsModel> tags = [];
  for (var item in res.data) {
    tags.add(TagsModel.fromJson(item));
  }
  return tags;
}

第 3 步：控制器

lib/pages/search/search_index/controller.dart

1
2
// Tags 列表
List<TagsModel> tagsList = [];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/// 拉取数据
Future<bool> _loadSearch(String keyword) async {
  if (keyword.trim().isEmpty == true) {
    tagsList.clear();
    return tagsList.isEmpty;
  }

  // 拉取数据
  var result = await ProductApi.tags(TagsReq(
    // 关键词
    search: keyword,
  ));

  // 清空数据
  tagsList.clear();

  // 返回数据不为空
  if (result.isNotEmpty) {
    tagsList.addAll(result); // 添加数据
  }

  return tagsList.isEmpty;
}
1
2
3
4
5
6
7
8
9
10
11
12
 // 搜索栏位 - 防抖
void searchDebounce() {
   // getx 内置防抖处理
   debounce(
     ...

       // 拉取数据
       await _loadSearch(value as String);
       update(["search_index"]);
     },
	...
 }
1
2
// 列表项点击事件
void onListItemTap(TagsModel model) {}

第 4 步：视图

lib/pages/search/search_index/view.dart

1
2
3
4
5
6
7
8
9
10
11
// 列表项
Widget _buildListItem(TagsModel item) {
  return ListTile(
    title: TextWidget.body1(item.name ?? ""),
    trailing: IconWidget.icon(
      Icons.north_west,
      color: AppColors.primary,
    ),
    onTap: () => controller.onListItemTap(item),
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
// 列表
Widget _buildList() {
  return ListView.separated(
    itemBuilder: (BuildContext context, int index) {
      TagsModel item = controller.tagsList[index];
      return _buildListItem(item);
    },
    separatorBuilder: (BuildContext context, int index) {
      return const Divider();
    },
    itemCount: controller.tagsList.length,
  );
}
1
2
3
4
// 主视图
Widget _buildView() {
  return _buildList();
}

提交代码到 git