HarmonyOS 开发基础(八)Row和Column

HarmonyOS 开发基础(八)Row和Column

一、Column 容器

1、容器说明:
  • 纵向容器
  • 主轴方向:从上到下纵向
  • 交叉轴方向:从左到右横向
2、容器属性:
  1. justifyContent:设置子元素在主轴方向的对齐格式,参数 FlexAlign 枚举
  2. alignItems:设置子元素在交叉轴方向的对齐格式,参数 HorizontalAlign 枚举
3、参数说明:
  • space:内元素之间的间隔,对象值,如:{space: 20},元素之间的间隔为20

二、Row 容器

1、容器说明:
  • 横向容器
  • 主轴方向:从左到右横向
  • 交叉轴方向:从上到下纵向
2、容器属性:
  1. justifyContent:设置子元素在主轴方向的对齐格式,参数 FlexAlign 枚举
  2. alignItems:设置子元素在交叉轴方向的对齐格式,参数 VerticalAlign 枚举
3、参数说明:
  • space:内元素之间的间隔,对象值,如:{space: 20},元素之间的间隔为20

在这里插入图片描述

三、Column 和 Row 的 justifyContent 属性说明

1、Column:justifyContent 属性说明
  1. FlexAlign.Start:默认参数,主轴方向,从上依次排序往下
  2. FlexAlign.Center:主轴方向,居中依次排序往下
  3. FlexAlign.End:主轴方向,从下边位置排序保持不变
  4. FlexAlign.SpaceBetween:主轴方向,平均分配,上下顶格
  5. FlexAlign.SpaceAround:主轴方向,平均分配,距离上下平均分配的一半
  6. FlexAlign.SpaceEvenly:主轴方向,平均分配,距离上下平均分配
2、Row:justifyContent 属性说明
  1. FlexAlign.Start:默认参数,主轴方向,从左位置依次排序往右
  2. FlexAlign.Center:主轴方向,居中依次排序往右
  3. FlexAlign.End:主轴方向,从右边位置排序保持不变
  4. FlexAlign.SpaceBetween:主轴方向,平均分配,左右顶格
  5. FlexAlign.SpaceAround:主轴方向,平均分配,距离左右平均分配的一半
  6. FlexAlign.SpaceEvenly:主轴方向,平均分配,距离左右平均分配

在这里插入图片描述

四、Column 和 Row 的 alignItems 属性说明

1、Column:alignItems 属性说明
  1. HorizontalAlign.Start:默认参数,交叉轴方向,左边顶格
  2. HorizontalAlign.Center:交叉轴方向,居中
  3. HorizontalAlign.End:交叉轴方向,右边顶格
2、Row:alignItems 属性说明
  1. HorizontalAlign.Start:默认参数,交叉轴方向,上边顶格
  2. HorizontalAlign.Center:交叉轴方向,居中
  3. 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')}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/238506.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows安装Rust环境(详细教程)

一、 安装mingw64(C语言环境) Rust默认使用的C语言依赖Visual Studio,但该工具占用空间大安装也较为麻烦,可以选用轻便的mingw64包。 1.1 安装地址 (1) 下载地址1-GitHub:Releases niXman/mingw-builds-binaries GitHub (2) 下载地址2-W…

BIOS知识枝桠——RAID 磁盘阵列

文章目录 前言一、RAID介绍二、RAID等级分类1.RAID02.RAID13.RAID24.RAID3和RAID45.RAID5和RAID66.RAID77.RAID10 BIOS下组建RAID 前言 假设存在多块磁盘,如果不组建阵列,磁盘与磁盘之间是没有任何关系的。磁盘A和B,放在A中的文件与B磁盘没有…

知识付费saas租户平台:揭秘成功的密码

明理信息科技知识付费saas租户平台 随着互联网的快速发展,人们越来越重视知识的获取和价值的挖掘。在这个信息爆炸的时代,知识付费已经成为了一种新的商业模式,为知识的传播和价值的转化提供了更加高效和便捷的途径。本文将探讨知识付费的发…

数据库第一次作业

