明星网站建设,创客联盟网站建设,衡水移动网站建设报价,做期货浏览哪些网站HarmonyOS 开发基础#xff08;八#xff09;Row和Column
一、Column 容器
1、容器说明#xff1a;
纵向容器主轴方向#xff1a;从上到下纵向交叉轴方向#xff1a;从左到右横向
2、容器属性#xff1a;
justifyContent#xff1a;设置子元素在主轴方向的对齐格式…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、ColumnjustifyContent 属性说明
FlexAlign.Start默认参数主轴方向从上依次排序往下FlexAlign.Center主轴方向居中依次排序往下FlexAlign.End主轴方向从下边位置排序保持不变FlexAlign.SpaceBetween主轴方向平均分配上下顶格FlexAlign.SpaceAround主轴方向平均分配距离上下平均分配的一半FlexAlign.SpaceEvenly主轴方向平均分配距离上下平均分配
2、RowjustifyContent 属性说明
FlexAlign.Start默认参数主轴方向从左位置依次排序往右FlexAlign.Center主轴方向居中依次排序往右FlexAlign.End主轴方向从右边位置排序保持不变FlexAlign.SpaceBetween主轴方向平均分配左右顶格FlexAlign.SpaceAround主轴方向平均分配距离左右平均分配的一半FlexAlign.SpaceEvenly主轴方向平均分配距离左右平均分配 四、Column 和 Row 的 alignItems 属性说明
1、ColumnalignItems 属性说明
HorizontalAlign.Start默认参数交叉轴方向左边顶格HorizontalAlign.Center交叉轴方向居中HorizontalAlign.End交叉轴方向右边顶格
2、RowalignItems 属性说明
HorizontalAlign.Start默认参数交叉轴方向上边顶格HorizontalAlign.Center交叉轴方向居中HorizontalAlign.End交叉轴方向下边顶格 五、基础使用 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)}}
}六、高级使用 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)}
}
