Flutter 输入框实时搜索性能优化

在App开发过程中,搜索功能是必不可少的。一般对于搜索功能,要么是输入一段文字后自己手动点击搜索按钮进行搜索;要么是实时的搜索。如果输入框中每一个字符的改变都要去触发网络请求的话,会浪费用户的流量,增大服务器的负载,并且使页面比较卡顿。这显然是不可取的。举一个很简单的例子,用户想要搜索 "ABC" ,如果直接监听文本变化,会向服务器发送3次请求。显然这会造成差的用户体验并浪费网路资源。

所以我们可以做一个延迟加载、当文本输入变化超过500ms时进行功能搜索:

//快速搜索
   static searchDelay(Function doSomething, {durationTime = 500}) {
    timer?.cancel();
    timer = new Timer(Duration(milliseconds: durationTime), () {
      doSomething?.call();
      timer = null;
    });
  }

可以在输入框基类进行封装:

onChanged: (value) {
          if (!_textEditingController.value.composing.isValid) {
            setState(() {
              inputKeywords = _textEditingController.text;
            });
            if (widget.onChanged != null) {
              Utils.searchDelay(() {
                widget.onChanged(inputKeywords);
              });
            }
          }
        },

这样便能达到文本搜索优化的效果。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值