小程序里面的布局方式

小程序的图片上这里使用的是warp布局,因为首页里面火爆专区,已经用过了warp来布局了。

所以这里我们没有必要再讲一遍,这里我们使用ListView,我们把它布局成下图这种形式:

我们拆的散一点,用内部方法的形式,我们把图片和名称分别拆成单独的方法去实现,然后在组合成一个子项赋值给ListView

开始写内部方法

图片widget

如果图片很大的话,我们需要设定一个限制,这个时候就体现出来这个外层套一个Container的好处。很容易给外层这个Container加上限制

商品名称widget

还是用内部方法的形式

文字最多显示2行,如果超出了两行就显示省略号

这种文字比较多的就显示2行

我们还要设置文字越界的问题,这行我们设置的最多显示两行和超出显示省略号才会起作用,然后再设置padding 左侧的间距 不和左边的图片紧挨着。这里都在外层套的Container上设置了。

价格的widget

价格是有一个商城价格,后面是市场价格,这里就采用Row的形式

我们需要给这个组件加上margin和上面的标题 有间距

组合起来各个widget

因为要增加点击事件,点击后要跳转到详情页面,所以我们最外层返回的widget是InkWell

先横向布局,再列布局,先用Row左右分开,然后右边是上下分开用Column

这样就形成了我们的子项

加一些修饰的东西,例如每一项的下面有下划线,上下的边距。我们在Container里面做这些事

decoration:主要做的是背景和下面的边框线

到build方法里组件我们的ListView.我们当前build方法现在还只是一个ListView

现在来组件我们的ListView,最好设置宽和高,否则就会报溢出的错误

宽:750-180=570

高:拿不准,就随便给个1000吧

这里我们还是用动态构造方法的ListView也就是。ListView.builder()

报错:无法启动AVD模拟器

0:44    IDE and Plugin Updates: The following plugin is ready to update: Flutter
0:44    IDE and Plugin Updates: The following components are ready to update: Android Emulator, Google APIs Intel x86 Atom System Image

Warning: SetProcessDpiAwareness(2) failed: COM error 0xffffffff80070005  (Unknown error 0x0ffffffff80070005), using 2 ((null):0, (null))
INFO: QtLogger.cpp:66: Warning: SetProcessDpiAwareness(2) failed: COM error 0xffffffff80070005  (Unknown error 0x0ffffffff80070005), using 2 ((null):0, (null))

0:55    IDE and Plugin Updates: The following plugin is ready to update: Flutter
0:55    IDE and Plugin Updates: The following components are ready to update: Android Emulator, Google APIs Intel x86 Atom System Image

点击升级flutter

升级Android Emulator

升级完avd模拟器可以正常显示了了 卧槽。。。。。。。

正常显示的样子

效果的展示:

效果又出来了 但是又溢出了

代码修复一个地方

超出显示省略的地方,原来写错了,写成分割了。

解决溢出的问题

改成974高度基本山差不多

