zoukankan      html  css  js  c++  java
  • 10-3基于TextField实现顶部SearchBar-2

    为了看到效果在Search页面调用

    实现onTextChange

    搜索页,运行报错

    这是因为我们的searchBarType没有传值。但是也没有设置默认值。

    我们给这个两个参数都设置默认值

    再来运行测试效果


    但是并没有背景色

    实现背景色

    要实现背景色需要外层Contianer里面加装饰器。。最主要的是要实现装饰器。圆角首页是5,搜索页面是15


    这样我们的背景色就有了。

    定义有内容时候清空的差号。

    根据属性是否显示Clear按钮。

    callback是speakClick的回调。

    如果显示Clear按钮包裹一个Icon图标。当用户店家这个Clear的Icon的时候,通过setState调用这个TextView的Controller.clrear()方法, 然后将它清空。同时调用onChanged将内容进行清空。

    看效果


    没有内容的时候,显示话筒按钮


    被清空了的


    设置左边的边距

    首页状态下的输入框

    首页状态下的输入框稍有不同,复制normal状态的输入框的代码做对比


    复制到_genHomeSearch()方法内。

    首先是对padding进行调整

    我们这里放一个Row布局,左边我们放一个文字 “上海”

    通过这个方法来获取首页的背景色

    高亮状态下是黑色。非高亮是白色

    黑色

    白色

    右边显示一个Icon。向下的箭头。背景色和输入框的保持一致。


    右边放一个消息的Iocn

    首页调用



    下面定义这几个方法,分别表示跳转到不同的页面里面去。

    默认显示的文字在最上面定义一个常量。



    搜索栏要在刘海的下面。还要输入框社会渐变的背景。希望这种状态下,底部有个阴影。

    这里用Column布局,上面放输入框,下面放阴影。


    首先放一个Container,里面设置装饰器的演示、设置AppBar渐变的遮罩,从0x66000000渐变到。透明的颜色。

    child里面再放一个Container。设置了一个高度,然后设置了padding,这个Container其实就是输入框后面的背景。



    contianer能够随着滚动发生颜色的变化

    contianer能够随着滚动发生颜色的变化,我们是通过appBarAlpha乘以255 得到的值。

    再为Container设置child

    在SearchBar下面再放一个Contianer。

    默认状态下底部阴影是没有的

    只有当我们滑动了一定的距离才会出现阴影

    查看效果



     

    结束

  • 相关阅读:
    机器学习:SVM(核函数、高斯核函数RBF)
    机器学习:SVM(非线性数据分类:SVM中使用多项式特征和核函数SVC)
    LeetCode566. Reshape the Matrix
    LeetCode 128. Longest Consecutive Sequence
    # 线程安全 & 线程安全函数 & 线程不安全函数
    Linux进程状态
    C++ 4种强制类型转换
    TCP超时重传、滑动窗口、拥塞控制、快重传和快恢复
    LeetCode 69. Sqrt(x)
    LeetCode543. Diameter of Binary Tree
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/12219881.html
Copyright © 2011-2022 走看看