HarmonyOS-ArkUI固定样式弹窗（1）

固定样式弹窗指的就是ArkUI中为我们提供的一些具备界面模板性质的弹窗。样式是固定的，我们可以决定在这些模板里输入什么样的内容。常见的有，警告弹窗，列表选择弹窗，选择器弹窗，对话框，操作菜单。

下图是本文中要讲到的基类固定样式弹窗，其中选择器弹窗没有包含在内，需要开一篇新的文章专门描述。

警告弹窗

需要向用户提问或者得到用户许可的时候，可以使用警告弹窗。

警告弹窗用于提示重要信息，但会中断当前用户对界面的点击操作。尽量提必要的信息和有用的操作。
避免仅使用警告弹窗提供信息，用户不喜欢被信息丰富但不可操作的警告打断。

API

通过 UIContext中的showAlertDialog接口来实现。详情请参考下方代码！

API图示

代码案例

@Entry
@Component
struct DialogsTest1 {
  @State time:string = '记时'
  alertDialog:string = '告警弹窗'
  second: number = 0

  aboutToAppear(): void {
     setInterval(()=>{
       this.time = `记时: ${this.convertSeconds(this.second++)}`
     }, 1000)
  }

  /**
   * 获取累计时长
   * @param seconds 累计的秒数
   * @returns
   */
  convertSeconds(seconds: number) : string {
    if (typeof  this.second !== 'number' || this.second < 0) {
      return 'error'
    }
    const h = Math.floor(this.second / 3600)
    const m = Math.floor((this.second % 3600) / 60)
    const s = Math.floor(this.second % 60)
    return `${h} : ${m} : ${s}`
  }

  build() {
    RelativeContainer() {
      Text(this.time)
        .id('time')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Top},
          start: {anchor: '__container__', align: HorizontalAlign.Start},
          end: {anchor: '__container__', align: HorizontalAlign.End},
        })

      Text(this.alertDialog)
        .id('DialogsTest1HelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          top: { anchor: 'time', align: VerticalAlign.Bottom},
          start: {anchor: '__container__', align: HorizontalAlign.Start}
        })
        .margin({top: 20})
        .onClick(() => {
          //Show AlertDialog
          this.getUIContext().showAlertDialog(
            
             //单选项弹窗
            {
              message: '这是一个单按钮警告窗,这里是信息内容',
              title: '主标题',
              subtitle : '子标题',
              width: 250,
              autoCancel: true, //点击外部,触发弹窗消失
              confirm: {
                value: '确认',
                action : ()=>{
                  console.log('用户点击了确认按钮')
                }
              },
              cancel: ()=>{
                console.log('取消了,尽管我不知道是怎么触发这个取消的')
              },
              onWillDismiss : (reason: DismissDialogAction) => {
                console.log(`弹窗消失的原因是: ${reason.reason}` ) //用户点击的确认后,不回调这个函数,只有点击外部回调.
              }
          }
          
        )})
    }
    .height('100%')
    .width('100%')
  }
}

缺陷

回调尽管只有一次，但是行为分配给的回调函数逻辑混乱，不容易记清楚
标题，子标题，内容，连居中方式都没有办法调整，是相当不灵活的！
弹窗并没有提供hide操作，管出不管消失，不可控，比较鸡肋。

列表选择弹窗(ActionSheet)

列表选择弹窗适用于呈现多个操作选项

API

API图示

代码案例

@Entry
@Component
struct DialogsTest1 {
 ...

