• 9-15【实战应用】底部卡片实现-2


    设置child要显示的文字

    把创建好的卡片都添加进去

    首页调用

    上面定义变量

    loadData的时候对数据进行初始化

    调用,并传入model

     

    运行测试

    并没有显示任何东西

    并抛出了一些异常

    SalesBox布局的约束有问题

    因为代码是拿着之前subNav的代码改的,所以有些代码的地方需要修改。例如这的Expaned要删除掉。

    图片分为这种大图和小图的形式,无论大图还是小图,宽度都占屏幕的二分之一。小图的高度占大图的2分之一。

    所以我们要根据图片的大小来控制它的宽和高

    彩蛋

    获取屏幕的宽度。获取到了宽度除以2再减去5 ,这个5是减去的padding


    _item方法再加一个参数,要知道它是不是大图

    如果是大图就是129,高度,小图的话就是80的高度。

    因为图片需要设置分割线,所以外层需要前天一个Container

    设置装饰器

    上面设置BorderSide。宽度和颜色

    再来设置底边,如果是最后一个我们就设置,不是就不设置。

    设置图片显示方式,撑满

    这里把big参数传进去

    再次运行测试

    右边布局超出了边界的情况。第二行本来应该是小图,但是显示的高度还不一样。

    修改代码

    首先来看这里的小图为什么会有问题

    是否是大图的参数传错了。这里应该用false

    这行小图就解决了。但是右边还是溢出

    溢出很有可能是图片的宽度出现了问题。也就是我们在算图片宽度的时候。因为我们左右边距的存在。
    我们在首页的这里设置了左右的边距。


    所以我们最后减去左右的边距,再减去中间的线。

    在看效果 就好了。

    回顾

    最左边放了一个网络的图片

    右边用container设置了圆角脚边的背景

    里面放了这样一段文字

    点击文字可以跳转到对应的活动页

    彩蛋

    就是如何获取屏幕的宽度
    通过MediaQuery.of(context).size.width获取到宽度。

    所有组件的高度加起来不能超过屏幕的宽度,不然就会弹出警告。
     

    结束

    ​​​​

  • 相关阅读:
    HTML5表单_form
    HTML第二篇
    快速创建1000个目录
    centos7忘记root密码重置
    centos7更改网卡名称
    centos7磁盘在线扩容
    sqlserver开启远程访问
    安装php后无法动态加载库
    编译openssl和Apache报错checking for SSL_CTX_new... no
    centos6.5设置key登录
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/12210110.html
Copyright © 2020-2023  润新知