文章目录前言先看这个案例到底实现了什么小白先记住这个页面只有一个核心状态为什么这里一定要用状态先看完整代码第一眼先看 Rating({ rating: this.rating, indicator: false })rating: this.rating 是什么意思indicator: false 又是什么意思onChange 才是交互真正发生的地方为什么下面那行分数文案不是可有可无这个页面为什么很适合做评分入门这篇最值得单独记住的 3 处代码1. State rating: number 32. Rating({ rating: this.rating, indicator: false })3. .onChange((value: number) { this.rating value })真实业务里一般会怎么继续扩展小白最容易踩的坑1. 把可交互评分和只读展示混在一起2. 星星点了但结果没有地方回显3. 页面里有多个评分结果却没有统一状态源4. 默认值没有想清楚动手改一改写在最后前言评分控件看起来很简单很多人第一次看到Rating都会觉得这东西没什么可讲的不就是点几颗星然后显示一个结果吗但真到自己接业务的时候问题马上就来了。点完星以后分数怎么显示是只展示结果还是允许用户修改这个分数后面怎么提交页面上到底该把“输入”和“展示”放在一起还是拆开所以别小看这个基础案例。把这篇吃透后面你再写商品评价、内容打分、服务满意度、门店评分这类页面会顺很多。因为评分页面最核心的那条线其实在这里就已经出现了用户操作 - 状态变化 - 分数回显。先看这个案例到底实现了什么这个页面非常简洁核心部分只有两块一个可以点击的星级评分控件。一行实时变化的分数文案。用户点星星以后下面的文字会立刻变成对应的结果比如点 3 星显示评分: 3 / 5点 5 星显示评分: 5 / 5这说明它不是单纯把Rating摆在页面上而是把评分输入和结果展示连起来了。这一点非常重要。因为真实业务里评分控件几乎从来不是孤立存在的。用户点完之后页面通常还会继续做这些事同步更新分数字段展示评价等级决定是否显示意见输入框把结果提交给后端所以这个案例虽然小但它确实是评分页最基础的一块骨架。小白先记住这个页面只有一个核心状态这份代码里最关键的是这行Staterating:number3它的意思很简单页面当前的评分值先默认给3后面用户点星星时这个值会跟着变界面上所有和评分有关的显示都应该优先读它你可以把rating理解成这个页面里“关于评分的唯一标准答案”。只要这个值变了评分文案就应该跟着变如果后面要提交给接口提交的也应该是它。为什么这里一定要用状态因为评分不是死的它会被用户改。而且改完以后界面还要立刻给反馈。在 ArkUI 里这种“会变、变完还要刷新页面”的数据就应该放在状态里。这里用State目的就是让页面知道这个值不是固定写死的它会随着交互变化。先看完整代码先把代码整体看一遍后面再逐段拆/** * StarRatingBasic - Rating 基础评分 */import{PRESET_COLORS,generateListItems,PAGE_BG_COLOR,PANEL_BG_COLOR,ACCENT_COLOR,MUTED_TEXT_COLOR}from./typesEntryComponentstruct StarRatingBasic{StateisShow:booleantrueStaterating:number3build(){Column(){if(this.isShow){Column(){Text(Rating 基础评分).fontSize(16).fontWeight(FontWeight.Bold).margin({bottom:12})Rating({rating:this.rating,indicator:false}).onChange((value:number){this.ratingvalue})Text(评分:${this.rating}/ 5).fontSize(18).fontWeight(FontWeight.Bold).fontColor(ACCENT_COLOR).margin({top:16})}.width(100%).padding(16).backgroundColor(PANEL_BG_COLOR).borderRadius(12).alignItems(HorizontalAlign.Center)}Text(Rating 基础评分).fontSize(12).fontColor(MUTED_TEXT_COLOR).margin({top:12})}.width(100%).height(100%).backgroundColor(PAGE_BG_COLOR).padding(16)}}第一眼先看Rating({ rating: this.rating, indicator: false })这行代码是整个案例的核心Rating({rating:this.rating,indicator:false})它里面最值得你现在先记住的是两个点配置作用这篇里的意义rating: this.rating指定当前评分值控件默认显示多少星跟状态绑定indicator: false允许交互表示这不是只读展示而是可以点击修改rating: this.rating是什么意思它不是随便传了个数字而是把控件当前显示状态和页面里的rating状态绑在了一起。也就是说rating 3页面默认显示 3 星rating 5页面就显示 5 星这说明Rating不是自己单独保存结果而是在读取页面状态。这点很关键因为真实页面里一个评分结果往往还会被别的区域复用。比如下面的分数文案Text(评分:${this.rating}/ 5)它和评分控件读的是同一个值。这就是一个非常标准的“单一状态源”写法。indicator: false又是什么意思这个参数的作用是告诉Rating当前是可交互模式。如果你把它理解成人话就是这组星星不是拿来看结果的而是拿来让用户点的。这一点非常重要。因为评分控件在真实业务里通常有两种身份输入控件让用户自己打分。展示控件只用来显示已有评分结果。这一篇显然是第一种所以这里要写indicator:false如果你不先搞清这个区分后面做商品详情页、评论列表页时就很容易把“展示评分”和“填写评分”混在一起。onChange才是交互真正发生的地方再看这一行.onChange((value:number){this.ratingvalue})这行代码可以说是这个案例真正“活起来”的地方。它的流程很清楚用户点击某颗星。新的评分值通过value传进来。把这个值写回this.rating。页面里所有依赖rating的地方自动刷新。如果没有这一行会发生什么页面上的星星可能看起来能点但状态不会更新下面的分数文案也不会变。这样页面就只有“表面交互”没有真正的结果流转。所以在小白阶段你可以先把onChange记成一句话用户操作的结果是通过回调写回状态的。后面你学别的输入类组件时这条线还会反复出现。为什么下面那行分数文案不是可有可无看这行Text(评分:${this.rating}/ 5)很多初学者觉得既然上面已经有星星了下面这行文字是不是可以不要能不要吗可以。但不建议。因为一个更完整的评分页面通常应该给用户明确的结果反馈。星星是一种视觉反馈数字是一种结果反馈。两者放在一起用户会更清楚我刚刚点了几分当前的结果是多少这个分数是不是我想要的尤其在一些业务场景里分数后面还会继续影响别的内容比如低分时弹出改进建议输入框高分时显示“非常满意”提示不同分数映射不同评价标签所以这行文案本质上不是装饰它是评分结果的回显层。这个页面为什么很适合做评分入门因为它足够简单所以逻辑关系特别清楚一个状态rating一个输入控件Rating一个结果展示Text也正因为简单它非常适合小白先建立评分页面的基本思路。你不要一开始就想着半星、十星、自定义图标、只读模式、评分列表这些扩展能力。先把最基础的“点完星 - 状态更新 - 文案同步”这条线吃透后面扩展才不会乱。这篇最值得单独记住的 3 处代码1.State rating: number 3Staterating:number3这行代码保存的是当前评分结果。它是页面里和评分相关的核心数据源。2.Rating({ rating: this.rating, indicator: false })Rating({rating:this.rating,indicator:false})这行决定了两件事当前显示多少星当前是不是可交互评分模式如果把评分页比作一个小系统这一行就是输入入口。3..onChange((value: number) { this.rating value }).onChange((value:number){this.ratingvalue})这一行把用户点击行为和页面状态真正连了起来。没有它就不会有后面的分数同步更新。真实业务里一般会怎么继续扩展这个基础案例往前走一步很容易就能变成更完整的评分页面方向可以怎么扩展商品评价在评分下面加评论输入框服务满意度根据分数显示“很差 / 一般 / 满意 / 非常满意”内容打分评分后同步显示推荐指数表单提交点击提交按钮后把rating一起传给接口你会发现不管往哪个方向扩核心都没变还是先拿到评分值再围绕这个值做展示和业务处理。小白最容易踩的坑1. 把可交互评分和只读展示混在一起如果一个页面只是展示别人的评分结果就不该继续让用户点。输入态和展示态一定要分清。2. 星星点了但结果没有地方回显如果没有文案反馈用户虽然知道自己点了星但不一定对最终结果有足够明确的感知。尤其在复杂页面里这种回显很重要。3. 页面里有多个评分结果却没有统一状态源如果星星一份值、数字一份值、提交参数再一份值后面维护会越来越乱。一个评分结果优先让它由一个核心状态负责。4. 默认值没有想清楚这里默认写的是Staterating:number3这是为了让页面一打开就有可见效果。但如果你做真实业务默认值到底应该是0、3还是后端返回值要根据场景决定。不要直接把示例默认值照搬进线上页面。动手改一改如果你已经读懂这篇建议你顺手做几个练习把默认评分从3改成0看看首屏状态有什么变化。给不同分数加文案比如1-2 分 不满意、3 分 一般、4-5 分 满意。加一个提交按钮把当前评分打印出来。再增加一个只读Rating练习区分输入态和展示态。这几个练习都不复杂但很适合把今天这篇真正吃透。写在最后这篇案例最重要的收获不是学会了Rating这个控件本身而是建立起一种很基础、但特别常用的页面思维让用户输入一个结果再让页面把这个结果清楚地反馈出来。如果你现在还是 HarmonyOS7 新手我建议你把这篇代码亲手敲一遍再自己加一层评分文案或提交逻辑。等你把rating、onChange和结果回显这条线真正理顺后面写更完整的评价页面就不会发虚了。