基于鸿蒙操作———制作健康App(打开界面)

目录

​编辑

前言：

代码：

背景设置部分：

图片以及文字设计部分：

自我知识总结部分：

最后寄语：

---

健康App界面

前言：

创作的第一个鸿蒙操作系统，规划项目结构，该界面通过图片以及文字的调整进行操作完成，记录自己的理解以及分享给遇到相同问题的同学

代码：

背景设置部分：

 Column(){
     Row(){
       

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

设置完成后的效果是，出现绿色的背景。

图片以及文字设计部分：

       // 1.中央Slogan
       Image($r('app.media.home_slogan')).width(260)
     }
     .layoutWeight(1)
     // 2.logo
     Image($r('app.media.home_logo')).width(150)
     // 3.文字描述
     Row(){
       Text('黑马健康支持').fontSize(12).opacity(0.8).fontColor(Color.White)
       Text('IPv6')
         .fontSize(10).opacity(.8).fontColor(Color.White)
         .border({style:BorderStyle.Solid,width:1,color:Color.White,radius:15})
         .padding({left:5,right:5})
       Text('网络').fontSize(12).opacity(.8).fontColor(Color.White)
     }
       // 当里面存在''时通过``进行括起来的操作
       Text(`‘减更多’指黑马健康App希望通过软件工具的形式，帮助更多的用户实现身材管理`)
         .fontSize(10).opacity(0.6).fontColor(Color.White)
       Text('浙ICP备0000000号-36D')
         .fontSize(10).opacity(.4).fontColor(Color.White)
         .margin({bottom:35})

使其出现图片以及文字的设计效果。

自我知识总结部分：

1.为什么在对图片居中对齐或者是文字居中对齐时会出现不了效果，完成不了相关的操作，那么该怎样去更改所出现的问题呢？

自我理解：（1）出现这种情况的原因是因为在创建对象时，没有对column和row了解清楚，column代表的是列也就是垂直方向的，但是row代表的是行也就是水平方向的；

（2）采用的对齐方式出现了错误，主轴方向上的对齐方式（column）也称为垂直方向上的指的是justifyContent，而水平方向的也称为交叉轴方向上面的对齐属性指的是alignitems，会容易出现混淆导致不会显示出来效果。

2.相关参数的介绍（个人认为需要记录的）

.opacity:指的是透明度，".8"与"0.8"同等含义；

.margin:在设置拥有多个值的属性时通常采用的是"{}"的形式

最后寄语：

希望能够帮助到你们，一起在学习中去探索，一起进步，加油！