HarmonyOS 开发基础(八)Row和Column
一、Column 容器
1、容器说明:
- 纵向容器
- 主轴方向:从上到下纵向
- 交叉轴方向:从左到右横向
2、容器属性:
- justifyContent:设置子元素在主轴方向的对齐格式,参数 FlexAlign 枚举
- alignItems:设置子元素在交叉轴方向的对齐格式,参数 HorizontalAlign 枚举
3、参数说明:
- space:内元素之间的间隔,对象值,如:{space: 20},元素之间的间隔为20
二、Row 容器
1、容器说明:
- 横向容器
- 主轴方向:从左到右横向
- 交叉轴方向:从上到下纵向
2、容器属性:
- justifyContent:设置子元素在主轴方向的对齐格式,参数 FlexAlign 枚举
- alignItems:设置子元素在交叉轴方向的对齐格式,参数 VerticalAlign 枚举
3、参数说明:
- space:内元素之间的间隔,对象值,如:{space: 20},元素之间的间隔为20
三、Column 和 Row 的 justifyContent 属性说明
1、Column:justifyContent 属性说明
- FlexAlign.Start:默认参数,主轴方向,从上依次排序往下
- FlexAlign.Center:主轴方向,居中依次排序往下
- FlexAlign.End:主轴方向,从下边位置排序保持不变
- FlexAlign.SpaceBetween:主轴方向,平均分配,上下顶格
- FlexAlign.SpaceAround:主轴方向,平均分配,距离上下平均分配的一半
- FlexAlign.SpaceEvenly:主轴方向,平均分配,距离上下平均分配
2、Row:justifyContent 属性说明
- FlexAlign.Start:默认参数,主轴方向,从左位置依次排序往右
- FlexAlign.Center:主轴方向,居中依次排序往右
- FlexAlign.End:主轴方向,从右边位置排序保持不变
- FlexAlign.SpaceBetween:主轴方向,平均分配,左右顶格
- FlexAlign.SpaceAround:主轴方向,平均分配,距离左右平均分配的一半
- FlexAlign.SpaceEvenly:主轴方向,平均分配,距离左右平均分配
四、Column 和 Row 的 alignItems 属性说明
1、Column:alignItems 属性说明
- HorizontalAlign.Start:默认参数,交叉轴方向,左边顶格
- HorizontalAlign.Center:交叉轴方向,居中
- HorizontalAlign.End:交叉轴方向,右边顶格
2、Row:alignItems 属性说明
- HorizontalAlign.Start:默认参数,交叉轴方向,上边顶格
- HorizontalAlign.Center:交叉轴方向,居中
- HorizontalAlign.End:交叉轴方向,下边顶格
五、基础使用
文章来源:https://www.toymoban.com/news/detail-815480.html
@Entry
@Component
struct Index {
build() {
Column() {
// Column:纵向
// space 参数:内元素之间的间距
Column({space: 20}) {
// Column 里面的第一行内容
Row() {
// Text:单行文本组件
Text('第一行')
.fontColor('#ffffff')
}
// width:属性方法,设置 Row 宽度
.width('90%')
// height:属性方法,设置 Row 高度
.height(40)
// justifyContent:属性方法,设置子元素在主轴的对齐方式,FlexAlign.Center:居中对齐
.justifyContent(FlexAlign.Center)
// backgroundColor:属性方法,设置 Row 的背景颜色
.backgroundColor('#63c3ff')
// Column 里面的第二行内容
Row() {
Text('第二行')
.fontColor('#ffffff')
}
// width:属性方法,设置 Row 宽度
.width('90%')
// height:属性方法,设置 Row 高度
.height(40)
// justifyContent:属性方法,设置子元素在主轴的对齐方式,FlexAlign.Center:居中对齐
.justifyContent(FlexAlign.Center)
// backgroundColor:属性方法,设置 Row 的背景颜色
.backgroundColor('#63c3ff')
// Column 里面的第三行内容
Row() {
Text('第三行')
.fontColor('#ffffff')
}
// width:属性方法,设置 Row 宽度
.width('90%')
// height:属性方法,设置 Row 高度
.height(40)
// justifyContent:属性方法,设置子元素在主轴的对齐方式,FlexAlign.Center:居中对齐
.justifyContent(FlexAlign.Center)
// backgroundColor:属性方法,设置 Row 的背景颜色
.backgroundColor('#63c3ff')
// Column 里面的第四行内容
Row() {
Text('第四行')
.fontColor('#ffffff')
}
// width:属性方法,设置 Row 宽度
.width('90%')
// height:属性方法,设置 Row 高度
.height(40)
// justifyContent:属性方法,设置子元素在主轴的对齐方式,FlexAlign.Center:居中对齐
.justifyContent(FlexAlign.Center)
// backgroundColor:属性方法,设置 Row 的背景颜色
.backgroundColor('#63c3ff')
}
// width:属性方法,设置 Column 宽度
.width('100%')
// margin:属性方法,设置 Column 外边距
.margin({top: 20})
// alignItems:属性方法,设置子元素在交叉轴的对齐方式,HorizontalAlign.Center:居中对齐
.alignItems(HorizontalAlign.Center)
// Row容器:横向
Row() {
// Row 对面的第一列内容
Column() {
Text('第一列')
.fontColor('#ffffff')
}
// height:属性方法,设置 Column 高度
.height(180)
// justifyContent:设置子元素在主轴的对齐方式,FlexAlign.Center:居中对齐
.justifyContent(FlexAlign.Center)
// backgroundColor:属性方法,设置 Column 的背景颜色
.backgroundColor('#63c3ff')
// Row 对面的第二列内容
Column() {
Text('第二列')
.fontColor('#ffffff')
}
// height:属性方法,设置 Column 高度
.height(180)
// justifyContent:设置子元素在主轴的对齐方式,FlexAlign.Center:居中对齐
.justifyContent(FlexAlign.Center)
// backgroundColor:属性方法,设置 Column 的背景颜色
.backgroundColor('#63c3ff')
// Row 对面的第三列内容
Column() {
Text('第三列')
.fontColor('#ffffff')
}
// height:属性方法,设置 Column 高度
.height(180)
// justifyContent:设置子元素在主轴的对齐方式,FlexAlign.Center:居中对齐
.justifyContent(FlexAlign.Center)
// backgroundColor:属性方法,设置 Column 的背景颜色
.backgroundColor('#63c3ff')
// Row 对面的第四列内容
Column() {
Text('第四列')
.fontColor('#ffffff')
}
// height:属性方法,设置 Column 高度
.height(180)
// justifyContent:设置子元素在主轴的对齐方式,FlexAlign.Center:居中对齐
.justifyContent(FlexAlign.Center)
// backgroundColor:属性方法,设置 Column 的背景颜色
.backgroundColor('#63c3ff')
}
// width:属性方法,设置 Column 宽度
.width('90%')
// margin:属性方法,设置 Column 外边距
.margin({top: 80})
// alignItems:属性方法,设置子元素在交叉轴的对齐方式,VerticalAlign.Center:居中对齐
.alignItems(VerticalAlign.Center)
// justifyContent:属性方法,设置子元素在主轴的对齐方式,FlexAlign.SpaceBetween:平均分配
.justifyContent(FlexAlign.SpaceBetween)
}
}
}
六、高级使用
文章来源地址https://www.toymoban.com/news/detail-815480.html
@Entry
@Component
struct Index {
build() {
Column() {
// 名片管理
Column() {
// 第一行
Row() {
Row() {
Image($r('app.media.icon1'))
.width(20)
.height(20)
.margin({right: 5})
Text('我的名片数据')
.fontSize(14)
}
Row() {
Text('我的访客')
.fontSize(14)
Image($r('app.media.icon2'))
.width(9)
.height(10)
.margin({left: 3})
}
}
.width('100%')
.margin({bottom: 20})
.justifyContent(FlexAlign.SpaceBetween)
// 第二行
Row() {
Column() {
Text('0')
.fontWeight(600)
Text('被访问(次)')
.fontSize(10)
}
.alignItems(HorizontalAlign.Center)
Column() {
Text('0')
.fontWeight(600)
Text('今日被访问(次)')
.fontSize(10)
}
.alignItems(HorizontalAlign.Center)
Column() {
Text('0')
.fontWeight(600)
Text('提交名片数(次)')
.fontSize(10)
}
.alignItems(HorizontalAlign.Center)
Column() {
Text('0')
.fontWeight(600)
Text('收名片数(次)')
.fontSize(10)
}
.alignItems(HorizontalAlign.Center)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
// 第三行
Row() {
Column() {
Image($r('app.media.icon3'))
.width(28)
.height(28)
Text('分享名片')
.fontSize(11)
}
Column() {
Image($r('app.media.icon4'))
.width(28)
.height(28)
Text('编辑名片')
.fontSize(11)
}
Column() {
Image($r('app.media.icon5'))
.width(28)
.height(28)
Text('下载名片')
.fontSize(11)
}
Column() {
Image($r('app.media.icon6'))
.width(28)
.height(28)
Text('名片夹')
.fontSize(11)
}
}
.width('100%')
.margin({top: 20})
.justifyContent(FlexAlign.SpaceBetween)
}
.width('90%')
.margin({top: 20})
.padding(20)
.borderRadius(8)
.backgroundColor('#dddddd')
}
.width('100%')
.height('100%')
.backgroundColor('#f2f3f4')
}
}
.width('100%')
.margin({top: 20})
.justifyContent(FlexAlign.SpaceBetween)
}
.width('90%')
.margin({top: 20})
.padding(20)
.borderRadius(8)
.backgroundColor('#dddddd')
}
.width('100%')
.height('100%')
.backgroundColor('#f2f3f4')
}
}
到了这里,关于HarmonyOS 开发基础(八)Row和Column的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!