第一部分-首页与弹窗的初步设计

一、前言：

本文演示用HarmonyOS的ArkUI来开发欢迎界面与弹窗。

通过build()以及Column()来进行布局，使其更加美观。

二、欢迎页面

初步我们设计了一个效果图，如图所示

接下来我们将其拆分成一个个小部分：

首先“黑马健康”四个字就是简单的通过四个Text()语句实现的，但是还是不能实现这个效果，那么我们就添加margin()外边距定义其位置，就可以实现上下交叉的效果了；字与字之间有点紧凑，我们让他们存在一点间隔，我们可以利用space：__ 想间隔多大就多大；我们又发现它是不断变大的，那么通过fontsize属性设置字体大小也就可以实现了。

参考代码如下：

build(){
  Column({space:10}){
    Text('黑')
      .fontSize(70)
      .fontColor(Color.White)
      .margin({top:50,left:-100})
    Text('马')
      .fontSize(80)
      .fontColor(Color.White)
      .margin({left:100})
    Text('健')
      .fontSize(90)
      .fontColor(Color.White)
      .margin({left:-100})
    Text('康')
      .fontSize(100)
      .fontColor(Color.White)
      .margin({left:100})
       }
  .backgroundColor(Color.Pink)
  .width('100%')
  .height('100%')
}

接下来我们可以看到，页面的最下面有几行小字，其中“IPv6”还是被一个圆角矩形给括起来的，这样我们就需要将这句话分为三部分来添加了，但是只是利用Text()的话，他们就不在一行上了，这样我们就需要Row()容器将他们放在一起，这样他们就在一行显示了；那圆角矩形是怎么实现的呢？

为“IPv6”添加一个border()边框的属性，定义其样式、宽度、颜色以后，它是一个直角边，那么我们再定义弧度（radius）属性，就可以实现了，但是看着有点紧凑不是很美观，我们在加一个内边距padding属性，使其美观一点。

我们可以看到字体有点透明，我们只要加一个opacity()设置透明度就好了。

Row() {
  Text('信息工程学院').fontColor(Color.White).opacity(0.8)
  Text('IPv6').fontColor(Color.White).opacity(0.8)
    .border({style:BorderStyle.Solid,width:1,color:Color.White,radius:15})
    .padding({left:5,right:5})
  Text('支持').fontColor(Color.White).opacity(0.8)
}
.margin({bottom:-400})
Text('版权所有@计算机科学与技术').fontColor(Color.White).opacity(0.6).margin({bottom:-450})参考代码如下：

这样我们整个欢迎界面UI开发就完成了。

三、弹窗组件

因为我们只是定义一个弹窗的组件，不需要其单独的显示出来，所以我们用@CustomDialog装饰器声明弹窗组件就可以了。

参考代码如下：

@CustomDialog
export default  struct UserTanChuang {
  controller:CustomDialogController
  confirm:()=>void
  cancel:()=>void
  build() {
    Column({space:10}){
      //标题
      Text("欢迎使用新华词典")
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      //内容
      Text("感谢您信任并使用黑马健康！我们将通过《用户协议》和《黑马健康隐私协议》帮助您了解我们收集、使用、存储和共享个人信息的情况，特别是我们所采集的个人信息类型与用途的对应关系。此外，您还能了解到您所享有的相关权力及实现途径，如您同意，请点击下方按钮开始接受我们的服务")

      //按钮
      Button("同意")
        .width(150)
        .backgroundColor(Color.Brown)
        .fontColor(Color.White)
        .onClick(()=>{
          this.confirm()
          this.controller.close()
        })
      Button("不同意")
        .width(150)
        .backgroundColor(Color.Gray)
        .onClick(()=>{
          this.cancel()
          this.controller.close()
        })
    }
    .width('100%')
    .padding(20)
  }
}

最后在欢迎页面进行调用即可。

这样我们就完成了欢迎页面与弹窗组件UI界面的开发。

附欢迎页面整体代码：

import UserTanChuang from '../view/Welcome/UsersTanChang'
@Entry
@Component
struct Index {

  controller:CustomDialogController=new CustomDialogController({
    builder:UserTanChuang({
      confirm:()=>this.onConfirm(),
      cancel:()=>this.exitApp()
    })
  })
  
  aboutToAppear(){
    this.controller.open()
  }
  onConfirm(){ 
    //保存首选项
    
    //跳转到首页
    
  }
  exitApp(){
    //退出App
  }
  
  build(){
    Column({space:10}){
      Text('新')
        .fontSize(70)
        .fontColor(Color.White)
      .margin({top:50,left:-100})
      Text('华')
        .fontSize(80)
        .fontColor(Color.White)
        .margin({left:100})
      Text('词')
        .fontSize(90)
        .fontColor(Color.White)
        .margin({left:-100})
        Text('典')
          .fontSize(100)
          .fontColor(Color.White)
          .margin({left:100})
      Row() {
        Text('信息工程学院').fontColor(Color.White).opacity(0.8)
        Text('IPv6').fontColor(Color.White).opacity(0.8)
        Text('支持').fontColor(Color.White).opacity(0.8)
      }
      .margin({bottom:-400})
      Text('版权所有@计算机科学与技术').fontColor(Color.White).opacity(0.6).margin({bottom:-450})
    }
    .backgroundColor(Color.Pink)
    .width('100%')
    .height('100%')
  }

}