美文网首页
8 猜你喜欢横向滚动列表实现方式

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

作者: flyfishcxy | 来源:发表于2023-05-11 09:49 被阅读0次

    不知到大家在软件开发过程中,首页一般展示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命令,模拟器看效果

    相关文章

      网友评论

          本文标题:8 猜你喜欢横向滚动列表实现方式

          本文链接:https://www.haomeiwen.com/subject/qykssdtx.html