HarmonyOS开发实战指南：ArkUI实现Toast弹窗方案

代码中的爱马仕

于 2024-07-14 22:22:34 发布

阅读量800

点赞数 11

分类专栏：鸿蒙 OpenHarmony HarmonyOS 文章标签：前端 harmonyos ui 华为鸿蒙鸿蒙开发 android

本文链接：https://blog.csdn.net/DMZDAMS/article/details/140424460

版权

鸿蒙同时被 3 个专栏收录

187 篇文章 2 订阅

订阅专栏

OpenHarmony

185 篇文章 0 订阅

订阅专栏

HarmonyOS

181 篇文章 1 订阅

订阅专栏

可以通过使用自定义弹窗和定时器达到类似Toast的效果。

场景一：自定义弹窗实现弹窗中加入icon和文字，支持Button。

方案：

⦁ 使用@CustomDialog装饰器装饰自定义弹窗，在此装饰器内进行自定义内容（也就是弹框内容）、并创建构造器，与装饰器呼应相连。

⦁ 使用定时器，在页面的生命周期onPageShow中设置定时任务，页面显示时打开弹窗。

核心代码

@CustomDialog 
struct CustomDialogExample { 
  controller?: CustomDialogController 
 
  build() { 
    Row() { 
      Image($r('app.media.huawei')) 
        .height(60) 
        .width(60) 
        .margin(20) 
        .borderRadius(10) 
      Text('Toast弹窗') 
      Button('进入') 
        .onClick(() => { 
          if (this.controller != undefined) { 
            this.controller.close() 
          } 
        }) 
        .margin(20) 
    } 
    .width('100%') 
    .backgroundColor(Color.Grey) 
  } 
} 
 
@Entry 
@Component 
struct CustomDialogUser { 
  dialogController: CustomDialogController | null = new CustomDialogController({ 
    builder: CustomDialogExample(), 
    autoCancel: true, 
    alignment: DialogAlignment.CenterStart, 
    offset: { dx: 10, dy: 10 }, 
    gridCount: 4, 
    showInSubWindow: false, 
    isModal: true, 
    customStyle: false, 
    cornerRadius: 10, 
  }) 
 
  // 使用定时器,在页面的生命周期 onPageShow中设置定时任务，页面显示时打开弹窗 
  onPageShow() { 
    setTimeout(() => { 
      if (this.dialogController != null) { 
        this.dialogController.open() 
      } 
    }, 2000); 
  } 
 
  build() { 
    Column() { 
      // ... 
    } 
  } 
}

场景二：自定义弹窗样式。

⦁ 可自定义弹窗位置，5.0规格，未设置alignment弹窗默认居中显示。

⦁ 可设置弹窗宽度、高度。gridCount弹窗宽度占栅格宽度的个数最大为4栅格宽度（400vp）,API 12可通过width和height属性指定宽高。

弹窗高度最大值：0.9 *（窗口高度 - 安全区域）

⦁ 可设置是否有蒙层，有蒙层时可自定义蒙层颜色。

⦁ 可设置弹框边框样式、边框宽度、边框颜色。

⦁ 可设置弹窗背板阴影、模糊材质。

方案：

⦁ 使用@CustomDialog装饰器装饰自定义弹窗，在此装饰器内进行自定义内容。

⦁ 创建构造器时CustomDialogController时，customStyle为true,弹窗的样式则为装饰器内自定义的弹窗内容的样式。弹窗位置，是否为模态窗口、蒙层颜色则需要在构造器内使用。

核心代码

@CustomDialog 
struct CustomDialogExample02 { 
  controller?: CustomDialogController 
 
  build() { 
    Row() { 
      Text('为您更新一组内容') 
        .fontColor(Color.White) 
        .margin({ left: 5 }) 
    } 
    .borderRadius(25) 
    .width('40%') 
    .height(40) 
    .backgroundColor('#33FF66') 
  } 
} 
 
