黑马健康项目（一）欢迎页面UI实现

欢迎页面UI实现

一准备阶段：

首先构思，-->

是这样的一个界面，要实现这样一个界面整体上是一个Column，在此基础上加入绿色底，然后就是‘用黑马减更多’这么一个image，再就是‘黑马健康’的logo image，再接三行文本text

这就是最开始的准备构思阶段

二代码实现：

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

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

这部分是整个的欢迎页面的代码，自上而下就是和开始的构思一样，column中两个image接三个text，再有细节部分的布局位置和属性颜色大小这部分要说的呢是三行text的第一行“黑马健康支持IPV6网络”，由于IPV6这一字段有一个边框所以要分成三部分组合到一起

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)