HarmonyOS NEXT鸿蒙开发ArkUI:案例-评价界面(Rating组件、TextArea组件) 作者:马育民 • 2025-11-18 10:47 • 阅读:10006 # 介绍 实现评价界面 ### 代码 ``` import { faceDetector } from '@kit.CoreVisionKit' @Entry @Component struct Index { // 定义rating状态变量 @State fen:number = 3 // 定义多行输入框评价的状态变量 @State pingjia:string = "" build() { Column(){ Row(){ Text("评价:") // Rating({ rating: $$this.fen, // 绑定状态变量,分值 indicator:false // 用于展示,不能修改,整体变小 }) .stars(6) // 星的总数,总分数 .stepSize(1) // 步长,默认是0.5,分的间隔最小是0.5 .onChange( item =>{ // console.log("分值:",item) // 星的数量,即:设置的分值 }) } .margin({ left:10, }) .width("100%") TextArea({ text:$$this.pingjia, // 绑定状态变量 placeholder:"少麻少辣,放门口" }) .height(180) .margin({ left:10, right:10, top:10, }) Button("发 布") .onClick( item=>{ console.log("分值:",this.fen) console.log("评价:",this.pingjia) }) .margin({ top:20 }) .width(120) } // 设置宽度 + 设置水平居中 .width("100%") .alignItems(HorizontalAlign.Center) // 垂直居中,要注意:得有足够的高度 // .justifyContent(FlexAlign.Center) .height("100%") } } ``` 原文出处:http://malaoshi.top/show_1GW2FSTP03zy.html