@Entry 
@Component 
export struct TestSubtab { 
  @State currentIndex: number = 0 
  @State changeValue: string = '' 
  controller: SearchController = new SearchController() 
  dialogController: CustomDialogController | null = new CustomDialogController({ 
    builder: CustomDialogExample02(), 
    autoCancel: true, // 是否允许点击遮障层退出，true表示关闭弹窗。 
    alignment: DialogAlignment.TopStart, // 弹窗在竖直方向上的对齐方式。 
    offset: { dx: 100, dy: 10 }, // 弹窗相对alignment所在位置的偏移量。 
    showInSubWindow: false, // 弹窗显示在应用内，而非独立子窗口。 
    isModal: true, // 设置弹窗是否为模态窗口，也就是是否有蒙层 
    customStyle: true, // 弹窗容器样式是否自定义。 
    maskColor: Color.Transparent // 自定义蒙层颜色。这里设置蒙层为全透明 
  }) 
 
  onPageShow() { 
    setTimeout(() => { 
      if (this.dialogController != null) { 
        this.dialogController.open() 
      } 
    }, 2000); 
  } 
 
  build() { 
    Column() { 
      // .... 
    } 
  } 
}

场景三：自定义弹窗实现弹窗打开时有从底部向上弹出的效果，以及关闭时从下消失的效果。

方案：

当前自定义弹窗的openAnimation和closeAnimation只能实现弹窗原地打开的相关动画设置，无法设置弹窗位置上变化的效果。为了避免弹窗原地打开关闭，这里选择通过给弹窗设置组件转场动画（transition）来实现。当然也可以根据具体想要实现的效果选择其他动画来自定义弹窗动画。

⦁ 设置动画事件为500ms组件转场时插入的起点和删除的终点为屏幕以下300vp。

⦁ 在删除的时候需要注意，如果弹窗直接关闭是没有转场效果的，可以先用显隐控制，删除时，设置弹窗为隐藏，此时弹出向下退出的动效生效，再设置延时关闭弹窗。

核心代码

@CustomDialog 
struct CustomDialogExample01 { 
  controller: CustomDialogController 
  @State showFlag: Visibility = Visibility.Visible; 
 
  build() { 
    Column() { 
      Row() { 
        Image($r('app.media.huawei')) 
          .height(60) 
          .width(60) 
          .margin(20) 
          .borderRadius(10) 
        Text('Toast弹窗') 
        Button('进入') 
          .onClick(() => { 
            this.cancel(); 
          }) 
          .margin(20) 
      } 
      .width('100%') 
      .backgroundColor(Color.Grey) 
    } 
    .width("100%") 
    .height(100) 
    .backgroundColor(Color.Pink) 
    .visibility(this.showFlag) 
    // 核心代码 设置动画事件为500ms ，设置组件转场时插入的起点和删除的终点为屏幕以下300vp 
    // 弹窗显示和消失配置为相同的过渡效果（出现和消失互为逆过程） 
    // 出现时从指定的透明度为0、沿y轴平移300vp，变为默认的透明度为1，透明度与旋转动画时长都为500ms 
    // 消失时从默认的透明度为1、沿y轴平移300vp，变为指定的透明度为0，透明度与旋转动画时长都为500ms 
    .transition(TransitionEffect.OPACITY.animation({ duration: 500 }) 
      .combine(TransitionEffect.translate({ y: 300 }))) 
  } 
 
  // 在删除的时候需要注意，如果弹窗直接关闭是没有转场效果的，可以先用显隐控制， 
  // 设置弹窗为隐藏，此时弹出向下退出的动效生效，再设置延时关闭弹窗。 
  cancel() { 
    this.showFlag = Visibility.Hidden 
    setTimeout(() => { 
      this.controller.close() 
    }, 500) 
  } 
}

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

点击领取→【纯血版鸿蒙全套最新学习资料】（安全链接，放心点击）希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、（南向驱动、嵌入式等）鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

鸿蒙（HarmonyOS NEXT）最新学习路线