HarmonyOS NEXT鸿蒙开发ArkUI：案例-评价界面（Rating组件、TextArea组件）-马育民老师

# 介绍

实现评价界面

### 代码

```
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