鸿蒙个人项目作业记录开发过程（1）

今天要先做一个欢迎页面，下面是我门要创建的页面

这个页面告诉我们以下信息

首先要创建一个欢迎页面

1.首先添加背景色，代码如下：

.backgroundColor($r('app.color.welcome_page_background'))//背景色

显示效果：

为背景色上添加图片以及文字，并设置宽度：

Column() {
  //1,中央Slogan
    Image($r('app.media.home_slogan')).width(260)//加上图片，并设置宽度
  // 2.logo
    Image($r('app.media.home_logo')).width(150)//加上logo图片，并设置宽度
  // 3.文字描述
    Row(){
      Text('黑马健康支持')
      Text('IPv6')
      Text('网络')
    }

为文字添加类型，使接近效果图：

Text('黑马健康支').fontSize(12).opacity(0.8).fontColor(Color.White)//设置字体为12，透明度为0.8，字体颜色为白色

为文字添加边框，内边距，并设置参数

Text('IPv6')
  .fontSize(10).opacity(0.8).fontColor(Color.White)
  .border({style:BorderStyle.Solid,width:1,color:Color.White,radius:'15'})//设置边框，参数类型：为实线，长度为1，颜色为白色，边框弧度
  .padding({left:5,right:5})//内边距 左右空出距离5

继续添加文字并设置参数：

Text(`'减更多'指黑马健康App希望通过软件工具的形式，帮助更多用户实现身材管理`)
 .fontSize(10).opacity(0.8).fontColor(Color.White)

同样也是如此

Text('浙ICP备0000000号-36D')
  .fontSize(10).opacity(0.4).fontColor(Color.White)

文字的间距太窄了，设置宽度增加行与行之间的距离

Column({space:10}) {//增加文字行与行之间的边距

Row(){
  Image($r('app.media.home_slogan')).width(260)//加上图片，并设置宽度
}
 .layoutWeight(1)

.fontSize(12).opacity(0.8).fontColor(Color.White)//设置字体为12，透明度为0.8，字体颜色为白色

这段代码出现率很高，用以下代码来抽取出来

@Extend(Text) function opacityWhiteText(opacity: number, fontSize: number = 10) {//抽取，减少代码
  .fontSize(fontSize)
  .opacity(opacity)
  .fontColor(Color.White)
}

就可以用.opacityWhiteText(0.8, 12)来代替以前的代码

这样我们的欢迎ui就实现了