引言
- 在完成自己的應用過程中，發(fā)現(xiàn)自己需要調(diào)整登錄界面的布局，但是并不是很清楚如何調(diào)整，所以需要了解一下登錄界面是如何調(diào)整元素的。通過學習發(fā)現(xiàn)，登錄界面的容器組建，就像html中的盒子，整個網(wǎng)頁就是由若干個盒子構(gòu)成。
- 在這里結(jié)合自己修改的登錄界面好好學習修改一下。
- 最終通過padding修改，并不是組件對齊的方式
正文
- 下述為分布圖之后的登陸界面，具體結(jié)構(gòu)如下
- 個人總覺得上面的頁面還有以下一些問題
- 底部的row和底部相距太近
- 最下面的“其他登陸方式”太靠近底部，需要往上移動
- 最上面的image需要往上移動
容器組件基礎(chǔ)學習
- 主要有兩個容器，分別是row和column，具體如下
- Column表示沿垂直方向布局的容器。
- Row表示沿水平方向布局的容器。
容器的主軸和交叉軸
- 容器里面的主軸是容器里面的組件排列的方式，交叉軸是控制另外一個方向的，兩個軸構(gòu)成了一個坐標，決定容器中組件的位置。
容器的屬性
| 屬性名稱 | 描述 |
|---|---|
| justifyContent | 設(shè)置子組件在主軸方向上的對齊格式。 |
| alignItems | 設(shè)置子組件在交叉軸方向上的對齊格式。 |
下述為主軸的對齊方式
- 需要調(diào)用FlexAlign類型的數(shù)據(jù)，分別是start、center、end等，具體見下圖
- 不同屬性應用在app的效果如下
Start
center
end
SpaceBetween
SpaceAround
SpaceEvenly
- 不是很懂，為什么一點效果都沒有，不過不影響，知道通過padding進行調(diào)整了。
下述為交叉軸對應方向
Column交叉軸屬性
-
start：確實會讓組中的元素都往左側(cè)偏移
-
end： 所有組件都是沿著交叉軸線便偏移
-
center：
row
文章來源：http://www.zghlxwxcb.cn/news/detail-819577.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-819577.html
總結(jié)
- 總的來說變化的并不大，因為這個登陸界面不僅僅只有這一種對齊方式的標定位置的方式，還有很多，每一個組件都定義了margin屬性、長寬等屬性，所以就算設(shè)置了不同的屬性，他的效果也不好，除非是應用在不同的設(shè)備中，基于像素的定位方式并不是那么有效。
到了這里，關(guān)于鴻蒙開發(fā)學習——容器組件介紹的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
