《跟我一起学“Harmony-ArkTS”》——评分条组件和弹窗组件

本文链接：https://blog.youkuaiyun.com/Cool_foolisher/article/details/146436113

一、评分条组件（Rating）

评分条组件是常用于收集用户反馈的UI元素，它允许用户通过点击来选择分数。
代码案例如下：

@Entry
@Component
struct RatingPage {
  @State rating: number = 0;
  private title: string = '评分条案例';

  build() {
    Column({ space: 10 }) {
      Text(this.title)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Rating({
        rating: this.rating,
        indicator: false
      })
        .width(300)
        .height(50)
        .stars(5)
        .stepSize(0.1)
        .onChange((rating) => {
          this.rating = rating;
        })

      Text(`当前评分：${this.rating}`)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .textAlign(TextAlign.Center)
    }
    .height('100%')
    .width('100%')
  }
}

以上就是评分条组件的使用方法，更多关于评分条组件使用方法的内容，大家可以参考Rating评分条组件官方文档进行深入学习。

二、弹窗组件

弹窗组件有很多种，本案例只介绍最常用的两种弹窗组件，AlertDialog组件和自定义组件。

AlertDialog组件
AlertDialog组件是操作确认类弹出框，触发一个将产生严重后果的不可逆操作时，如删除、重置、取消编辑、停止等。
代码案例如下：

@Entry
@Component
struct AlertDialogPage {
  private title: string = '弹窗组件案例';

  build() {
    Column({ space: 20 }) {
      Text(this.title)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Button('AlertDialog组件')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          AlertDialog.show({
            title: '我是标题',
            subtitle: '我是副标题',
            message: '我是提示内容'
          })
        })

      Button('模拟删除对话空')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          AlertDialog.show({
            title: '提示',
            message: '数据删除后不可恢复，确认删除本条数据？',
            confirm: {
              value: '确定',
              action: () => {
                AlertDialog.show({
                  title: '提示',
                  message: '删除成功'
                });
              }
            }
          })
        })
    }
    .height('100%')
    .width('100%')
  }
}

以上就是AlertDialog组件的使用方法，更多关于AlertDialog组件使用方法的内容，大家可以参考AlertDialog组件官方文档进行深入学习。

自定义弹窗组件
自定义弹窗组件因为更加灵活，因此适用于各种场景，包括但不限于：广告展示、中奖通知、警告信息、软件更新提示等。
@CustomDialog装饰器用于装饰自定义弹窗组件，可以在此装饰器内进行自定义弹窗的内容。
代码案例如下：

@Entry
@Component
struct MyDialogPage {
  private title: string = '自定义弹窗组件案例';
  controller: CustomDialogController = new CustomDialogController({
    builder: MyDialog({
      cancel: () => {
        this.onCancel();
      },
      confirm: () => {
        this.onConfirm();
      }
    }),
    alignment: DialogAlignment.Center // 设置弹窗组件的对齐方式
  });

  onCancel() {
    console.log('cancel回调');
  }

  onConfirm() {
    console.log('confirm回调');
  }

  build() {
    Column({ space: 20 }) {
      Text(this.title)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Button('自定义弹窗')
        .onClick(() => {
          this.controller.open();
        })
    }
    .height('100%')
    .width('100%')
  }
}

/**
 * 自定义弹窗组件
 */
@CustomDialog
struct MyDialog {
  controller: CustomDialogController;
  cancel: Function = () => {};
  confirm: Function = () => {};

  build() {
    Column({space: 20}) {
      Text('我是自定义弹窗')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Button('cancel')
        .onClick(() => {
          this.controller.close();
          this.cancel();
        })

      Button('confirm')
        .onClick(() => {
          this.controller.close();
          this.confirm();
        })
    }
    .width('100%')
    .height('100%')
  }
}