Flutter 中的 Autocomplete 小部件:全面指南

Flutter 中的 Autocomplete 小部件:全面指南

在 Flutter 中,Autocomplete 是一个文本输入辅助小部件,它可以根据用户输入的内容提供自动完成建议。这在创建搜索栏、填写表单或其他需要快速输入的场景中非常有用。虽然 Flutter 的基础库中没有直接提供 Autocomplete 小部件,但是可以通过组合 TextField 和自定义逻辑来实现。

基础用法

实现 Autocomplete 的基础是 TextField,你还需要监听文本变化并提供建议列表:

class MyAutocomplete extends StatelessWidget {final List<String> suggestions = ['Apple', 'Banana', 'Cherry', 'Date'];Widget build(BuildContext context) {return TextField(onChanged: (text) {// 当文本改变时,过滤建议列表},decoration: InputDecoration(suffixIcon: Icon(Icons.search),),);}
}

监听文本变化

为了提供自动完成建议,你需要监听 TextFieldonChanged 回调:

onChanged: (text) {// 根据输入的文本过滤建议列表List<String> filteredSuggestions = suggestions.where((suggestion) {return suggestion.startsWith(text);}).toList();// 更新建议列表状态setState(() {suggestions = filteredSuggestions;});
}

显示建议列表

使用 Overlay 或其他方式显示建议列表,这里使用 ListView 作为示例:

onChanged: (text) {// ... 过滤建议列表的逻辑// 显示建议列表showSuggestions(filteredSuggestions);
}void showSuggestions(List<String> suggestions) {final RenderBox box = context.findRenderObject() as RenderBox;showDialog(context: context,builder: (BuildContext context) {return AlertDialog(content: Container(height: 200.0,child: ListView.builder(itemCount: suggestions.length,itemBuilder: (context, index) {return ListTile(title: Text(suggestions[index]),onTap: () {// 当点击建议项时,填充文本框并关闭建议列表TextField.of(context).controller.text = suggestions[index];Navigator.pop(context);},);},),),);},);
}

自定义建议项

建议项可以是文本,也可以是更复杂的布局:

ListTile(title: Text(suggestions[index]),leading: Icon(Icons.food_bank),onTap: () {/* ... */},
)

实例:完整的 Autocomplete

下面是一个简单的 Autocomplete 实现:

class AutocompleteTextField extends StatefulWidget {_AutocompleteTextFieldState createState() => _AutocompleteTextFieldState();
}class _AutocompleteTextFieldState extends State<AutocompleteTextField> {final List<String> _suggestions = ['Apple', 'Banana', 'Cherry', 'Date'];String _text = '';Widget build(BuildContext context) {return TextField(onChanged: (text) {final pattern = RegExp(text);final filteredSuggestions = _suggestions.where((s) => pattern.hasMatch(s));showSuggestions(filteredSuggestions);},controller: TextEditingController(text: _text),decoration: InputDecoration(hintText: 'Start typing...',suffixIcon: Icon(Icons.search),),);}void showSuggestions(Iterable<String> suggestions) {// 实现显示建议列表的逻辑}
}

结语

虽然 Flutter 没有直接提供 Autocomplete 小部件,但通过组合 TextField 和一些自定义逻辑,你可以实现一个功能完备的自动完成文本输入框。掌握 Autocomplete 的实现方法,可以帮助你创建出既美观又提高用户体验的输入界面。

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

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

相关文章

深入解析C#中的async和await关键字

文章目录 一、异步编程的基本概念及其在C#中的实现二、async关键字的定义及其用法三、await关键字的定义及其用法示例代码&#xff1a;使用async和await编写一个简单的异步程序 四、async和await的优点注意事项 五、C#下async和await中常见问题汇总1. 异步方法中的await调用2. …

STM32(GPIO)

GPIO简介 GPIO&#xff08;General Purpose Input Output&#xff09;通用输入输出口 引脚电平&#xff1a;0V~3.3V&#xff0c;部分引脚可容忍5V 输出模式下可控制端口输出高低电平&#xff0c;用以驱动LED、控制蜂鸣器、模拟通信协议输出时序等 输入模式下可读取端口的高低电…

【MYSQL】一颗B+树可以保存多少条数据

引言 事万物都有自己的单元体系&#xff0c;若干个小单体组成一个个大的个体。就像拼乐高一样&#xff0c;可以自由组合。所以说&#xff0c;如果能熟悉最小单元&#xff0c;就意味着我们抓住了事物的本事&#xff0c;再复杂的问题也会迎刃而解。 存储单元 存储器范围比较大…

leetCode-hot100-位运算专题

例题中的视频讲解是B站中的宝藏博主的讲解视频&#xff0c;每道题后面都附有该题对应的视频链接~ 位运算知识总结 1.异或2.与运算和或运算3.左移和右移4.综合例题 1.异或 参考资料&#xff1a;位运算-异或&#xff0c;以下知识点讲解的内容参考了该篇博文&#xff0c;有兴趣的…

大模型训练框架DeepSpeed使用入门(1): 训练设置

文章目录 一、安装二、训练设置Step1 第一步参数解析Step2 初始化后端Step3 训练初始化 三、训练代码展示 官方文档直接抄过来&#xff0c;留个笔记。 https://deepspeed.readthedocs.io/en/latest/initialize.html 使用案例来自&#xff1a; https://github.com/OvJat/DeepSp…

基于Python实现蔬菜水果识别

蔬菜水果识别在农业生产、食品加工和市场销售等领域具有重要意义。随着计算机视觉和机器学习技术的发展,利用图像识别技术实现蔬菜水果的自动化识别已成为可能。 目录 引言研究背景问题陈述研究目标文献综述蔬菜水果识别的相关研究概述基于计算机视觉和机器学习的图像识别方法…

前端 JS 经典:Proxy 和 DefineProperty

前言&#xff1a;vue2 响应式原理 Object.defineProperty&#xff0c;vue3 响应式原理 Proxy 代理。本文主要讲这两个 api 的本质区别。 1. Proxy Proxy 能够拦截和重新定义对象的基本操作&#xff0c;那什么叫对象的基本操作呢&#xff0c;对象内部运行的方法就是对象的基本…

C++ QT设计模式:迭代器模式

基本概念 迭代器模式&#xff08;Iterator Pattern&#xff09;是一种行为型设计模式&#xff0c;提供一种方法顺序访问一个聚合对象中的各个元素&#xff0c;而又不暴露该对象的内部表示。 迭代器模式将遍历元素的责任封装到一个独立的迭代器对象中&#xff0c;使得聚合对象…

HCIP的学习(17)

BGP基础配置 使用直连接口IP地址来建立EBGP对等体关系 1、启动BGP协议 [r1]bgp 100 ----启动BGP协议&#xff0c;并且规定其AS号2、配置设备的RID数值&#xff0c;一般选择设备的loopback接口的IP地址 [r1-bgp]router-id 1.1.1.13、配置BGP对等体信息&#xff0c;包含了对等体…

Atcoder C - Routing

https://atcoder.jp/contests/arc177/tasks/arc177_c 思路&#xff1a;该问题可以归约为最短路问题&#xff0c;问题中的条件1和条件2是相互独立的&#xff0c;可以分开考虑&#xff0c;从地图中的一个点&#xff0c;沿上下左右四个方向走&#xff0c;所花费的代价为&#xff1…

js 文档片段 DocumentFragment

DocumentFragment 作为一个轻量版的 Document 使用&#xff0c;就像标准的 document 一样&#xff0c;存储由节点&#xff08;nodes&#xff09;组成的文档结构。与 document 相比&#xff0c;最大的区别是它不是真实 DOM 树的一部分&#xff0c;它的变化不会触发 DOM 树的重新…

K8s源码分析(一)-K8s调度框架及调度器初始化介绍

本文首发在个人博客上&#xff0c;欢迎来踩&#xff01; 文章目录 调度框架介绍K8s scheduler 介绍K8s scheduler的初始化Cobra介绍K8s scheduler中初始化的源代码解析 调度框架介绍 这是官方对于v1.27调度框架的介绍文档&#xff1a;https://v1-27.docs.kubernetes.io/docs/…

AR系列路由器配置本地同一网段互通

A R 路由器是华为公司推出的企业级路由器产品系列&#xff0c;具有高可靠性、高性能和易管理等特点。AR 系列路由器提供的功能包括路由转发、安全接入、语音、视频、无线等多种业务&#xff0c;支持各种接入方式和协议&#xff0c;并且可以方便地进行扩展和升级。 实验拓扑图&…

BGP基础

BGP是什么 BGP Border Gateway Protocol&#xff08;当前使用的版本是 BGP-4&#xff09; 动态路由协议可以按照工作范围分为IGP以及EGP。IGP工作在同一个AS内&#xff0c;主要用来发现和计算路由&#xff0c;为AS内提供路由信息的交换&#xff1b;而EGP工作在AS与AS之间&…

详细分析Java中的多数据源

目录 1. 方式一2. 方式二&#xff08;常用&#xff09; 1. 方式一 采用jpa的依赖包&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId> </dependency>配置对…

K8S面试题学习2

参考K8S面试题&#xff08;史上最全 持续更新&#xff09;_kubernetes常见面试题-CSDN博客做的个人总结&#xff0c;规划是每天看10题&#xff0c;thx&#xff01; 1. k8s中命名空间的作用是什么&#xff1f; namespace主要用来实现不同环境/多租户的资源隔离 k8s通过将集群内…

一文汇总对比英伟达、AMD、英特尔显卡GPU

‍‍&#x1f3e1;博客主页&#xff1a; virobotics(仪酷智能)&#xff1a;LabVIEW深度学习、人工智能博主 &#x1f4d1;上期文章&#xff1a;『【仪酷LabVIEW AI工具包案例】使用LabVIEW AI工具包YOLOv5结合Dobot机械臂实现智能垃圾分类』 &#x1f37b;本文由virobotics(仪酷…

Flutter 中的 Theme 使用:全面指南

Flutter 中的 Theme 使用&#xff1a;全面指南 在 Flutter 中&#xff0c;Theme 是一种强大的机制&#xff0c;用于定义和应用全局或局部的设计风格&#xff0c;包括颜色、字体、形状等。使用 Theme 可以确保你的应用在不同设备和屏幕尺寸上保持一致的外观和感觉。 基础用法 …

AVL树的完全指南:平衡与性能

文章目录 AVL树简介AVL的操作建立一个AVL树插入操作删除操作 书写代码1.构造函数和析构函数2.获取最大值和最小值3.树的高度和节点个数3.前序中序和后序遍历4.判断树是否为空树5.四个旋转操作6.获取平衡因子7.插入操作8.删除操作9.搜索节点.h文件中的定义 总结 AVL树简介 AVL树…

ICode国际青少年编程竞赛- Python-4级训练场-嵌套for循环入门

ICode国际青少年编程竞赛- Python-4级训练场-嵌套for循环入门 1、 for i in range(3):Dev.step(3)for j in range(3):Dev.turnLeft()Dev.step(-2)Dev.turnLeft()2、 for i in range(3):Dev.turnLeft()Dev.step(4)Dev.turnRight()Dev.step(2)for i in range(4):Dev.step(2)D…