一、欢迎界面UI实现思路:
1.页面用于展示应用的欢迎信息,并询问用户是否同意隐私政策。
2.使用Column和Row等布局容器来组织页面内容,确保页面结构清晰。
3.添加必要的元素,如标语、Logo、文本描述和版权信息等。
4.设计一个机制来检查用户是否已经同意隐私政策。
如果用户尚未同意,显示一个对话框或提示,让用户确认他们的选择。
在用户确认后,更新存储中的值,以便在后续启动时跳过此步骤。
5.设计统一的样式规范,确保页面元素在视觉上一致且易于识别。
6.使用适当的字体、颜色和间距。
二、欢迎界面UI设计:
1.欢迎页面的创建
首先在page下创建WelcomePage.ets文件
整个布局为column布局,宽高设置为100%,将背景色设为背景色。
1.中央slogan,logo
使用准备好的图片slogan,设置好宽度,布局权重为1.
使用准备好的图片logo,设置好宽度
2.文字描述
文字描述分为左中右三部分,需要用row容器,用text构建,调整好字体与颜色透明度
为文字套上边框,设置为实线圆弧颜色。
import common from '@ohos.app.ability.common'
import router from '@ohos.router'
import PreferenceUtil from '../common/utils/PreferenceUtil'
import UserPrivacyDialog from '../view/welcome/UserPrivaryDialog'
@Extend(Text) function opacityWhiteText(opacity: number, fontSize: number = 10) {
.fontSize(fontSize)
.opacity(opacity)
.fontColor(Color.White)
}
const PREF_KEY = 'userPrivacyKey'
@Entry
@Component
@Preview
struct WelcomePage {
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.中央Slogan
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备0000000号-36D')
.opacityWhiteText(0.4)
.margin({ bottom: 35 })
}
.width('100%')
.height('100%')
.backgroundColor($r('app.color.welcome_page_background'))
}
}
二、欢迎界面弹窗业务设计:
判断用户是否同意用户协议,使用用户首选项来保存,用户协议使用自定义弹窗
新建组件文件在view/weilcome/UserPrivacyDiialog
声明CusttomDialogController
使用Column构建,第一行标题使用引用准备好的字符串,加粗加黑,第二行内容使用引用准备好的字符串,第三行使用两个按钮,使用准备好的按钮,调整宽度和背景,同意需要高亮。
设置按钮点击后的处理逻辑 ,在对话框中声明两个对话框的变量,再点击事件中实现处理逻辑
在欢迎页面声明conntroller,builer导包使用组件,在使用中传参,定义两个专门处理的函数
设置加载首选项,判断是否同意,通过提供的工具类,不需要单独设置首选项,调用函数加载首选项
//UserPrivacyDialog.ets
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)
}
}