Flutter自定义搜索框效果 Flutter自定义搜索框效果

【Flutter自定义搜索框效果】本文实例为大家分享了Flutter自定义搜索框效果的具体代码，供大家参考，具体内容如下
效果

文章图片

实现方式

import 'package:dio/dio.dart'; import 'package:flutter/material.dart'; import 'package:keduo/base/baseSize.dart'; import 'package:keduo/utils/icon_utils.dart'; class SearchBarWidget extends StatefulWidget {final ValueChanged onchangeValue; final VoidCallback onEditingComplete; const SearchBarWidget({this.onchangeValue, this.onEditingComplete, Key key}): super(key: key); @overrideSearchBarWidgetState createState() => SearchBarWidgetState(); }class SearchBarWidgetState extends State {///编辑控制器TextEditingController _controller; ///是否显示删除按钮bool _hasDeleteIcon = false; @overridevoid initState() {super.initState(); _controller = TextEditingController(); }Widget buildTextField() {//theme设置局部主题return TextField(controller: _controller,textInputAction: TextInputAction.search,keyboardType: TextInputType.text,maxLines: 1,decoration: InputDecoration(//输入框decoration属性contentPadding:const EdgeInsets.symmetric(vertical: 10.0, horizontal: 1.0),//设置搜索图片prefixIcon: Padding(padding: EdgeInsets.only(left: 0.0),child: ImageIcon(AssetImage(IconUtils.getIconPath('ic_edit_search'),),color: Colors.black26,),),prefixIconConstraints: BoxConstraints(//设置搜索图片左对齐minWidth: 30,minHeight: 25,),border: InputBorder.none, //无边框hintText: " 请输入商品名",hintStyle: new TextStyle(fontSize: BaseSize.sp(14), color: Colors.grey),//设置清除按钮suffixIcon: Container(padding: EdgeInsetsDirectional.only(start: 2.0,end: _hasDeleteIcon ? 0.0 : 0,),child: _hasDeleteIcon? new InkWell(onTap: (() {setState(() {/// 保证在组件build的第一帧时才去触发取消清空内容WidgetsBinding.instance.addPostFrameCallback((_) => _controller.clear()); _hasDeleteIcon = false; }); }),child: Icon(Icons.cancel,size: 18.0,color: Colors.grey,),): new Text(''),),),onChanged: (value) {setState(() {if (value.isEmpty) {_hasDeleteIcon = false; } else {_hasDeleteIcon = true; }widget.onchangeValue(_controller.text); }); },onEditingComplete: () {FocusScope.of(context).requestFocus(FocusNode()); widget.onEditingComplete(); },style: new TextStyle(fontSize: 14, color: Colors.black),); }@overrideWidget build(BuildContext context) {return Container(//背景与圆角decoration: new BoxDecoration(border: Border.all(color: Colors.black12, width: 1.0), //边框color: Colors.black12,borderRadius:new BorderRadius.all(new Radius.circular(BaseSize.dp(18))),),alignment: Alignment.center,height: BaseSize.dp(36),padding: EdgeInsets.fromLTRB(10.0, 0.0, 0.0, 0.0),child: buildTextField(),); }@overridevoid dispose() {super.dispose(); _controller.dispose(); }}

使用

@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(elevation: 0,brightness: Brightness.light,leading: IconButton(icon: Image.asset(IconUtils.getIconPath('fanhui')),onPressed: () => Navigator.pop(context)),title: SearchBarWidget(onchangeValue: (value) {print(value); },onEditingComplete: () {print('编辑结束'); },),backgroundColor: Colors.white,),body: Text(''),backgroundColor: BaseColor.colorFFF5F5F5,); }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。