flutter 搜索框实现,键盘搜索按钮,清空,防抖

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';
import 'package:sy_project/config/app_colors.dart';
import 'package:sy_project/core/assets.dart';/// 搜索textview
class CustomSearchBarInput extends StatefulWidget {// 回调函数final Function(String) onSubmitted;final String hintLabel;const CustomSearchBarInput({required this.hintLabel, required this.onSubmitted, super.key});@overrideState<CustomSearchBarInput> createState() => _CustomSearchBarInputState();
}class _CustomSearchBarInputState extends State<CustomSearchBarInput> {// 焦点对象// FocusNode _focusNode = FocusNode();// 文本的值String searchVal = '';//用于清空输入框TextEditingController _controller = TextEditingController();@overridevoid initState() {super.initState();//  获取焦点// WidgetsBinding.instance.addPostFrameCallback((timeStamp) {//   _focusNode.requestFocus();// });}@overrideWidget build(BuildContext context) {return Container(// color: AppColors.baseColor,// margin: EdgeInsets.all(ScreenHelper.pageHorizontalPadding()),height: 35.h,alignment: Alignment.centerLeft,decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20.h),),child: TextField(textInputAction: TextInputAction.search,controller: _controller,textAlignVertical: TextAlignVertical.center,// //自动获取焦点// focusNode: _focusNode,autofocus: false,onTapOutside: (event){FocusScopeNode currentFocus = FocusScope.of(context);currentFocus.focusedChild?.unfocus();},decoration: InputDecoration(// contentPadding和border的设置是为了让TextField内容实现上下居中contentPadding: const EdgeInsets.all(0),hintText: widget.hintLabel,hintStyle: const TextStyle(color: AppColors.customColor_999),//取消下划线border: const OutlineInputBorder(borderSide: BorderSide.none),icon: Padding(padding: EdgeInsets.only(left: 10.w, right: 0),child: SvgPicture.asset(Assets.images.iconSearch,width: 12.w,height: 12.w,),),// icon: Padding(//     padding: const EdgeInsets.only(left: 0, top: 0),//     child: Icon(//       Icons.search,//       size: 18,//       color: Theme.of(context).primaryColor,//     )),//  关闭按钮,有值时才显示suffixIcon: searchVal.isNotEmpty? IconButton(icon: Icon(Icons.close,size: 15.w,),onPressed: () {//   清空内容setState(() {searchVal = '';_controller.clear();});},): null),onChanged: (value) {setState(() {searchVal = value;// 防止抖动  搜索// VibrationThrottlingUtil.debounce(//     () => widget.onSubmitted(value), 1000);});},onSubmitted: (value) {widget.onSubmitted(value);},),);}
}

防抖就是防止抖动,避免事件的重复触发。
如果某一事件被连续快速地触发多次,只会执行最后那一次。适合输入框输入后自动搜索回调

