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、小程序等.
已标记关键词 清除标记
相关推荐
<p> <b><span style="background-color:#FFE500;">【超实用课程内容】</span></b> </p> <p> <br /> </p> <p> <br /> </p> <p> 本套视频目标从UI分类开始讲起,结合网易新闻功能点实例讲解每一大类组件布局的使用。最后以一个完整的仿网易新闻的UI实战讲解,教会大家如何合理选择UI组件,并且使用组件快速实现我们的需求,完成一个完整的Flutter项目。 </p> <p> <br /> </p> <p> <br /> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><span style="background-color:#FFE500;">【课程如何观看?】</span></b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> PC端:<a href="https://edu.csdn.net/course/detail/26277"></a><a href="https://edu.csdn.net/course/detail/26150"></a><a href="https://edu.csdn.net/course/detail/26150"></a><a href="https://edu.csdn.net/course/detail/27286"></a><a href="https://edu.csdn.net/course/detail/26858">https://edu.csdn.net/course/detail/26858</a> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 移动端:CSDN 学院APP(注意不是CSDN APP哦) </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 本课程为录播课,课程永久有效观看时长,大家可以抓紧时间学习后一起讨论哦~ </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <br /> </p> <p> <br /> </p>
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页