鸿蒙NEXT版实战开发：UI框架-如何使用自定义弹窗实现分享弹窗？

最新推荐文章于 2026-01-08 11:57:50 发布

原创最新推荐文章于 2026-01-08 11:57:50 发布 · 431 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

那只斑马不睡觉

关注

标签

#harmonyos #华为 #驱动开发 #ArkUI #UI框架

分类操作系统

鸿蒙5.0 同时被 2 个专栏收录

1447 篇文章

订阅专栏

ArkUI

1229 篇文章

订阅专栏

往期鸿蒙全套实战文章必看：（附带鸿蒙全栈学习资料）

如何使用自定义弹窗实现分享弹窗

可以使用promptAction结合ComponentContent实现自定义分享弹窗，示例代码如下：

import { ComponentContent, PromptAction } from '@kit.ArkUI';

let promptAction: PromptAction | undefined = undefined;
let componentContent: ComponentContent<Params> | undefined = undefined;

class Params {
  applicationSharings: string[] = [];
  sharings: string[] = [];

  constructor(applicationSharings: string[], sharings: string[] = []) {
    this.applicationSharings = applicationSharings;
    this.sharings = sharings;
  }
}

@Builder
function buildText($$: Params) {
  Column() {
    Text('share')
    Grid() {
      ForEach($$.applicationSharings, (item: string, index) => {
        GridItem() {
          Column() {
            Image($r('app.media.app_icon'))
              .height(50)
              .width(50)
            Text(item)
              .fontSize(10)
          }
        }
      })
    }
    .height(100)
    .rowsGap(20)
    .columnsGap(20)
    .scrollBar(BarState.Off)
    .rowsTemplate('1fr')

    Grid() {
      ForEach($$.sharings, (item: string, index) => {
        GridItem() {
          Column() {
            Image($r('app.media.app_icon'))
              .height(50)
              .width(50)
            Text(item)
              .fontSize(10)
          }
        }
      })
    }
    .height(100)
    .rowsGap(20)
    .columnsGap(20)
    .scrollBar(BarState.Off)
    .rowsTemplate('1fr')

    Button('取消')
      .width('100%')
      .fontColor(Color.Black)
      .backgroundColor(Color.White)
      .onClick(() => {
        promptAction?.closeCustomDialog(componentContent);
      })
  }
  .backgroundColor('#FFF0F0F0')
  .width('90%')
  .height('30%')
  .borderRadius(10)
}

@Entry
@Component
struct CustomShareDialog {
  @State applicationSharings: string[] =
    ['share1', 'share2', 'share3', 'share4', 'share5', 'share6', 'share7', 'share8'];
  @State sharings: string[] = ['share1', 'share2', 'share3', 'share4', 'share5', 'share6', 'share7', 'share8'];

  build() {
    Row() {
      Column() {
        Button('click me')
          .onClick(() => {
            let uiContext = this.getUIContext();
            promptAction = uiContext.getPromptAction();
            let contentNode = new ComponentContent(uiContext, wrapBuilder(buildText),
              new Params(this.applicationSharings, this.sharings));
            componentContent = contentNode;
            promptAction.openCustomDialog(contentNode);
          })
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}