#HarmonyOS:Column--Row布局

打印 上一主题 下一主题

主题 804|帖子 804|积分 2412

Column&Row组件的使用


  • Column表示沿垂直方向布局的容器。
  • Row表示沿水平方向布局的容器。
布局子元素在交织轴上的对齐方式

Column容器内子元素在水平方向上的分列

HorizontalAlign.Start:子元素在水平方向左对齐。
HorizontalAlign.Center:子元素在水平方向居中对齐。
HorizontalAlign.End:子元素在水平方向右对齐。
Row容器内子元素在垂直方向上的分列

VerticalAlign.Top:子元素在垂直方向顶部对齐
VerticalAlign.Center:子元素在垂直方向居中对齐。
VerticalAlign.Bottom:子元素在垂直方向底部对齐。
布局子元素在主轴上的分列方式

在布局容器内,可以通过justifyContent属性设置子元素在容器主轴上的分列方式。可以从主轴起始位置开始排布,也可以从主轴竣事位置开始排布,大概均匀分割主轴的空间。
justifyContent(FlexAlign.Start):元素在主轴方向首端对齐,第一个元素与行首对齐,同时后续的元素与前一个对齐。
justifyContent(FlexAlign.Center):元素在主轴方向中心对齐,第一个元素与行首的距离与最后一个元素与行尾距离相同
justifyContent(FlexAlign.End):元素在主轴方向尾部对齐,最后一个元素与行尾对齐,其他元素与后一个对齐
justifyContent(FlexAlign.Spacebetween):主轴方向均匀分配元素,相邻元素之间距离相同。第一个元素与行首对齐,最后一个元素与行尾对齐。
justifyContent(FlexAlign.SpaceAround):主轴方向均匀分配元素,相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

兜兜零元

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表