  build() {
    RelativeContainer() {
      Text(this.actionSheetDialog)
        .id('actionSheetDialog')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          top : {anchor : 'DialogsTest1HelloWorld', align : VerticalAlign.Bottom},
          start : {anchor : '__container__', align : HorizontalAlign.Start}
        })
        .onClick(()=>{
          this.getUIContext().showActionSheet(
            {
              message : '弹窗内容',
              title : '标题',
              subtitle: '子标题',
              sheets : [
                {
                  title: '1',
                  action : ()=>{
                    console.log('回调了1')
                  }
                },
                {
                  title: '2',
                  action : ()=>{
                    console.log('回调了2')
                  }
                },
                {
                  title: '3',
                  action : ()=>{
                    console.log('回调了3')
                  }
                },
                {
                  title: '4',
                  action : ()=>{
                    console.log('回调了4')
                  }
                },
                {
                  title: '5',
                  action : ()=>{
                    console.log('回调了5')
                  }
                },
                {
                  title: '6',
                  action : ()=>{
                    console.log('回调了6')
                  }
                },
                {
                  title: '7',
                  action : ()=>{
                    console.log('回调了7')
                  }
                },
              ],
              confirm: {
                enabled: true,
                value : '确认',
                action : ()=>{
                  console.log('触发了confirm action字段对应的回调')
                }
              },
              cancel : ()=>{
                console.log('回调cancel!')
              },
              width : 250
            }
          )
        })
    }
    .height('100%')
    .width('100%')
  }
}

缺陷

没办法调整内容的居中方式，看起来比较丑
对于选项内容的样式，间隔线的样式。没有办法完全接管，不是很灵活。
弹窗并没有提供hide操作，管出不管消失，不可控，比较鸡肋。

对话框

API

API图示

代码案例

 // 1 获取PromptAction对象
 // 2 调用PromptAction的showDialog接口
          let proAction: PromptAction = this.getUIContext().getPromptAction()
          proAction.showDialog({
            title: '弹窗',
            message: '弹窗message',
            backgroundColor : 'yellow',
            backgroundBlurStyle : BlurStyle.Thin,
            isModal : true,
            buttons: [
              { text: '按钮1', color: 'black', primary : true},
              { text: '按钮2', color: 'black', primary : false },
              { text: '按钮3', color: 'black', primary : false }
            ]
          }, (err, showDialogResponse) => {
            // 当弹窗消失的时候会调用,并将用户点击的按钮值给出
            console.log(`number = ${showDialogResponse.index}`)
          })

缺陷

从API看得出，界面只支持很简单的界面。复杂的搞不定。顶多就是可以设置按钮。至于按钮的颜色，背景颜色，形状全都不能设置。
消失逻辑回调是混乱的，如果弹窗上只有一个确认按钮，你是无法确认回调是用户点击确认来的，还是点击了弹窗外部而导致弹窗消失的。鸡肋！
并没有找到代码让弹窗消失的api！
这个对话框，在实际的需求中，只能满足很少量的场景，搁我是不会用这种难用的弹窗的！

操作菜单(showActionMenu)

API

API图示

代码案例

// 1 获取PromptAction对象
// 2 调用PromptAction的showActionMenug接口
          let proAction: PromptAction = this.getUIContext().getPromptAction()
          proAction.showActionMenu({
            buttons : [
              {text: '按钮1', color : 'blue'},
              {text: '按钮2', color : 'blue'},
              {text: '按钮3', color : 'blue'},
              {text: '按钮4', color : 'blue'},
              {text: '按钮5', color : 'blue'},
            ],
            title : '标题',
          }, (err, resp)=>{
            console.log(`弹窗因点击了 ${resp.index} 而消失`)
          })

缺陷

难用！很难用！甚至没法用！原因如下：
从API看得出，界面只支持很简单的界面。复杂的搞不定。顶多就是可以设置按钮。至于按钮的颜色，背景颜色，形状全都不能设置。
消失逻辑回调是混乱的，如上图日志打印，一旦回调的index是0，实际上您是无法得知用户是基于哪种情况导致弹窗消失的。
并没有找到代码让弹窗消失的api！
从API里能看出来，至多支持6个Button项目，而且Button里面描述很简单，对于复杂的界面无法支持！从量上还是界面的丰富度上都不行！
这个对话框，在实际的需求中，只能满足很少量的场景，搁我是不会用这种难用的弹窗的！

吐司

API

API图示

代码案例

// 1 获取PromptAction对象
          // 2 调用PromptAction的 showToast 接口
          let proAction: PromptAction = this.getUIContext().getPromptAction()
          proAction.showToast({
            message : '吐司',
            bottom : 100
          })

文章版权归作者所有，未经允许请勿转载。如内容涉嫌侵权，请在本页底部进入<联系我们>进行举报投诉!

THE END