8 猜你喜欢横向滚动列表实现方式

不知到大家在软件开发过程中,首页一般展示UI都会有1个横向的互动列表这里面会根据你的浏览记录进行埋点,去推荐你喜欢的商品。

那么话不多说,我们开始来详细描述 本地数据和猜你喜欢列表组件绑定实现过程:

在这里首先要解决ListView内部嵌套ListView实现方式这个难点

设置1个Container设置宽度和高度,接着子组件设置ListView.builder来实现

ListView内部嵌套ListView

接下来描述猜你横向列表实现方式:

1 在内部的ListView添加1个Container指定宽度和高度,制定对应的child组件为ListView.builder,并设置View的滚动方向为水平

Container指定宽度和高度

2 在ListView.builder回调函数设置内部的view布局Column+Container图片+Container文字

Column+Container图片+Container文字

3 测试当前的布局Container+ListView+Column的布局看效果,如果么有问题的话,抽出1个内部函数_hotProductList,将布局的代码放到函数里面.

_hotProductList

4 在build函数里面调用_hotProductList,测试验证,看UI效果

build函数测试

5 执行flutter run命令,模拟器看效果

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容