一、前言:
本文演示用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%')
}
}