【HarmonyOS 4.0】全局UI方法

1. 弹窗

1.1 Toast - 消息提示

1. 常用于显示一些简短的消息或提示，一般会在短暂停留后自动消失。

import promptAction from '@ohos.promptAction'

promptAction.showToast(options: {message: string | Resource, duration: number, bottom: string | number}): void

1.2 AlertDialog - 警告对话框

1. 用于向用户发出警告或确认操作的提示，确保用户在敏感操作前进行确认。
2. 可使用全局方法 AlertDialog.show() 显示警告对话框

1.3 ActionSheet - 列表选择弹窗

1. 用于提供一组选项给用户选择，用户从中选择后，可执行相应的操作。
2. 可使用全局方法 ActionSheet.show() 显示操作列表弹窗。

1.4 选择器弹窗

1. 用于让用户从一个列表中选择一个具体的值。

1.4.1 DatePickerDialog.show - 日期滑动选择器弹窗

1. 可使用全局方法 DatePickerDialog.show() 定义日期滑动选择器弹窗并弹出。

1.4.2 TimePickerDialog.show - 时间滑动选择器弹窗

1. 可使用全局方法 TimePickerDialog.show() 定义时间滑动选择器弹窗并弹出。

1.4.3 TextPickerDialog.show - 文本滑动选择器弹窗

1. 可使用全局方法 TextPickerDialog.show() 定义文本滑动选择器弹窗并弹出。

1.5 自定义弹窗

1. 当现有组件不满足要求时，可考虑自定义弹窗。自定义弹窗允许开发者自定义弹窗内容和样式。

1.5.1 @CustomDialog 装饰器

1. @CustomDialog 装饰器用于装饰自定义弹窗。此装饰器内进行自定义内容（也就是弹窗内容）
2. @CustomDialog 装饰的自定义组件必须包含CustomDialogController类型的属性。
4. 自定义弹窗代码模块敲 dialog 回车自动生成。
5. onAccept(value) => void：点击弹窗中的“确定”按钮时触发该回调。
6. onCancel() => void：点击弹窗中的“取消”按钮时触发该回调。
7. exitApp() => void：点击遮罩层时触发该回调。

1.5.2 代码案例如下

// 自定义弹窗组件
@CustomDialog
export struct TextInputDialog {
  @State textInputValue: string = ''
  controller: CustomDialogController = new CustomDialogController({
    builder: TextInputDialog()
  })
  confirm!: (value: string) => void

  build() {
    Column({ space: 25 }) {
      Text('请输入你的答案').fontSize(16)
      TextInput({ placeholder: '请输入纯数字' })
        .type(InputType.Number)
        .onChange((value) => {
          this.textInputValue = value
        })
      Row({ space: 35 }) {
        Button('取消')
          .width(100)
          .height(35)
          .onClick(() => {
            this.controller.close()
          })
        Button('确认')
          .width(100)
          .height(35)
          .onClick(() => {
            this.confirm(this.textInputValue)
            this.controller.close()
          })
      }
    }
    .backgroundColor(Color.White)
    .padding(20)
  }
}

// 引用自定义弹窗组件
import { TextInputDialog } from "./TextInputDialog"

@Entry
@Component
struct Index {
  @State answer: string = "?"
  controller: CustomDialogController = new CustomDialogController({
    builder: TextInputDialog({
      confirm: (value) => {
        this.answer = value
      }
    }),
    autoCancel: false,
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -10 },
    customStyle: false,
    gridCount: 4
  })

  build() {
    Column({ space: 20 }) {
      Row() {
        Text('1 + 1 = ')
          .id('HelloWorld')
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
        Text(this.answer)
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
      }

      Button('作答', { type: ButtonType.Capsule })
        .width(80)
        .height(35)
        .onClick(() => {
          this.controller.open()
        })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}