HarmonyOS鸿蒙Next中通过ComponentContent实现用户协议和隐私模态窗功能

HarmonyOS鸿蒙Next中通过ComponentContent实现用户协议和隐私模态窗功能 通过ComponentContent 实现用户协议和隐私模态窗功能

3 回复

用NavDestination的NavDestinationMode.DIALOG更简单，直接写 UI 就行了

更多关于HarmonyOS鸿蒙Next中通过ComponentContent实现用户协议和隐私模态窗功能的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


效果实现

图片

完整代码

components/Dialog.ets

import { ComponentContent } from "@kit.ArkUI";


interface BuilderDialogType {
  ok: (data?:string) => void
  cancel: () => void,
  other2?:string
  other1?:string[]
}

// 各种弹窗布局============
@Builder function DeleteBuilder(options: BuilderDialogType) {
  Column() {
    Text('确定删除吗？')
    Row() {
      Button('确定').onClick(() => options.ok())
      Button('取消').onClick(() => options.cancel())
    }
  }.backgroundColor(Color.White)
}

@Builder function PrivacyPolicyBuilder(options: BuilderDialogType) {
  Column() {
    Text('用户协议和隐私政策说明').fontSize(18).fontColor('#222').margin({ top: 30, bottom: 19 })

    Scroll(){
      Text(){
        Span('请您充分阅读并理解')
        Span('《用户协议》').fontColor('#e76654').onClick(() => {
          // this.openWebUrl("/useragreement.html");
        })
        Span('和')
        Span('隐私政策').fontColor('#e76654').onClick(() => {
          // this.openWebUrl("/privacypolicy.html");
        })
        Span('我们非常重视您的隐私和个人信息保护。在您使用的过程中，我们会对您的部分个人信息进行收集和使用。\n1.我们会深情您的设备信息、位置信息、软件安装列表等\n2.京东商城（电子商务有限公司及其关联方合法拥有并运营的相关网站及客户端应用程序，以下称“本网站”或“京东平台”或“平台”）各项电子服务的所有权和运作权归属于“京东”所有，本网站提供的服务将完全按照其发布的服务条款和操作规则严格执行。您确认所有服务条款并完成注册程序时，本协议在您与本网站间成立并发生法律效力，同时您成为本网站正式用户。\n3.京东商城（电子商务有限公司及其关联方合法拥有并运营的相关网站及客户端应用程序，以下称“本网站”或“京东平台”或“平台”）各项电子服务的所有权和运作权归属于“京东”所有，本网站提供的服务将完全按照其发布的服务条款和操作规则严格执行。您确认所有服务条款并完成注册程序时，本协议在您与本网站间成立并发生法律效力，同时您成为本网站正式用户。')
      }.fontSize(16).fontColor('#6a6c6f').margin({ left:25,  right:25 })
    }.height(120)

    Column(){
      Button('不同意').onClick(() => {
        options.cancel();
      }).fontColor('#a5a7a9').fontSize(15).backgroundColor(Color.Transparent).margin({top:5})

      Button('同意').onClick(() => {
        options.ok();
      }).fontColor('#fff').fontSize(17)
        .linearGradient({direction: GradientDirection.Right, colors:[['#ef9064',0.0],['#e96756',1.0]]})
        .width('80%').margin({top:10,bottom:21 }).borderRadius(24)
    }
  }.backgroundColor(Color.White).width('90%')
}

@Builder function LoadingBuilder() {
  Column({ space: 10 }) {
    LoadingProgress().width(48).height(48).color(Color.White)
    Text('加载中').fontSize(14).fontColor('#fff')
  }
  .justifyContent(FlexAlign.Center)
  .width(120)
  .height(120)
  .backgroundColor('rgba(0,0,0,0.4)')
  .borderRadius(16)
}


@Builder function IndexAdBuilder(options: BuilderDialogType) {
  Column({ space: 10 }) {
    Image('http://tmp00002.learv.com/65ef5215ad284493b062e1f9c3b6eba9.jpg').width(340).height(400)
    Text('x').width(40).height(40).textAlign(TextAlign.Center).border({
      width: 2,
      color: Color.White,
    }).borderRadius(20).fontColor(Color.White).fontSize(26).fontWeight(900).onClick(() => options.cancel())
  }
}

// 各种弹窗布局============

export class Dialog {

  private contentNode: ComponentContent<object>  | null = null
  private context:UIContext

  constructor(context:UIContext, type:string, options:BuilderDialogType) {
    this.context = context

    switch (type) {
      case 'delete':
        this.contentNode = new ComponentContent(this.context, wrapBuilder(DeleteBuilder), options);
        break;
      case 'privacyPolicy':
        this.contentNode = new ComponentContent(this.context, wrapBuilder(PrivacyPolicyBuilder), options);
        break;
      case 'loading':
        this.contentNode = new ComponentContent(this.context, wrapBuilder(LoadingBuilder));
        break;
      case 'indexAd':
        this.contentNode = new ComponentContent(this.context, wrapBuilder(IndexAdBuilder), options);
        break;
    }
  }

  open() {
    this.context.getPromptAction().openCustomDialog(this.contentNode)
  }

  close() {
    this.context.getPromptAction().closeCustomDialog(this.contentNode)
  }
}

使用

import { Dialog } from '../components/Dialog'
import { router } from '@kit.ArkUI'
import { common } from '@kit.AbilityKit'

@Entry
@Component
struct Welcome {

  private privacyPolicyDialog = new Dialog(this.getUIContext(), 'privacyPolicy', {
    ok: () => {
      router.replaceUrl({
        url:'pages/Index'
      })
      this.privacyPolicyDialog.close()
    },
    cancel: () => {
      let context = getContext(this) as common.UIAbilityContext;
      context.terminateSelf()
      this.privacyPolicyDialog.close()
    }
  })


  aboutToAppear() {
    this.privacyPolicyDialog.open()
  }


  build() {
    Column() {
    }
  }
}

在HarmonyOS Next中，使用ComponentContent组件实现用户协议和隐私模态窗。ComponentContent是模态内容容器，用于承载自定义弹窗内容。

实现步骤：

  1. 创建自定义弹窗组件，包含协议文本和操作按钮。
  2. 使用@CustomDialog装饰器定义弹窗。
  3. 在弹窗的build方法中，使用ComponentContent作为根容器。
  4. 通过bindContentCover方法绑定弹窗到页面。

关键特性：

  • ComponentContent支持自适应布局
  • 提供平滑的显示/隐藏动画
  • 支持背景蒙层点击关闭
  • 可自定义弹窗位置和样式

示例代码结构：

[@CustomDialog](/user/CustomDialog)
struct ProtocolDialog {
  build() {
    ComponentContent() {
      // 协议内容
    }
  }
}
回到顶部