列表显示框,仅仅是显示文字的列表。如果需要制作一个图文列表,显示图片和标题怎么办呢?如果还需要加入按钮,又怎么办呢?
初学的做法:将图像框、标签和按钮等放到水平布局中摆好,复制出所需要数量的布局并放到垂直滚动布局中。这种做法在少量数据的时候还凑合,如果是几十上百条记录的列表,又该怎么做?
中级的做法:知道使用扩展组件,寻找到合适的列表扩展后直接使用。这种做法的优点是用法简单,但是受扩展组件的限制,只能实现扩展组件支持的列表样式。由于扩展组件不支持在设计视图中可视化设计,操作不直观且容易出错。
高级的做法:与初学的做法类似,但是知道不应该重复(程序设计的基本原则:DRY,Don't Repeat Yourself),将在设计视图中复制组件,改为逻辑视图中的“动态创建”组件。遍历数据,然后调用垂直滚动布局的“创建”块生成组件,使用“任意”块设置组件的属性,使用通用事件块或事件回调处理交互事件。这种做法可以自由生成各种列表,但是使用复杂。
布局列表框,是列表显示框的升级和替代。顾名思义,布局列表框列出的是一个个的布局,而布局里面则可以摆放各种可见组件。对比布局列表框与列表显示框的组件属性,布局列表框增加了布局模式、滚动停止模式等设置。又有选中颜色、文本颜色等,与列表显示框相同的组件属性。如果未在布局列表框中拖入布局,就当做列表显示框使用。
图1 布局列表框与列表显示框的组件属性差异
布局列表框,WxBit 图形化编程原创,只需两步就能创建包含图片、文字、按钮等各种组件的复杂列表,让初学者也会用的自定义列表。
第一步:在设计视图,将布局拖入布局列表框,第一层只能是水平布局或垂直布局。设计一个支持“点赞”和“踩踩”的图文列表,如图2所示。
图2 支持“点赞”和“踩踩”的图文列表
列表中的布局,名字前面有个星号,而且多了个“模板类型”属性。布局列表组件根据设置的数据,自动选取某个布局并动态创建该布局及其内部的组件,只需在逻辑视图的“遍历数据”事件中设置布局内组件的属性即可实现动态列表。星号表明这个组件是一个模板,可能不显示或显示多次,取决于设置到列表的数据。有6种内置的模板:
1、空列表:当列表的数据为空时显示该布局。
2、列表项:这是默认的模板类型,如果没有使用模板类型映射回调函数对数据进行映射,则每一项数据都对应到该布局。
3、分组:当某项数据映射为分组类型,即某项数据的模板类型映射回调函数返回值为 2 时,显示该布局。分类布局默认悬浮于列表之上,可以在列表的组件属性中取消悬浮。
4、头部:在首个数据前面显示的布局。
5、尾部:在最后数据后面显示的列表。
6:、加载更多:当全部数据显示完,显示尾部布局,再往上滑动列表时显示该布局,用于动态加载更多数据。
在设计视图的列表中,每种类型的布局,只允许有 1 个。运行时列表根据显示的需要,自动创建对应的列表项布局。当滚动列表使某个列表项布局滑出屏幕,该布局会被重用,这是布局列表框的重要特性。因为列表中布局的数量不会跟随数据量的增加而增加,可用于显示大量数据。但是,如果布局中有高德地图等重型组件,将导致布局无法被重用。
如果数据需要对应更多的列表项模板,可以使用预留的4个自定义类型,在模板类型映射回调函数返回对应的值实现。如果需要更多的自定义类型呢?通过在逻辑视图动态创建布局模板实现,本篇教程不展开介绍。
第二步:在逻辑视图,从布局列表框拖出“遍历数据”事件,读取数据并设置组件的属性,如图3和图4所示。
图3 遍历数据
点击模板布局中的组件,只能看到一个绿色的组件实例块,并没有其他属性和方法。虽然这个组件在设计视图中,却不是静态组件,不能使用名字获得。将绿色块拖出,可以看到组件的名字被用作标签,是一组根据标签获取组件的块,需使用“任意组件”里面的方法设置组件属性,如图4所示。
图4 遍历数据设置组件属性
简简单单的两步,就完成了列表的设计与数据绑定。
想要正常显示,我们需要给列表设置数据,为方便讲解,我们直接在屏幕初始化时生成测试数据,如图5所示。
图5 生成测试数据
连接调试助手,预览效果如图6所示。
图6 连接调试助手预览
因为测试数据中没有设置标题图,也没有在遍历数据时设置标题图,所以左边标题图的位置为空。下面我们介绍进阶用法,增加列表头部、尾部和分组,如图7所示。
图7 增加列表头部、尾部和分组
在布局列表中,分组是一种特殊的数据项。我们在每10项数据的前面增加一个分组,同时还要设置模板类型映射回调函数,如图8所示。
图8 在数据列表中添加分组
在遍历数据时,根据当前数据项对应的模板类型,设置分组或数据项布局内的标签,如图9所示。
图9 显示分组信息
连接调试助手,预览效果如图10所示。
图10 悬浮分组
点赞和踩踩按钮,怎么样设置动作呢?因为布局被重用,显然不能直接设置图像框的点击事件。在遍历数据时,给图片设置扩展属性,标记所绑定数据的编号,然后在任意图像框的“当某个图像框被点击”事件中根据图片判断按钮,根据扩展属性中存储的编号执行动作,如图11和图12所示。
图11 设置图片的扩展属性
图12 当某个图像框被点击事件
注意:布局列表框中的组件默认不响应点击事件,需要在设计视图勾选“是否启用点击”。如果某个组件启用点击,点击该组件则不会选中列表项。
原文链接:布局列表框:只需两步,自定义列表从未如此简单!,转载请注明来源!