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());
        },
      ),
    )

运行效果如下:
在这里插入图片描述

使用案例效果如下:
在这里插入图片描述

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页