1.创建一个英雄表 create table t_hero ( id int primary key auto_increment, name varchar(10) unique not null, gender char(5) check (gender in (男,女)), grade char(5) default 5星, groups char(5) check (groups in (毁灭,巡猎,智识,存护,…

毕业设计:基于python微博舆情分析系统+可视化+Django框架 K-means聚类算法(源码)✅

毕业设计:2023-2024年计算机专业毕业设计选题汇总(建议收藏) 毕业设计:2023-2024年最新最全计算机专业毕设选题推荐汇总 🍅感兴趣的可以先收藏起来,点赞、关注不迷路,大家在毕设选题&#xff…

2019年江苏省职教高考计算机技能考试——一道改错题的分析

题目:函数将str字符串中的5个数字字符串转换为整数,并保存在二维数组m的最后一行,各元素为3、-4、16、18、6。并经函数move处理后,运行结果如下: 18 6 3 -4 16 16 18 6 3 -4 -4 16 …

web缓存之nginx缓存

一、nginx缓存知识 网络缓存位于客户端和 "源服务器 "之间,保存着所有可见内容的副本。当客户端请求缓存中存储的内容时,它可以直接从缓存中检索内容,而无需与服务器通信。这样,网络缓存就 "接近 "了客户端&a…

数据安全保障的具体措施有哪些

随着信息化时代的到来,数据已经成为企业和社会发展的重要资产。然而,数据安全问题也日益突出,如何保障数据的安全性、完整性和可用性成为了亟待解决的问题。以下将详细探讨数据安全保障的各个方面,以期为企业和社会提供更好的数据…

资深技术专家热议:下云风潮下企业该如何抉择?

引言 随着数字化的推进,很多企业都将上云作为数字化建设的重要指标,很多研究也表明上云可以帮助企业节约成本、提升效率。然而,近期下云风波似乎和云化的趋势唱了一个反调,我们应该如何理性看待下云潮?云计算的下一站将…

【计算机组成原理】期末复习试卷

目录 第一套试卷 第一套答案 第二套试卷 第二套答案 第三套试卷 第四套试卷 剩余试卷下载 第一套试卷 一、选择题(共20分,每题1分) 1.冯诺伊曼机工作方式的基本特点是______。 A.多指令流单数据流; B&#…

pl/sql程序块的使用

-- Created on 2024-01-15 by ADMINISTRATOR declare -- Local variables hererecord_tablename varchar2(100);---test_record表名record_StartNo integer(19);---test_record开始编号temp_No integer(19);maxnbbh integer(19);nCnt integer : 20;fi…

【CGAL系列】---Mesh修复

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ:870202403 前言 本文分享CGAL中关于Mesh修复问题,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞关注,小易会继续努力分享,一起进步! 你的点赞就是我的动…

Elasticsearch--Master选举

角色 主节点(active master):一般指的是活跃的主节点,避免负载任务,主节点主要用来管理集群,专用master节点仍将充当协调节点 候选节点(master-eligible nodes):默认具备…

图形化编程:以Scratch引领少儿编程思维启蒙之旅

在21世纪科技飞速发展的今天,编程教育已经成为培养未来人才的重要途径。而“少儿编程”这一概念的提出,正是为了让孩子们从小接触并理解计算机逻辑,锻炼他们的创新思维与问题解决能力。其中,图形化编程以其直观易懂、趣味性强的特…

ElasticSearch分布式搜索引擎(两万字详解)

文章目录 ElasticSearch分布式搜索引擎1.了解ESELK技术栈elasticsearch和lucene为什么不是其他搜索技术?总结倒排索引正向索引倒排索引正向和倒排 es的一些概念文档和字段索引和映射mysql与elasticsearch 2.安装elasticsearch1.部署单点es1.1.创建网络1.2.拉取镜像1…

【C语言基础】01环境安装 Windows下的CLion开发环境的安装

资源:放在评论区中 下载编译器mingw64 把压缩包拖拽到C盘根目录,一键解压压缩包,得到文件夹mingw64 安装CLion开发环境 点击CLion.exe,运行安装程序路径为默认安装,如需更改,注意路径中不要带有中文. Installation Options 全部勾选选择<我想要之后重启电脑>点击CLion…

自动生成批量验证码用于RPA组件测试的方法

许多人工智能和RPA公司致力于开发能够识别验证码的组件&#xff0c;以便在自动化操作中处理通过网页和App弹出的验证码验证&#xff0c;从而完成后续的自动化流程。作为从事人工智能行业的专业人士&#xff0c;在测试过程中通常需要搜集大量验证码素材&#xff0c;以评估验证码…

Linux学习记录——삼십팔 网络层IP协议

文章目录 1、了解IP协议2、IP协议报文1、8位服务类型2、16位总长度&#xff08;字节数&#xff09;3、8位生存时间&#xff08;TTL&#xff09; 3、网段划分1、网段划分和CIDR方案2、子网划分简单方法3、IP地址问题的解决方案 4、公网内网1、内网分配2、运营商管理方法 5、路由…

C++力扣题目669--修剪二叉搜索树

给你二叉搜索树的根节点 root &#xff0c;同时给定最小边界low 和最大边界 high。通过修剪二叉搜索树&#xff0c;使得所有节点的值在[low, high]中。修剪树 不应该 改变保留在树中的元素的相对结构 (即&#xff0c;如果没有被移除&#xff0c;原有的父代子代关系都应当保留)。…

Uncaught ReferenceError: videojs is not defined

项目场景&#xff1a; 项目背景&#xff1a; 开发 vue 项目时&#xff0c;调试时浏览器前端控制台 出现红色 报错信息&#xff1a; Uncaught ReferenceError: videojs is not defined 问题描述 遇到的问题&#xff1a; 开发 vue 项目时&#xff0c; 浏览器控制台出现如下所…