3.9 Rating组件 原创 精华
本节讲解评分条组件Rating的两种基本使用方法:用作表单组件和用作展示组件。
首先我们看下Rating组件的接口、属性和事件的说明:
1. 用作表单组件
Rating组件用作表单组件时,通常需要配合onChange事件获得评分后的值,用于后续表单提交的参数值。接口参数rating是必须提供的,indicator参数不需要提供。属性.stars、.stepSize和.starStyle的默认值能满足我们绝大部分场景下的需要,所以也不需要提供。示范代码如下:
实际项目中可以将上述H8和TextBody1的文本改为文本资源调用(string.json),以适应多语言显示的需要。运行效果如下:
2. 用作展示组件
将Rating组件用作展示组件时,需要设置接口参数indicator为true,使Rating组件不可操作。示范代码如下:
运行效果如下:
这里有三个小问题:
1.评分组件展示的颗粒度最小为0.5,无法表现3.7分,只能“四舍五入”后展示。3.7分和3.5分效果相同,3.8分和4分效果相同。
2.indicator赋值true后,虽然点击后不会改变评分值,但是“五角星”变得很小了。
3.上述代码中我故意使用了onChange事件,发现仍然可以捕捉评分值,但永远是3.5(最接近3.7的分值)。当然,实际应用中,如果Rating组件用作展示组件,不要写onChange事件。
基于上述Beta版组件的不足,我的使用建议是不要使用indicator参数,而是用enabled属性实现效果。代码如下:
现在,外观恢复正常了,onChange事件也彻底失效了。效果如下:
OK,上面是个小插曲,现在正式演示Rating组件作为展示组件的完整用法,代码如下:
效果如下:
最后,提醒一点,当前评分总数建议不要设置(使用默认值5即可)。如果设置为10,你会发现,Rating组件宽度不变,图片会被压缩变形。
【源码地址:https://gitee.com/cloudev/harmonyos3/tree/master/3.0/BaseComponent 】
每天看到老师的文章打卡学习。