13.1 搜索栏防抖处理

13.1 搜索栏防抖处理

img

实现步骤：

第 1 步：搜索栏

控制器

lib/pages/search/search_index/controller.dart

1
2
// 搜索控制器
final TextEditingController searchEditController = TextEditingController();
1
2
3
4
5
6
@override
void onClose() {
  super.onClose();
  // 搜索控制器释放
  searchEditController.dispose();
}

视图

lib/pages/search/search_index/view.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 导航栏
AppBar _buildAppBar() {
  return AppBar(
    titleSpacing: AppSpace.listItem,
    // 搜索栏
    title: InputWidget.textBorder(
      controller: controller.searchEditController,
      hintText: "You can try T-Shirt", //LocaleKeys.commonSearchInput.tr,
      onChanged: (val) {
        printInfo(info: val);
      },
    ).paddingRight(AppSpace.page),
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@override
Widget build(BuildContext context) {
  return GetBuilder<SearchIndexController>(
    init: SearchIndexController(),
    id: "search_index",
    builder: (_) {
      return Scaffold(
        // 搜索栏
        appBar: _buildAppBar(),
        // 内容
        body: SafeArea(
          child: _buildView(),
        ),
      );
    },
  );
}

第 2 步：防抖处理

搜索栏防抖是指，当你频繁输入内容的时候，间隔一定的时间拉取数据，而不是频繁的暴力拉取数据。

控制器

lib/pages/search/search_index/controller.dart

1
2
// 搜索关键词
final searchKeyWord = "".obs;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 搜索栏位 - 防抖
void searchDebounce() {
  // getx 内置防抖处理
  debounce(
    // obs 对象
    searchKeyWord,

    // 回调函数
    (value) async {
      // 调试
      if (kDebugMode) {
        print("debounce -> " + value.toString());
      }

      // 拉取数据
      update(["search_index"]);
    },

    // 延迟 500 毫秒
    time: const Duration(milliseconds: 500),
  );

  // 监听搜索框变化
  searchEditController.addListener(() {
    searchKeyWord.value = searchEditController.text;
  });
}
1
2
3
4
5
6
@override
void onReady() {
  super.onReady();
  // 注册防抖
  searchDebounce();
}

第 3 步：首页搜索栏点击

lib/pages/goods/home/controller.dart

1
2
3
4
// 导航点击事件
void onAppBarTap() {
  Get.toNamed(RouteNames.searchSearchIndex);
}

提交代码到 git