Flutter自定义搜索框效果
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了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<String> onchangeValue;
final VoidCallback onEditingComplete;
const SearchBarWidget({this.onchangeValue, this.onEditingComplete, Key key})
: super(key: key);
@override
SearchBarWidgetState createState() => SearchBarWidgetState();
}
class SearchBarWidgetState extends State<SearchBarWidget> {
///编辑控制器
TextEditingController _controller;
///是否显示删除按钮
bool _hasDeleteIcon = false;
@override
void 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),
);
}
@override
Widget 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(),
);
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
}使用
@override
Widget 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,
);
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
