在布局设计中,Row 容器里子元素于垂直方向的排列方式,对页面整体视觉效果起着关键作用。咱们可以利用 alignItems
属性,精准把控子元素在垂直方向(也就是 Row 容器的交叉轴)的对齐状态,塑造出风格各异的布局。
VerticalAlign.Top:子元素在垂直方向顶部对齐
在这段代码示例里,三个 Column
子元素像是乖巧的小兵,在垂直方向上,都齐刷刷朝着顶部看齐。它们紧紧挨在 Row 容器的顶端,排列紧凑有序,让整个布局从上方开始就显得利落规整,先给人一种清爽、简洁的视觉感受。
VerticalAlign.Center:子元素在垂直方向居中对齐
这里,同样是这三个 Column
子元素,却因为 alignItems
设置为 VerticalAlign.Center
,不再执着于顶部或底部,而是稳稳当当地 “悬浮” 在 Row 容器垂直方向的正中间。如此一来,布局便呈现出一种平衡、对称的美感,视觉重心更加稳定,给人以和谐、舒适的观感。
VerticalAlign.Bottom:子元素在垂直方向底部对齐
此时,子元素们遵循 alignItems
的指令,一股脑儿朝着底部靠拢,紧贴着 Row 容器的下端排列。这种底部对齐的方式,为整个布局赋予了沉稳、扎实的视觉效果,让页面下方显得整齐划一,收尾干脆利落。