本教程主要介绍如何使用中继器和动态面板制作评分组件。

首先效果图：

演示链接：https://e1dizv.axshare.com

文章主要分为绘制元件、添加交互、文章小结三部分。

一、绘制元件

1. 【中继器】：绘制一个中继器，命名为“Rate”；将布局改为水平；

    在中继器“Rate”中添加“Hover”、 “Selected”两列，添加5行数据，全部设置为“0”； 

    备注：Hover列控制五角星的选中效果，Selected列存储五角星的选中状态；行数决定五角星的个数（PS：看不懂可先进行下一步）。

2. 【中继器面板】：右键给中继器“Rate”创建动态面板，将面板命名为“RatePanel”

     备注：创建面板是为了后续在面板上添加交互，也可创建组，在组上添加交互。

3. 【五角星】：打开中继器“Rate”，选中里面的矩形，右键“选择形状”将其改为五角星，命名为“Icon”，设置大小为24*24，去掉边框，填充颜色； 

4. 【五角星面板】：右键给五角星“Icon”创建动态面板，命名为“IconPanel”；设置大小30*24；

     备注：创建面板是为了隔出五角星之间的距离，也为了后续在面板上添加交互。

二、添加交互

1. 【五角星】：设置五角星“Icon”的交互样式：选中时改变填充颜色；

2. 【五角星】：为五角星“Icon”的【载入时】事件添加动作：将“Hover”值为“1”的设置选中；

3. 【五角星】：为五角星“Icon”的【单击时】事件添加动作：

    更新行：将大于当前“index”值的“Selected”值设置为“0”；

    更新行：将小于等于当前“index”值的“Selected”值设置为“1”；

    添加交互后截图如下：

4. 【五角星面板】：为五角星面板“IconPanel”的【移入时】事件添加动作：

    更新行：将大于当前“index”值的“Hover”值设置为“0”；

    更新行：将小于等于当前“index”值的“Hover”值设置为“1”；

    添加交互后截图如下：

5. 【中继器】：删除中继器“Rate”的【每项加载】事件的所有动作；

6. 【中继器面板】：为中继器面板“RatePanel”的【移出时】事件添加动作：

    更新行：用“Selected”值替换“Hover”值；

    添加交互后截图如下：

三、文章小结

1. 可以将五角星替换为其他形状，例如心形；

2. 可以给评分添加文字描述，例如选中5个星时显示“极好”。