flutter实现搜索框

文章目录

提示
实现效果
实现代码
测试代码

提示

已将代码上传至gitee，后续会继续更新学习封装的一些组件：
flutter练习

实现效果

实现代码

import 'package:flutter/material.dart';/// @author longzipeng
/// @创建时间：2022/3/29
/// 查询组件
class SearchWidget extends StatefulWidget {final double? height; // 高度final double? width; // 宽度final String? hintText; // 输入提示final ValueChanged<String>? onEditingComplete; // 编辑完成的事件回调const SearchWidget({Key? key,this.height,this.width,this.hintText,this.onEditingComplete}): super(key: key);@overrideState<SearchWidget> createState() => _SearchWidgetState();
}class _SearchWidgetState extends State<SearchWidget> {var controller = TextEditingController();@overridevoid initState() {super.initState();}/// 清除查询关键词clearKeywords() {controller.text = "";}@overrideWidget build(BuildContext context) {return LayoutBuilder(builder: (context, constrains) {var width = widget.width ?? constrains.maxWidth / 2; // 父级宽度var height = widget.width ?? widget.height ?? 30;return Container(width: width,height: height,decoration: BoxDecoration(border: Border.all(color: Theme.of(context).primaryColor),borderRadius: BorderRadius.circular(height)),child: TextField(controller: controller,decoration: InputDecoration(hintText: widget.hintText ?? "请输入搜索词",hintStyle: TextStyle(color: Colors.grey, fontSize: 14),contentPadding: EdgeInsets.only(bottom: height / 3),border: InputBorder.none,icon: Padding(padding: const EdgeInsets.only(left: 10, top: 5),child: Icon(Icons.search,size: 18,color: Theme.of(context).primaryColor,)),suffixIcon: IconButton(icon: const Icon(Icons.close,size: 17,),onPressed: clearKeywords,splashColor: Theme.of(context).primaryColor,)),onEditingComplete: () {widget.onEditingComplete?.call(controller.text);}),);});}
}

测试代码

import 'package:csdn_flutter_demo/pages/common/common_appbar.dart';
import 'package:csdn_flutter_demo/widgets/search_widget.dart';
import 'package:flutter/material.dart';/// @author longzipeng
/// @创建时间：2022/3/30
/// 下拉选择demo
class SearchDemoPage extends StatefulWidget {const SearchDemoPage({Key? key}) : super(key: key);@overrideState<SearchDemoPage> createState() => _SearchDemoPageState();
}class _SearchDemoPageState extends State<SearchDemoPage> {/// 查询数据search(value) {print("搜索的值为：$value");}@overrideWidget build(BuildContext context) {return Scaffold(appBar: CommonAppbar(title: "搜索框演示",),body: Center(child: SearchWidget(onEditingComplete: search,),));}
}

flutter实现搜索框相关推荐

Flutter搜索框SearchBar
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 重要消息网易云[玩转大前端]配套课程 EDU配套教程 Flutter开发的点滴积累系列文章 1 使用封装库 1.1 ...
html5搜索框美化,CSS美化的漂亮搜索框
CSS美化的漂亮搜索框我要搜索搜索 var $ = function(id){return document.getElementById(id);} var formSubmit = funct ...
实现搜索框记录搜索历史_三个案例告诉你：“搜索框”该如何设计？
不管是在2C还是2B产品,"搜索"是产品中最常见且必不可少的功能模块之一.对于用户来说,在众多功能模块和信息层级中如何快速定位到目标,通过输入已知的关键词进行搜索是最便捷的方式,没 ...
Vue搜索框保存临时搜索的记录
<template><div><inputtype="text"list="sg-nav-search"placeholder=& ...
JavaScript实现智能搜索框
应用场景: 1. 搜索框在页面中占据的空间过小,希望无论浏览到什么位置,可以轻易地回到并聚焦搜索框. 2. 搜索框里面的文字大小过小,希望能够在上方开辟一块空间放大内容解决思路: 1. 对整个页面添 ...
iOS中UISearchBar(搜索框)使用总结
2019独角兽企业重金招聘Python工程师标准>>> iOS中UISearchBar(搜索框)使用总结初始化:UISearchBar继承于UIView,我们可以像创建View那样 ...
PHP自动搜索框post,php搜索框提示(自动完成)实例代码_PHP教程
百度的搜索大家都在用,当用户输入文字时,搜索框下面自动提示相关的信息,加强了用户体验,的确不错,那么这个效果是如何实现的呢先看一下效果图吧,这样更有动力,要不然大家还不知道我在讲什么,到底要达到什么 ...
点击按钮的时候，切换搜索框的显示与隐藏（动画）
1 // 搜索框出现动画 2 var i=0; 3 $('.search').on('click',function () { 4 // $('.search-positon').css('heigh ...
使用jQuery-UI来实现一个Ajax的自动完成功能（自动填充搜索框的下拉值）
首先你要在.net拓展包中去搜索 jquery ui (Combined Libray)安装这么个文件第二部在控制器中添加我们根据输入搜索框的值获取符合的记录集的action 第三步有了 ...
自定义下拉列表（使用原始的事件监听机制），在搜索框中使用
目录背景: 效果: 注意事项: 完整代码: 背景: 搜索框中需要使用到动态获取热点搜索历史的功能,此时需要自定义下拉列表.select组件不能完全满足要求. 搜索框下拉列表支持键盘上下键及回车选择, ...

flutter实现搜索框

文章目录

提示

实现效果

实现代码

测试代码

flutter实现搜索框相关推荐

最新文章

热门文章