鸿蒙开发学习——容器组件介绍

引言

• 在完成自己的应用过程中，发现自己需要调整登录界面的布局，但是并不是很清楚如何调整，所以需要了解一下登录界面是如何调整元素的。通过学习发现，登录界面的容器组建，就像html中的盒子，整个网页就是由若干个盒子构成。
• 在这里结合自己修改的登录界面好好学习修改一下。
• 最终通过padding修改，并不是组件对齐的方式

正文

• 下述为分布图之后的登陆界面，具体结构如下

• 个人总觉得上面的页面还有以下一些问题
  • 底部的row和底部相距太近
  • 最下面的“其他登陆方式”太靠近底部，需要往上移动
  • 最上面的image需要往上移动

容器组件基础学习

• 主要有两个容器，分别是row和column，具体如下
  • Column表示沿垂直方向布局的容器。
  • Row表示沿水平方向布局的容器。

容器的主轴和交叉轴

• 容器里面的主轴是容器里面的组件排列的方式，交叉轴是控制另外一个方向的，两个轴构成了一个坐标，决定容器中组件的位置。

容器的属性

属性名称	描述
justifyContent	设置子组件在主轴方向上的对齐格式。
alignItems	设置子组件在交叉轴方向上的对齐格式。

下述为主轴的对齐方式

• 需要调用FlexAlign类型的数据，分别是start、center、end等，具体见下图
  
• 不同属性应用在app的效果如下

Start

center

end

SpaceBetween

SpaceAround

SpaceEvenly

• 不是很懂，为什么一点效果都没有，不过不影响，知道通过padding进行调整了。

下述为交叉轴对应方向
Column交叉轴属性

• start：确实会让组中的元素都往左侧偏移
  
  

• end： 所有组件都是沿着交叉轴线便偏移
  
  

• center：
  

row

总结

• 总的来说变化的并不大，因为这个登陆界面不仅仅只有这一种对齐方式的标定位置的方式，还有很多，每一个组件都定义了margin属性、长宽等属性，所以就算设置了不同的属性，他的效果也不好，除非是应用在不同的设备中，基于像素的定位方式并不是那么有效。