第二十七篇(书中 9.18.4 ~ 9.18.6 节 内容)
好!开始 9.18.4节。
重点(接着昨天的重点,所以是重点4):
4、List组件的 数据源 形式。
5、通过代码,设置 List 组件绑定的皮肤。
6、List 组件的垂直布局、网格布局方式。
操作:
4、List组件的 数据源 形式。
第一种,普通字符串数组形式。
第二种,数组对象形式。这种形式的话,要搭配指定的皮肤。
第三种,自定义类呈现。
5、通过代码,设置 List 组件绑定的皮肤。
第一步:
准备素材。
创建一个 ArmorItemRenderSkin.exml 文件。
设置好数据源字段。
第二步:
创建一个关联的类。
第三步:
修改之前 的 ScrollerAndList 类,让数据由外部提供。
第四步:
创建一个数据项类。
第五步:
开始使用 ScrollerAndList 类,并设置数据源 和 ArmorItemRender 皮肤。
运行查看效果。
6、List 组件的垂直布局、网格布局方式。
第一种,垂直布局
layout.gap = 15;
每个项的垂直间距为 15。
layout.horizontalAlign = eui.JustifyAlign.JUSTIFY;
每项两端宽度自适应。
第二种,网格布局。
layout.requestedColumnCount = 3;
规定最多只能有 3 列
layout.columnAlign = eui.ColumnAlign.JUSTIFY_USING_WIDTH
让每列宽度平均。
至此,9.18节 内容结束。
呼~ 这个List组件真是够长的。
今天我弄了半天了,发现EXML文件里,像是 Label组件的text属性啊,按钮的Label属性啊,Image组件的source属性啊,不能动态的设置。
如果可以动态的设置的话,我就可以在后期自定义类里,随便设置什么{data.xxx}的了。
Egret好像不允许这样,反正如果要用到数据源字段的话。就要在EXML文件里,提前写好 Label组件的text属性,比如{data.name}什么的。
好了,今天就到这里吧。