欢迎页面UI实现

一、分析布局

分析页面我们可以很清晰的看出，欢迎页面是一个整体列式布局，背景颜色为绿色，从上至下是一个图片-图片-文本-文本-文本的格式。

二、进行项目开发的准备工作

1.新建一个名为Health的项目包

这里就不过多演示如何新建

2.将黑马提供的文件包内的内容粘贴到总目录下

我将复制过来目录内的内容做一下简单解释，方便未来进行修改。

media内是一张黑马的logo

element的string.json内是将应用名修改为黑马健康

entry下的resources下的media里面准备了开发所用到的所有图片数据

element下的color.json定义了开发所需的大部分颜色

string内是一些文字描述

三、正式开发

在ets内新建一个Welcome的ets文件

按照图片的布局很容易我们可以写出页面，这里我给出完成后的build内的代码：

  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'))

由于对问文本进行了多次对颜色、透明度等样式修改，我们可以将它抽出为一个单独的函数来方便调用，用@Extend继承Text并书写好调用后的文本变化内容，如下给出代码：

@Extend(Text) function opacityWhiteText(opacity: number, fontSize: number = 10) {
  .fontSize(fontSize)
  .opacity(opacity)
  .fontColor(Color.White)
}

由于欢迎页面UI实现部分较为简单，我不对代码进行详细解释。