#HarmonyOS:Column--Row布局

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):主轴方向均匀分配元素,相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。

HarmonyOS华为自主研发的操作系统,专为万物互联时代设计,强调分布式架构和统一的开发框架。DevEco Studio则是华为提供的一套用于构建HarmonyOS应用的集成开发环境。 Stack、Column、List、Row和Grid都是DevEco Studio中的布局组件,它们帮助开发者创建美观、响应式的界面: 1. **Stack**: Stack是堆叠层的意思,类似于iOS中的Stack View,在HarmonyOS中用于堆叠子视图,通常用于层级结构中,如导航栏、侧边栏与主内容区域之间的层次划分。 2. **Column**: Column代表列,它是一个垂直方向的布局容器,适合按行排列组件,比如列表项或栅格布局中的列。 3. **List**: List组件用于展示一系列项目,每个项目通常是可点击的,并支持滚动浏览。它可以水平或垂直排列,配合Header和Footer等可以构建复杂的列表界面。 4. **Row**: Row表示行,这是一个水平布局容器,常用于横向布局元素,例如按钮行、标题行等。 5. **Grid**: Grid(网格)是最常见的二维布局,允许你在页面上创建方格状的布局,每个单元格可以填充不同的内容,非常适用于响应式设计,特别是在需要适应不同屏幕尺寸的应用中。 在DevEco Studio中,你可以通过组合使用这些组件以及设置他们的属性(如宽度、高度、间距等),轻松构建UI布局。例如: ```html <Stack> <Row> <Col span=6>左侧列</Col> <Col span=18>主体列</Col> </Row> <List itemLayout="GRID" gridNumColumns=3> <!-- 列表项 --> </List> </Stack> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值