文章目录
- 引言
- 正文
- 容器组件基础学习
- 容器的主轴和交叉轴
- 容器的属性
- 总结
引言
- 在完成自己的应用过程中，发现自己需要调整登录界面的布局，但是并不是很清楚如何调整，所以需要了解一下登录界面是如何调整元素的。通过学习发现，登录界面的容器组建，就像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属性、长宽等属性，所以就算设置了不同的属性，他的效果也不好，除非是应用在不同的设备中，基于像素的定位方式并不是那么有效。
