布局列表框：只需两步，自定义列表从未如此简单！

列表显示框，仅仅是显示文字的列表。如果需要制作一个图文列表，显示图片和标题怎么办呢？如果还需要加入按钮，又怎么办呢？

初学的做法：将图像框、标签和按钮等放到水平布局中摆好，复制出所需要数量的布局并放到垂直滚动布局中。这种做法在少量数据的时候还凑合，如果是几十上百条记录的列表，又该怎么做？

中级的做法：知道使用扩展组件，寻找到合适的列表扩展后直接使用。这种做法的优点是用法简单，但是受扩展组件的限制，只能实现扩展组件支持的列表样式。由于扩展组件不支持在设计视图中可视化设计，操作不直观且容易出错。

高级的做法：与初学的做法类似，但是知道不应该重复（程序设计的基本原则：DRY，Don't Repeat Yourself），将在设计视图中复制组件，改为逻辑视图中的“动态创建”组件。遍历数据，然后调用垂直滚动布局的“创建”块生成组件，使用“任意”块设置组件的属性，使用通用事件块或事件回调处理交互事件。这种做法可以自由生成各种列表，但是使用复杂。

布局列表框，是列表显示框的升级和替代。顾名思义，布局列表框列出的是一个个的布局，而布局里面则可以摆放各种可见组件。对比布局列表框与列表显示框的组件属性，布局列表框增加了布局模式、滚动停止模式等设置。又有选中颜色、文本颜色等，与列表显示框相同的组件属性。如果未在布局列表框中拖入布局，就当做列表显示框使用。

图1 布局列表框与列表显示框的组件属性差异

布局列表框，WxBit 图形化编程原创，只需两步就能创建包含图片、文字、按钮等各种组件的复杂列表，让初学者也会用的自定义列表。

第一步：在设计视图，将布局拖入布局列表框，第一层只能是水平布局或垂直布局。设计一个支持“点赞”和“踩踩”的图文列表，如图2所示。

图2 支持“点赞”和“踩踩”的图文列表

列表中的布局，名字前面有个星号，而且多了个“模板类型”属性。布局列表组件根据设置的数据，自动选取某个布局并动态创建该布局及其内部的组件，只需在逻辑视图的“遍历数据”事件中设置布局内组件的属性即可实现动态列表。星号表明这个组件是一个模板，可能不显示或显示多次，取决于设置到列表的数据。有6种内置的模板：

1、空列表：当列表的数据为空时显示该布局。
2、列表项：这是默认的模板类型，如果没有使用模板类型映射回调函数对数据进行映射，则每一项数据都对应到该布局。
3、分组：当某项数据映射为分组类型，即某项数据的模板类型映射回调函数返回值为 2 时，显示该布局。分类布局默认悬浮于列表之上，可以在列表的组件属性中取消悬浮。
4、头部：在首个数据前面显示的布局。
5、尾部：在最后数据后面显示的列表。
6:、加载更多：当全部数据显示完，显示尾部布局，再往上滑动列表时显示该布局，用于动态加载更多数据。

在设计视图的列表中，每种类型的布局，只允许有 1 个。运行时列表根据显示的需要，自动创建对应的列表项布局。当滚动列表使某个列表项布局滑出屏幕，该布局会被重用，这是布局列表框的重要特性。因为列表中布局的数量不会跟随数据量的增加而增加，可用于显示大量数据。但是，如果布局中有高德地图等重型组件，将导致布局无法被重用。

如果数据需要对应更多的列表项模板，可以使用预留的4个自定义类型，在模板类型映射回调函数返回对应的值实现。如果需要更多的自定义类型呢？通过在逻辑视图动态创建布局模板实现，本篇教程不展开介绍。

第二步：在逻辑视图，从布局列表框拖出“遍历数据”事件，读取数据并设置组件的属性，如图3和图4所示。

图3 遍历数据