黑马健康APP开发——欢迎页面UI设计

一.思路分析

今天主要进行黑马健康APP的欢迎页面的开发和设计，由于欢迎界面早于首页，所以，新建一个page名为Welcomepage的页面用来进行内容开发，整个欢迎页面的布局为Column布局，由于需要铺满整个屏幕，所以宽高比都设置为100%，由于老师提供了许多的资料，因此后续的图片以及颜色的使用会很方便。

二.运行效果

欢迎页面的开发后的运行效果图为：

三.开发中遇到的问题

1.如何对ipv6套上一个边框

解决方法：使用Text的border属性，设置style属性为BorderStyle.Solid（该设置是设置实线）,便可以对文字增加一个边框，同时，应该适当的缩小文字的大小，避免文字过大时，增加边框后，会导致与周边文字大小不对称。

2.黑马健康的图片位置不居中

解决方法：使用布局权重的方法，首先将黑马健康的图片放置在一个Row的容器中，然后设置Row容器的layoutWeight()属性，将该属性的值设置为1，即该图片占据了剩下的所以空间，这样，就可以将黑马健康图片更改到中间的位置。

四.代码：

@Extend(Text) function opacityWhiteText(opacity: number, fontSize: number = 10) {
  .fontSize(fontSize)
  .opacity(opacity)
  .fontColor(Color.White)
}
struct WelcomePage {
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'))
  }
}

五.总结

欢迎页面的UI设计相对而言较为简单，主要设计到页面的总布局，以及row容器的使用，还设计到了布局权重的部分知识。