Flutter搜索框SearchBar
作者:互联网
题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天。
重要消息
1 使用封装库
1.1 添加依赖
小编已将本效果写成一个依赖库,读者可根据使用直接添加依赖,代码如下:
github方式依赖
flutter_search_bars:
git:
url: https://github.com/zhaolongs/flutter_search_bar.git
ref: master
pub仓库依赖 查看最新版本
#搜索框
flutter_search_bars: ^0.0.1
1.2 导包
在使用到搜索框 SearchBar 的地方导包如下:
import 'package:flutter_search_bars/flutter_search_bars.dart';
1.3 使用
1.3.1 默认大小使用
///这里只是用于显示的搜索框不用做输入
///参数[heroTag]用于页面过渡动画tag
///参数clickCallBack为当前搜索框点击事件回调
SearchStaticBar(
heroTag: "searchStatidBar",
clickCallBack: () {
NavigatorUtils.pushPage(context, TestPage2());
},
)
1.3.2 指定大小使用
Container(
width: 120,
///这里只是用于显示的搜索框不用做输入
///参数[heroTag]用于页面过渡动画tag
///参数clickCallBack为当前搜索框点击事件回调
child: SearchStaticBar(
heroTag: "searchStatidBar",
clickCallBack: () {
NavigatorUtils.pushPage(context, TestPage2());
},
),
)
运行效果如下:
使用案例效果如下:
标签:search,clickCallBack,bars,flutter,搜索,heroTag,SearchBar,Flutter 来源: https://blog.51cto.com/928343994/2841715