Harmony开发之Toast效果

在HarmonyOS应用开发中，我们经常需要展示一些短暂的信息提示给用户，类似于Android中的Toast。本文将介绍如何利用自定义弹窗和定时器来实现这种功能。我们将通过几个不同的场景来探讨这一主题，并附带相应的代码示例。

场景一：基本的自定义弹窗实现

在这个场景中，我们需要创建一个带有图标、文本和按钮的基本弹窗，并且这个弹窗会在页面显示后两秒自动出现。

@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() { 
    setTimeout(() => { 
      if (this.dialogController != null) { 
        this.dialogController.open() 
      } 
    }, 2000); 
  } 
  
  build() { 
    Column() { 
      // 页面内容 
    } 
  } 
}

场景二：自定义弹窗样式

接下来，我们将进一步自定义弹窗的样式，包括位置、尺寸、背景色等。

@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 { 
  dialogController: CustomDialogController | null = new CustomDialogController({ 
    builder: CustomDialogExample02(), 
    autoCancel: true, 
    alignment: DialogAlignment.TopStart, 
    offset: { dx: 100, dy: 10 }, 
    showInSubWindow: false, 
    isModal: true, 
    customStyle: true, 
    maskColor: Color.Transparent 
  })
  
  onPageShow() { 
    setTimeout(() => { 
      if (this.dialogController != null) { 
        this.dialogController.open() 
      } 
    }, 2000); 
  }
  
  build() { 
    Column() { 
      // 页面内容 
    } 
  } 
}

场景三：自定义弹窗动画

最后，为了让弹窗更具有交互性，我们将添加弹窗打开和关闭的动画效果。

@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) 
    .transition(TransitionEffect.OPACITY.animation({ duration: 500 }) 
      .combine(TransitionEffect.translate({ y: 300 }))) 
  }
  
  cancel() { 
    this.showFlag = Visibility.Hidden 
    setTimeout(() => { 
      this.controller.close() 
    }, 500) 
  } 
}

以上就是如何在HarmonyOS中使用自定义弹窗和定时器来实现类似Toast的效果。