Flutter移动电商实战 --(30)列表页_商品列表UI界面布局的更多相关文章

  1. Flutter实战视频-移动电商-30.列表页_商品列表UI界面布局

    30.列表页_商品列表UI界面布局 小程序里面的布局方式 小程序的图片上这里使用的是warp布局,因为首页里面火爆专区,已经用过了warp来布局了. 所以这里我们没有必要再讲一遍,这里我们使用List ...

  2. Flutter实战视频-移动电商-28.列表页_商品列表后台接口调试

    28.列表页_商品列表后台接口调试 主要调试商品列表页的接口 这个接口是最难的因为有大类.小类还有上拉加载 先配置接口 config/service_url.dart //const serviceU ...

  3. Flutter实战视频-移动电商-29.列表页_商品列表数据模型建立

    29.列表页_商品列表数据模型建立 简历数据模型 json生成dart类的网站: https://javiercbk.github.io/json_to_dart/ json数据 {",&q ...

  4. Flutter移动电商实战 --(28)列表页_商品列表后台接口调试

    主要调试商品列表页的接口 这个接口是最难的因为有大类.小类还有上拉加载 先配置接口 config/service_url.dart //const serviceUrl='http://test.ba ...

  5. Flutter移动电商实战 --(29)列表页_商品列表数据模型建立

    简历数据模型 json生成dart类的网站: https://javiercbk.github.io/json_to_dart/ json数据 {"code":"0&qu ...

  6. Flutter移动电商实战 --(35)列表页_上拉加载更多制作

    右侧列表上拉加载配合类别的切换 上拉加载需要一个page参数,当点击大类或者小类的时候,这个page就要变成1 provide内定义参数 首先我们需要定义一个page的变量 下图是我们之前在首页的时候 ...

  7. Flutter移动电商实战 --(34)列表页_小BUG的修复

    当高粱酒的子类没有数据返回的时候就会报错. 解决接口空数据报错的问题 没有数据的时候,给用户一个友好的提示, 我们没有数据的时候还要告诉用户,提示一下他没有数据,在我们的右侧列表的build方法内去判 ...

  8. Flutter移动电商实战 --(33)列表页_子类和商品列表交互效果

    主要实现点击小类下面的列表跟着切换 获取右侧下面的列表信息,即要传递大类的id也要传递小类的,所以需要把左侧的大类的id也要Provide化 可以看下网站上的接口说明: https://jspang. ...

  9. Flutter移动电商实战 --(32)列表页_小类高亮交互效果制作

    点击大类右侧的横向的小类红色显示当前的小类别 解决之前溢出的问题: 先解决一个bug,之前右侧的这里设置的高度是1000,但是有不同的虚拟机和手机设别的问题造成了溢出的问题 Expaned是有伸缩能力 ...

随机推荐

  1. 映射重复导致的错误:Ambiguous handler methods mapped for HTTP path

    转自:https://cloud.tencent.com/developer/article/1372150 出现了两个名称一样的映射,会报如下错误: 原因: 解决方法: 出现Ambiguous Ma ...

  2. drunk_admin_hacking_challenge靶机之旅?

    注:  只是记录本人玩的时候发现的新奇点  如果你也想玩且看了这篇文章还是不会,请联系gg 靶机下载地址 https://www.vulnhub.com/entry/drunk-admin-web-h ...

  3. nRF24L01无线介绍

    CE:RX或TX模式选择 CSN:SPI片选信号 SCK:SPI时钟 MOSI:SPI数据输入 MISO:SPI数据输出 IRQ:可屏蔽中断脚 51测试程序 实测可用! #define TX_ADR_ ...

  4. 阿里Java架构师打包 FatJar 方法小结

    在函数计算(Aliyun FC)中发布一个 Java 函数,往往需要将函数打包成一个 all-in-one 的 zip 包或者 jar 包.Java 中这种打包 all-in-one 的技术常称之为 ...

  5. macro 标签,和静态文件,以及templates

    1 模板 -Templates 1 什么是模板 模板,在Flask中就是允许响应给用户看的网页在模板中,允许包含“占位变量”来表示动态的内容 模板最终也会被解析成字符串再响应给客户端,这一过程通常称为 ...

  6. gcc生成so文件

    准备三个文件test.h, test.c, main.c test.h #include <stdio.h> void say_hello(); test.c #include " ...

  7. 说一下 runnable 和 callable 有什么区别?(未完成)

    说一下 runnable 和 callable 有什么区别?(未完成)

  8. zencart用sql语句设置默认语言

    有时候拷贝站的时候,由于语言文件的缺失,导致页面空白,需要将默认语言更改为英语,以下sql语句可以一定搞定: UPDATE `configuration` SET `configuration_val ...

  9. spring实例化二:SimpleInstantiationStrategy

            spring对类的实例化,定义了接口InstantiationStrategy,同时先做了个简单实现类SimpleInstantiationStrategy.采用实现部分,抽象部分的策 ...

  10. spring replaced method 注入

           replaced method注入是spring动态改变bean里方法的实现.需要改变的方法,使用spring内原有其他类(需要继承接口org.springframework.beans ...