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

@toc

前言

之前做#HarmonyOS技术训练营#基于JS实现的AI作诗应用的时候发现官方目前还不支持将内容分享至第三方应用，便有了开发这个组件的想法（后面听说官方接下来也将支持第三方分享弹出框了）。该项目为笔者花了大概一周的时间，文章将分为上下两部分，分别实现基本布局、Swiper滑动组件，一步一步带你玩转ArkUI框架开发！

概述

模拟鸿蒙操作系统上的分享弹框组件

演示效果

如下图所示，点击分享图标的时候（这里为一个Button按钮）弹出分享框，再次点击向下箭头时退出弹窗，不可通过点击遮障层退出，左右滑动可切换分页

关键代码

首先我们对弹出框的UI界面的布局进行分析，可以将布局分为两层，上面一层为一个箭头图标，下面则为显示可分享应用的区域，按照4*2进行排列。参考代码如下：

1.在index.ets中添加一个Button按钮，显示<font color=“red”>第三方分享弹出框</font>

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        Button("第三方分享弹出框")
      }.width('100%')
    }.height('100%')
  }
}

2.新建一个自定义弹窗，并且为Button添加点击事件，点击时弹出弹窗

// 新建自定义弹窗
@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%')
  }
}

其中布局关系如下图所示，由于箭头图标和下面蓝色显示区域为垂直方向布局，所以我们使用Column容器将两者包裹起来，使用Row布局容器展示箭头图片并设置居中显示，使用Flex弹性布局容器包裹多个Item，其中direction参数设置主轴为水平方向，wrap参数设置为多行排列。每个Item由图片以及文本上下分布组成，使用Column容器进行包裹

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

  build() {
    Row() {
      Column() {
        Button("第三方分享弹出框")
          // 添加按钮点击事件
          .onClick(() => {
            this.dialogController.open()
          })
      }.width('100%')
    }.height('100%')
  }
}

因为添加多个Item时，会造成代码过于冗余，而每个Item的结构都是一样的，所以我们可以自定义一个shareItem组件

@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)
  }
}

传入imgSrc和text参数即可

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: '支付宝' })

此时弹出框默认在屏幕中间显示，并且点击遮障层可退出弹窗，在实例化构建自定义弹窗时添加以下属性：

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

可以看到此时弹窗已经在底部居中显示了，但是左右边框距离屏幕留有空间，再添加customStyle属性并设置为true，允许自定义弹窗样式

由于添加自定义样式属性后，弹框的基本样式失效，我们需要对其设置背景颜色以及边框圆角

build() {
  Column() {
	...
  }
  .width('100%')
  .backgroundColor('white')
  .borderRadius(35)
}

最终实现效果如下图所示：

由于目前eTS暂不支持设置边框部分圆角，这与鸿蒙系统实现的效果有一定区别，后期加入支持之后可进行优化

参考资料

1、@Component-组件化-声明式语法-基于TS扩展的声明式开发范式-UI开发-基于JS开发-开发-HarmonyOS应用开发 | HarmonyOS

2、@CustomDialog-组件化-声明式语法-基于TS扩展的声明式开发范式-UI开发-基于JS开发-开发-HarmonyOS应用开发 | HarmonyOS

结语

本期到这里结束啦！感谢看到最后的小伙伴们，不知道有没有讲得不清楚的或者写得不好的地方，欢迎指出来哦！下一期我们将使用Swiper滑动组件实现弹窗的滑动分页功能！