• 10-2【封装组件出神入化】基于TextField实现顶部SearchBar-1




    没有内容的时候,显示的是一个话筒的按钮、左边是一个搜索的图标。


    首页的样式

    自定义组件

    根据localNav改也给名字

    叫做search_bar.dart


    searchBar是有状态的,需要和用户去做交互。

    定义这些参数,并实现构造方法。SearchBarType是枚举类型。


    文本框需要用到TextField。TextField需要给它设置一个Controller。这个Controller我们这里就用TextEditingController
    TextEditingController可以获取搜索框内文字的变化。
    showClear是否显示差号那个按钮。

    要实现的效果是语音输入后,把文字带到搜索页的文本框上。所以就需要defaultText来设置默认的文字。

    在builder里面,根据当前输入框的不同类型样式,设置不同的样式。
    首先判断是不是SearchBarType.noemal

    这是normal的样子。

    输入了文字的样式是这样的

    normalSearch的样式

    这里用Row布局,左边是个返回按钮,右边是搜索的按钮。中间是输入框

    在搜索页内,是没有返回按钮的。

    所以我们根据是否隐藏左边的按钮的属性来判断。
    这里我们先提供一个方法。包裹我们的child和加点击事件。

    然后用_WrapTap方法包裹。 先设置左边的返回按钮的样式。

    中间显示输出框,能够自适应宽度所以这里用Expanded。然后flex设置为1

    child放一个输入框

    最右边的搜索按钮

    输入框的实现

    包括底部的背景图,框的圆角。右边话筒图标。左边搜索图标。输入内容后最右边有个关闭按钮。

    左边的Icon样式设置

    中间输入框部分,用Expand然后宽度自适应 Flex:1、按钮的事件是onChange方法

    有内容时候就显示差号,无内容时候就显示一个话筒的图标。

    设置样式。

    如果是首页的话,样式如下:

    这个输入框是不可以点击的。做的一个假的



    设置文本框的样式

    总结

    代码先不要运行,下节课继续完善。
     

    结束

  • 相关阅读:
    docker学习笔记3:镜像操作(查找和下载)
    docker学习笔记2:容器操作
    docker学习笔记1:docke环境的查看
    CSS鼠标样式
    Ubuntu下安装和配置mysql
    HR函数学习01——创建组织单位
    SAP模块常用增强总结{转载}
    SAP物料批次管理配置及操作手册(轉載)
    交货单开票
    ABAP之PINYING拼音
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/12213272.html
Copyright © 2020-2023  润新知