ArkUI项目实战之基于eTS实现第三方分享弹出框（一） 原创 精华

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        Button("第三方分享弹出框")
      }.width('100%')
    }.height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

// 新建自定义弹窗
@CustomDialog
struct MyDialog {
  dialogController: CustomDialogController;

  build() {
    Column() {
      Row() {
        Image($r('app.media.ic_public_arrow_down_0'))
          .width(32)
          .height(32)
          .onClick(() => {
            this.dialogController.close()
          })
      }
      .justifyContent(FlexAlign.Center)

      Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start, wrap: FlexWrap.Wrap }) {
        Column() {
          Image($r('app.media.weixin'))
            .objectFit(ImageFit.None)
            .width(79)
            .height(79)
          Text('发送给朋友')
        }
        .padding(5)
      }
      .padding({ bottom: 50 })
    }
    .width('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.

@Entry
@Component
struct Index {
// 实例化CustomDialogController构建MyDialog自定义弹窗
  dialogController: CustomDialogController = new CustomDialogController({
    builder: MyDialog()
  });

  build() {
    Row() {
      Column() {
        Button("第三方分享弹出框")
          // 添加按钮点击事件
          .onClick(() => {
            this.dialogController.open()
          })
      }.width('100%')
    }.height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

@Component
struct shareItem {
  @State imgSrc: Resource = $r('app.media.icon')
  @State text: string = ''

  build() {
    Column() {
      Image(this.imgSrc)
        .objectFit(ImageFit.None)
        .width(79)
        .height(79)
      Text(this.text)
    }
    .padding(5)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

shareItem({ imgSrc: $r('app.media.weixin'), text: '发送给朋友' })
shareItem({ imgSrc: $r('app.media.pengyouquan'), text: '发送到朋友圈' })
shareItem({ imgSrc: $r('app.media.qq'), text: '发送给朋友' })
shareItem({ imgSrc: $r('app.media.lanya'), text: '蓝牙' })
shareItem({ imgSrc: $r('app.media.zhifubao'), text: '支付宝' })
1.
2.
3.
4.
5.

autoCancel: false,  // 不允许点击遮障层退出
alignment: DialogAlignment.Bottom,  // 设置弹窗在垂直底部对齐显示
1.
2.

build() {
  Column() {
	...
  }
  .width('100%')
  .backgroundColor('white')
  .borderRadius(35)
}
1.
2.
3.
4.
5.
6.
7.
8.