开发鸿蒙项目黑马健康APP系列项目

从今天起，我将开始记录我的期末项目《黑马健康APP》的创作过程，详细记录在开发过程中遇到的各种问题和个人感悟。

一、工作主要介绍

今天，我主要致力于开发程序的欢迎界面。在这个环节中，我重点研究并实践了以下几个关键的设计元素：首先是ArkUI组件中的行容器（Row）和列容器（Column），它们是构建界面布局的基础；其次是图片的嵌入，这涉及到选择合适的图像资源并将其恰当地放置在界面中；最后是对页面布局细节的精细打磨，确保整体视二、运行效果及主要设计思路的介绍觉效果和用户体验的一致性和协调性。

二、运行效果及主要设计思路的介绍

首先来向大家展示一下我所做的欢迎页面的最终效果图吧！

我先来说一下我设计这个页面的整体思路：
从整体设计的角度来看，整个界面布局采用了一个列式容器来组织内容。在这个列式容器中，顶部的“用黑马减更多”图标构成了界面的第一部分，紧接着是“黑马健康”的图标，它作为第二部分。而剩下的三行文字，每行都独立占据一个部分，分别形成了界面的第三、第四和第五部分。

下面是设计代码的基本框架:

三、设计过程中遇到的一些问题

关于底部文字发生拥挤现象导致文本显示不全的问题

在开发过程中，我遇到了一个明显的问题：当所有图片和文本文字插入后，它们之间的间距非常紧凑，无法达到设计图样中所要求的准确布局。通过在列容器（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组件的页面布局操作有了更深入的了解。同时，我也充分认识到了鸿蒙系统页面布局与网页设计布局之间的相似之处和相互转换的可能性。这些经验极大地丰富了我的知识库，并为我带来了许多有价值的收获。