欢迎页面业务

一、实现逻辑图

二、实现方法

·自定义弹窗

   1.使用@Custom Dialog装饰器声明弹窗组件。

    2.在页面中声明弹窗控制器，并利用其控制弹窗。

        2.1 弹窗控制器。

        2.2使用自定义弹窗。

        2.3 利用弹窗控制器控制窗口打开open（），关闭使用close（）。

三、应用

  1.创建一个新的组件文件view，在文件下创建新的界面 UserPrivacyDialog.ets

2.主体框架

1. 导入常量：

   • 导入 CommonConstants 模块，它可能包含了一些在UI构建中会用到的通用常量。

2. 定义组件：

   • 使用 @CustomDialog 装饰器标记这是一个自定义对话框组件。

3. 定义组件属性：

   • controller: 一个自定义对话框控制器，用于管理对话框的显示和关闭。
   • confirm: 一个函数，当用户点击同意按钮时调用。
   • cancel: 一个函数，当用户点击拒绝按钮时调用。

4. 构建布局：

   • 使用 Column 函数创建一个列式布局，传入间距参数 space: CommonConstants.SPACE_10。

5. 添加标题：

   • 使用 Text 函数添加标题文本，文本内容通过资源引用 $r('app.string.user_privacy_title') 获取，设置字体大小为20，字体粗细为 CommonConstants.FONT_WEIGHT_700。

6. 添加内容：

   • 使用 Text 函数添加用户隐私协议的文本内容，内容通过资源引用 $r('app.string.user_privacy_content') 获取。

7. 添加按钮：

   • 使用 Button 函数创建两个按钮：
     • 同意按钮：文本通过资源引用 $r('app.string.agree_label') 获取，设置宽度为150，背景色为 $r('app.color.primary_color')。点击时调用 this.confirm() 方法并关闭对话框。
     • 拒绝按钮：文本通过资源引用 $r('app.string.refuse_label') 获取，设置宽度为150，背景色为 $r('app.color.lightest_primary_color')，字体颜色为 $r('app.color.light_gray')。点击时调用 this.cancel() 方法并关闭对话框。

8. 设置对话框尺寸和内边距：

   • 设置列布局的宽度为 '100%'，内边距为10。

9. 完成构建：

   • 完成布局的构建并返回最终的UI组件。

四、代码

1.弹窗界面代码

import {CommonConstants} from'../../common/constants/CommonConstants'

@CustomDialog
export default  struct UserPrivacyDialog {
  controller:CustomDialogController
  confirm:()=>void
  cancel:()=>void
  build() {
    Column({space:CommonConstants.SPACE_10}){
      //1.标题
      Text($r('app.string.user_privacy_title'))
        .fontSize(20)
        .fontWeight(CommonConstants.FONT_WEIGHT_700)
      //2.内容
      Text($r('app.string.user_privacy_content'))

      //3.按钮
      Button($r('app.string.agree_label'))
        .width(150)
        .backgroundColor($r('app.color.primary_color'))
        .onClick(()=>{
          this.confirm()
          this.controller.close()
        })
      Button($r('app.string.refuse_label'))
        .width(150)
        .backgroundColor($r('app.color.lightest_primary_color'))
        .fontColor($r('app.color.light_gray'))
        .onClick(()=>{
          this.cancel()
          this.controller.close()
        })
    }
    .width('100%')
    .padding(10)
  }
}

2.欢迎界面代码

import common from '@ohos.app.ability.common'
import router from '@ohos.router'
import PreferenceUtil from '../common/utils/PreferenceUtil'
import UserPrivacyDialog from '../view/welcome/UserPrivacyDialog'
@Extend(Text) function opacityWhiteText(opacity:number,fontsize:number=10) {
  .fontSize(fontsize)
  .opacity(opacity)
  .fontColor(Color.White)
}
const PREF_KEY='userPrivacyKey'
@Entry
@Component
struct WelcomePage {
  @State message: string = 'Hello World'
  context=getContext(this) as common.UIAbilityContext//获取上下文
  controller:CustomDialogController=new CustomDialogController({//弹窗控制器
    builder:UserPrivacyDialog(//使用自定义弹窗
      {
        confirm:()=>this.onConfirm(),//调用方法
        cancel:()=>this.exitApp()
      }
    )
  })

  async aboutToAppear(){

    //1.加载首选项
    let isAgree=await  PreferenceUtil.getPreferenceValue(PREF_KEY,false)

    //2.判断是否同意
    if(isAgree){
      //2.1.同意，跳转首页
      this.jumpToIndex()
    }
    else{
      //2.2.不同意，弹窗
      this.controller.open()
    }
  }
  //跳转到首页
  jumpToIndex(){
    setTimeout(()=>{
      router.replaceUrl({
        url:'pages/Index'
      })
    } ,1000)
  }



  //定义两个函数确认时
  onConfirm() {
    // 1. 保存首选项
PreferenceUtil.putPreferenceValue(PREF_KEY,true)

    // 2. 跳转到首页
this.jumpToIndex()

  }

  exitApp(){
    //退出App
this.context.terminateSelf()

  }

  build() {

      Column({space:10}) {//列式布局
        //1.中央logo
        Row(){
          Image($r('app.media.home_slogan')).width(260)
        }
        .layoutWeight(1)//权重布局

        //2.logo
        Image($r('app.media.home_logo')).width(150)

        //3.文字描述
        Row(){
          Text('黑马健康').opacityWhiteText(0.8,12)
          Text('IPv6')
            .opacityWhiteText(0.8)
            .border({style:BorderStyle.Solid,width:1,color:Color.White,radius:15})
            .padding({left:5,right:5})
          Text('网络').opacityWhiteText(0.8,12)

        }
        Text('减更多指黑马健康App希望通过软件工具的形式，帮助更多用户实现身材管理')
          .opacityWhiteText(0.6)
        Text('浙ICP备0000000000号-360')
          .opacityWhiteText(0.6)
          .margin({bottom:35})
      }
      .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.welcome_page_background'))
  }
}

五、运行结果

欢迎界面：

点击agree后跳转到index界面