欢迎页面UI实现

一、欢迎页面

首先整个布局是列式布局，背景颜色为绿色，整个页面从上到下的布局是图片-图片-文本-文本-文本的形式。

二、正式开发前的准备工作

1.首先是创建项目工程

如图所示，在media文件中存储的是页面黑马的logo

在element文件夹中存储的是一些基础的颜色配置和字符串描述等

 

2.重新创建一个欢迎页面
 

如图所示创建了一个新的欢迎界面WelcomePage.ets,对其进行编译就行了

三、欢迎界面编写

在写代码之前分析页面，页面是从上到下的列式布局（column容器），由两个image组件和三个text组件构成。第一个image占页面的比重较大，即使用layoutWeight布局权重；第一个text组件由三部分组成，中间文字部分由一个弧形边框，通过radius设置边框弧度，并使用padding内边距使文字与边框之间留有距离；第三个text组件中使用margin外边距防止贴底，与底部留有距离。

Welcome Page页面：

//优化代码：提取代码Text中的统一部分，并给opacityWhiteText参数可以改变字体大小和透明度

@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.中央logo
        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备0000000000号-360')
          .opacityWhiteText(0.6)
          .margin({bottom:35})//外边距：防止贴底，与底部留有距离
      }
      .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.welcome_page_background'))
  }
}

四、运行结果