黑马健康项目——欢迎页面UI

黑马健康项目——欢迎页面UI

1.效果图分析及布局框架搭建

• 效果图如下

• 总体布局分析

  1.通过对效果图的分析，可将欢迎界面整体设置为背景色为绿色的列式布局。

  

  2.然后，在整体列式布局中又分为了中央slogan、logo、文字描述三部分，如下图所示

  

  3.中央slogan：该区域为一张Slogan图片，设置代码如下

    Row(){
      Image($r('app.media.home_slogan'))
        .width(260)
  
    }.layoutWeight(1)
  

  其中将该图片单独一行并设置layoutWeight(1)，是设置了该图片在页面中的权重，除logo、文字描述部分，其他部分被其占据。

  4.logo区域

  
        Image($r('app.media.home_logo'))
          .width(150)
  

  5.文字描述部分

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

  其中，由于效果图文字描述部分第一行文字格式不一样，使用Row()容器将其分成三部分的Text(),分别设置其字体大小、颜色、透明度。并为’IPV6’文字设置了外边框。为版权文字设置了距离底部距离。

  其中opacityWhiteText()为为了提高代码效率，编写的文字统一样式方法，如下：

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

2.欢迎页面源码如下：

​

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



@Entry
@Component
struct WelcomePage {
  @State message: string = 'Hello World'

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

}
.width('100%')
.height('100%')
.backgroundColor($r('app.color.welcome_page_background'))

}
}