开发鸿蒙项目黑马健康APP系列项目
从今天起，我将开始记录我的期末项目《黑马健康APP》的创作过程，详细记录在开发过程中碰到的各种题目和个人感悟。一、工作主要介绍
今天，我主要致力于开发程序的欢迎界面。在这个环节中，我重点研究并实践了以下几个关键的操持元素：起首是ArkUI组件中的行容器（Row）和列容器（Column），它们是构建界面结构的基础；其次是图片的嵌入，这涉及到选择合适的图像资源并将其恰当地放置在界面中；最后是对页面结构细节的精致打磨，确保团体视二、运行效果及主要操持思路的介绍觉效果和用户体验的一致性和协调性。
二、运行效果及主要操持思路的介绍
起首来向各人展示一下我所做的欢迎页面的终极效果图吧！
https://img-blog.csdnimg.cn/direct/90d50c84f6ee4538910666f56e09f3c9.jpeg
我先来说一下我操持这个页面的团体思路：
从团体操持的角度来看，整个界面结构接纳了一个列式容器来构造内容。在这个列式容器中，顶部的“用黑马减更多”图标构成了界面的第一部分，紧接着是“黑马健康”的图标，它作为第二部分。而剩下的三行文字，每行都独立占据一个部分，分别形成了界面的第三、第四和第五部分。
下面是操持代码的根本框架:
https://img-blog.csdnimg.cn/direct/7dbf0f3e2a114ecf9877fc123973d1f4.png
三、操持过程中碰到的一些题目
关于底部文字发生拥挤现象导致文本表现不全的题目
在开发过程中，我碰到了一个明显的题目：当全部图片和文本文字插入后，它们之间的间距非常紧凑，无法达到操持图样中所要求的精确结构。通过在列容器（column container）中设置space属性后，我发现效果仍然与预期的页面效果有很大差距。随后，我通过学习了解到，可以通过设置各个容器之间的结构权重（layout weight）来实现页面的重新构建，以达到更好的视觉效果。在我重新分配了结构权重之后，又发现界面底部的文字出现了触底现象，导致文字表现不够清晰。这时，margin属性发挥了作用。通过为第三个文本输入框设置恰当的底部外边距（bottom margin），我成功办理了这个题目。
四、实行代码
import preferences from '@ohos.data.preferences'
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{
// @ts-ignore
context=getContext(this) as commom.UIAbilityContext
controller:CustomDialogController=new CustomDialogController({
builder:UserPrivacyDialog({
confirm: ()=>this.onConfirm(),
cancel:()=>this.exitApp()
})
})
async aboutToAppear() {
let isAgree = await PreferenceUtil.getPreferenceValue(PREF_KEY, false)
if (isAgree) {
this.jumpToIndex()
} else {
this.controller.open()
}
}
jumpToIndex() {
setTimeout(() => {
router.replaceUrl({
url: 'pages/Index'
})
}, 1000)
}
onConfirm(){
PreferenceUtil.putPreferenceValue(PREF_KEY,true)
this.jumpToIndex()
}
exitApp(){
this.context.terminateSelf()
}
build() {
Column({space:10}) {
Row(){
Image($r('app.media.home_slogan')).width(260)
}
.layoutWeight(1)
Image($r('app.media.home_logo')).width(150)
Row(){
Text('黑马健康支持').opacityWhiteText(0.8,12)
Text('IPv6')
.opacityWhiteText(0.8,12)
.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'))
}
}
五、小结
通过这次页面编辑的实践，我对ArkUI组件的页面结构利用有了更深入的了解。同时，我也充分认识到了鸿蒙体系页面结构与网页操持结构之间的相似之处和相互转换的大概性。这些经验极大地丰富了我的知识库，并为我带来了许多有价值的劳绩。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]