zoukankan      html  css  js  c++  java
  • 9-14【实战应用】-底部卡片实现-1

    实现底部卡片的入口。分为上面的title,第二行是两个大的卡片。第三行底部是四个小的卡片。

    拆分成3行。
    在sub_nav.dart的基础上复制一个,叫做sales_box.dart



    build方法代码该删的删 ,现在是这样

    重点实现items

    在这里提供一个doubleItem的方法

    下面来实现doubleItems。返回widget。参数接收一个左边卡片model,再接收一个右边卡片的model

    再加俩参数,big表示是否是大卡片。last表示是否是最后一个卡片。

    然后用Row布局,里面再调用item方法,item方法增加参数,left是否是左边的 last是否是最后的。



    上面调用_doubleItem方法


    然后互第二行 第三行参数都传进去

    实现第一行title栏

    左边是图片,右边是文字。下面还有一个下划线。

    下划线用decoration装饰器。

    实现第一行的布局,是行排列的。就是Row。然后设置排列方式。

    左边图片的设置

    右边的文字,用一个Container。然后右边设置padding
    设置padding是为了文字和红色背景之间预留空间。设置margin是为了整个红色块与右边的距离。

    装饰器设置为圆角的效果,

    设置渐变色,线性渐变。LinearGradient接收两个colors一个是开始颜色一个结束的颜色



    设置线性渐变,从哪个位置开始,设置为从左到右的线性渐变。

    希望有个点击效果,所以用GestureDetector嵌套,增加点击事件,跳转到活动页就可以了。


     

    结束

  • 相关阅读:
    codevs 1993草地排水
    欧拉筛板子
    约数和问题 (codevs2606 && 洛谷2424)
    排列组合
    Picture poj1177
    楼房 洛谷1382 && codevs2995
    洛谷P1027 Car的旅行路线
    codevs1020 孪生蜘蛛
    HDU1269 迷宫城堡
    洛谷P1078 文化之旅
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/12210064.html
Copyright © 2011-2022 走看看