引言
- 在完成自己的应用过程中,发现自己需要调整登录界面的布局,但是并不是很清楚如何调整,所以需要了解一下登录界面是如何调整元素的。通过学习发现,登录界面的容器组建,就像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
文章来源:https://www.toymoban.com/news/detail-819577.html
文章来源地址https://www.toymoban.com/news/detail-819577.html
总结
- 总的来说变化的并不大,因为这个登陆界面不仅仅只有这一种对齐方式的标定位置的方式,还有很多,每一个组件都定义了margin属性、长宽等属性,所以就算设置了不同的属性,他的效果也不好,除非是应用在不同的设备中,基于像素的定位方式并不是那么有效。
到了这里,关于鸿蒙开发学习——容器组件介绍的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!