class VibrationThrottlingUtil {static Timer? _debounceTimer;/// 防抖 (传入所要防抖的方法/回调与延迟时间)static void debounce(Function func, [int delay = 500]) {if (_debounceTimer != null) {_debounceTimer?.cancel();}_debounceTimer = Timer(Duration(milliseconds: delay), () {func.call();_debounceTimer = null;});}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/652952.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【MIdjourne基础】 |MIdjourney基础参数全解析,各类辅助知识

文章目录 1 参数列表1.1 基础参数列表 2 基础参数详解2.1 模型版本选择2.2 模型出图模式选择2.3 基础生图参数2.3.1 --ar2.3.2 --stylize2.3.3 --no2.3.4 --chaos2.3.5 --quality2.3.6 --stop2.3.7 --hd2.3.8 --repeat 1 参数列表 1.1 基础参数列表 模型版本选择 目标参数作…

杂项基础知识

换行与回车 ASCII中的CR与LF CR&#xff08;Carriage Return&#xff09;&#xff0c;回车字符\r&#xff0c;控制字符&#xff0c;将光标移动到本行行首 LF&#xff08;Line Feed&#xff09;&#xff0c;换行字符\n&#xff0c;控制字符&#xff0c;将光标下移一行 ASCII…

【2024美赛实战】预测模型:灰色预测模型GM(1,1)

当题目数据少且无明显规律的时候&#xff0c;且要求进行短期预测的时候&#xff0c;或许可以考虑另一种预测方法——灰色预测模型GM(1,1)&#xff0c;虽然是个比较基础的预测模型&#xff0c;但在美赛O奖论文中登场次数也是比较多的。 一 预测问题的一般步骤 二 灰色预测模型…

Redis客户端之Redisson(三)Redisson分布式锁

一、背景&#xff1a; 高效的分布式锁设计应该包含以下几个要点&#xff1a; 1、互斥&#xff1a; 在分布式高并发的条件下&#xff0c;我们最需要保证&#xff0c;同一时刻只能有一个线程获得锁&#xff0c;这是最基本的一点 2、防止死锁&#xff1a; 在分布式高并发的条…

Cesium材质特效

文章目录 0.引言1.视频材质2.分辨率尺度3.云4.雾5.动态水面6.雷达扫描7.流动线8.电子围栏9.粒子烟花10.粒子火焰11.粒子天气 0.引言 现有的gis开发方向较流行的是webgis开发&#xff0c;其中Cesium是一款开源的WebGIS库&#xff0c;主要用于实时地球和空间数据的可视化和分析。…

动态规划算法题刷题笔记

首先看动态规划的三要素&#xff1a;重叠子问题、最优子结构和状态转移方程。 重叠子问题&#xff1a;存在大量的重复计算 最优子结构&#xff1a; 状态转移方程&#xff1a;当前状态转移成以前的状态 动态规划的解题步骤主要有&#xff1a; 确定 dp 数组以及下标的含义状…

苍穹外卖-前端部分(持续更新中)

d 第二种&#xff1a;cmd中输入 vue ui进入图形化界面选择npm,vue2进行创建 先将创建的Vue框架导入Vsocde开发工具 然后ctrshiftp 输入npm 点击serve将项目启动 下这种写法跨域会报错&#xff1a; 解决方法&#xff1a; \ 注意 这种用法&#xff1a;&#xff08;不是单引号…

Android Handler完全解读

一&#xff0c;概述 Handler在Android中比较基础&#xff0c;本文笔者将对此机制做一个完全解读。读者可简单参考上述类图与时序图&#xff0c;便于后续理解。 二&#xff0c;源码解读 1&#xff0c;主线程伊始 众所周知&#xff0c;通过Zygote的fork方式&#xff0c;新创建…

SSH客户端 Termius for Mac 中文激活版

Termius for Mac是一款强大的终端和SSH客户端&#xff0c;为开发人员、系统管理员和网络工程师提供了全面的远程访问和管理工具。 软件下载&#xff1a;Termius for Mac 中文激活版下载 无论您是在使用Mac、Windows还是Linux系统&#xff0c;Termius都能提供出色的功能和用户体…

静态代理IP该如何助力Facebook多账号注册运营?

在Facebook运营中&#xff0c;充分利用静态代理IP是多账号运营的关键一环。通过合理运用静态代理IP&#xff0c;不仅可以提高账号安全性&#xff0c;还能有效应对Facebook的算法和限制。以下是这些关键点&#xff0c;可以帮助你了解如何运用静态代理IP进行Facebook多账号运营&a…

基于springboo校园社团信息管理系统

摘要 随着高校规模的扩大和学生社团活动的日益丰富多彩&#xff0c;校园社团信息管理成为一个备受关注的问题。为了更有效地组织、管理和推动校园社团的发展&#xff0c;本文设计并实现了一套基于Spring Boot的校园社团信息管理系统。本系统以实现社团信息的集中管理和高效运营…

使用dockers-compose搭建开源监控和可视化工具

简介 Prometheus 和 Grafana 是两个常用的开源监控和可视化工具。 Prometheus 是一个用于存储和查询时间序列数据的系统。它提供了用于监控和报警的数据收集、存储、查询和图形化展示能力。Prometheus 使用拉模型&#xff08;pull model&#xff09;&#xff0c;通过 HTTP 协议…

工具学习——使用OpenSmile提取音频特征

文章目录 OpenSmile介绍下载和安装提取特征格式转换特征提取尝试一正常使用手段常见的特征 使用Gnuplot可视化特征安装使用 总结 OpenSmile介绍 openSMILE&#xff08;open-source Speech and Music Interpretation by Large-space Extraction&#xff09;是一个开源工具包&am…

直流电机驱动(马达)

文章目录 一、介绍直流电机介绍电机驱动电路大功率器件直接驱动H桥驱动集成电路线路图 PWM介绍产生PWM的方法 二、实例1.呼吸灯案例2.直流电机调速 一、介绍直流电机 介绍 电机驱动电路 点击的负载较大&#xff0c;直接接在单片机I/O口上无法驱动&#xff0c;所以需要驱动电路…

Vite学习指南

那本课程都适合哪些人群呢&#xff1f; 想要学习前端工程化&#xff0c;在新项目中投入使用 Vite 构建工具的朋友 Webpack 转战到 Vite 的小伙伴 前端架构师们&#xff0c;可以充实自己的工具箱 当然如果你没有项目相关开发经验&#xff0c;也可以从本课程中受益&#xff0…

支付宝开通GPT4.0,最新经验分享

ChatGPT是由OpenAI开发的一种生成式对话模型&#xff0c;具有生成对话响应的能力。它是以GPT&#xff08;Generative Pre-trained Transformer&#xff09;为基础进行训练的&#xff0c;GPT是一种基于Transformer架构的预训练语言模型&#xff0c;被广泛用于各种自然语言处理任…

vue 样式隔离原理

日常写单文件组件时&#xff0c;会在style添加scoped属性&#xff0c;如<style scoped>&#xff0c;目的是为了隔离组件与组件之间的样式&#xff0c;如下面的例子&#xff1a; <template><p class"foo">这是foo</p><p class"bar&q…

C#从网址上读取json数据

需求&#xff1a;从客户给的网址中读取json格式的数据。 找了好多资料&#xff0c;都不太好使&#xff0c;看到了一篇很有帮助的文章。以下大部分内容和这篇找到的文章近似。太不容易了&#xff0c;同时也感谢这篇文章的作者心所欲。 https://www.cnblogs.com/zoujinhua/p/10…

数字图像处理(实践篇)三十四 OpenCV-Python绘制椭圆

目录 一 涉及的函数 二 实践 一 涉及的函数 cv2.ellipse(img,center,axes,angle,start_angle,end_angle,color,thickness) 参数: ①<

Future模式先给您提货单

Future模式是一种设计模式&#xff0c;用于在处理耗时操作时提高程序的响应性。 角色介绍: Main类: 负责向Host发出请求并获取数据的类。 Host类: 负责向请求返回FutureData的实例的类&#xff0c;起到调度的作用。 Data接口: 表示访问数据的方法的接口&#xff0c;由FutureD…