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.mzph.cn/news/624108.shtml

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

相关文章

实例分割论文精读:Mask R-CNN

1.摘要 本文提出了一种概念简单、灵活、通用的实例分割方法,该方法在有效地检测图像中的物体同时,为每个物体实例生成一个实例分割模板,添加了一个分支,用于预测一个对象遮罩,与现有的分支并行,用于边界框…

零知识证明的最新发展和应用

PrimiHub一款由密码学专家团队打造的开源隐私计算平台,专注于分享数据安全、密码学、联邦学习、同态加密等隐私计算领域的技术和内容。 当企业收集大量客户数据去审查、改进产品和服务以及将数据资产货币化时,他们容易受到网络攻击威胁,造成数…

RC4加解密源码

本文介绍RC4加解密源码。 RC4(来自Rivest Cipher 4的缩写)是一种流加密算法,密钥长度可变。它加解密使用相同的密钥,因此也属于对称加密算法。RC4具有加解密速度快,算法简单等优点,在算力不高场合&#xf…

C++输入与输出

C 中的输入与输出主要通过标准输入输出流实现。以下是一些基本示例代码&#xff0c;演示了如何使用 cin 来输入变量的值&#xff0c;并使用 cout 来输出变量的值。 输入变量的值 #include <iostream> using namespace std;int main() {int number;cout << "…

用重建大师时,在主服务器建了一个快捷方式,给局域网其他电脑开了权限,其他电脑能正常访问主服务器数据吗?

答&#xff1a;可以的&#xff0c;重建大师支持集群方式。数据放在服务器文件夹das&#xff0c;在主服务器读取数据建立了一个快捷方式&#xff0c;这个快捷方式给局域网其他电脑开了权限&#xff0c;其他电脑是可以通过快捷方式正常访问主服务器数据的。 重建大师是一款专为超…

昇腾910b部署Chatglm3-6b进行流式输出【pytorch框架】NPU推理

文章目录 准备阶段避坑阶段添加代码结果展示 准备阶段 配套软件包Ascend-cann-toolkit和Ascend-cann-nnae适配昇腾的Pytorch适配昇腾的Torchvision Adapter下载ChatGLM3代码下载chatglm3-6b模型&#xff0c;或在modelscope里下载 避坑阶段 每个人的服务器都不一样&#xff0…

Pixart PAR2861 蓝牙 keyboard 开发笔记

Pixart PAR2861 是一款采用32 bits ARM Cortex-M0 低功耗、高效能 2.4GHz RF 的 SoC。 该 SoC 整合了高效能的 2.4GHz RF 收发器、硬体Keyscan、硬体按键防弹跳、SPI、I2C、PWM LED、ADC、UART等。内建 DC/DC 转换器和 LDO 为独立 HID 应用提供完整的低功耗 SoC 解决方案。 1.…

2023年网络安全事件处罚盘点,文件销毁 硬盘销毁 物料销毁

《中华人民共和国网络安全法》是我国第一部全面规范网络空间安全管理方面问题的基础性法律&#xff0c;是我国网络空间法治建设的重要里程碑&#xff0c;《中华人民共和国网络安全法》从2013年下半年提上日程&#xff0c;到2016年年底颁布&#xff0c;自2017年6月1日起施行&…

已解决java.lang.ReflectiveOperationException异常的正确解决方法,亲测有效!!!

已解决java.lang.ReflectiveOperationException异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 文章目录 问题分析 报错原因 解决思路 解决方法 总结 问题分析 ReflectiveOperationException是Java反射操作中可能抛出的多种异常的父类。 …

滑动登陆注册同页面

这是一个登陆注册在同一个页面滑动选择的页面 技术&#xff1a;html、css、javascript 简单页面实现&#xff08;为了方便&#xff0c;已将代码放在同一文件引用&#xff09;&#xff1a; 1.1、效果图 1.2、完整代码&#xff1a; <!DOCTYPE html> <html lang"…

代码进阶-代码注意事项总结

前言:敲了很多代码了&#xff0c;简单总结一下&#xff0c;代码中让代码运行更好的技巧 多写日志信息&#xff0c;检测到参数和可能出现的异常 多写校验&#xff0c;防止出现一些不可控的输入 不可控的输入包括 模糊查询 的关键字 例如 % _ 或者其他的sql相关的关键字和符号…

virtualbox Ubuntu 网络连接

一、网络连接需求1—— 上网&#xff1a; 虚拟机默认的NAT连接方式&#xff0c;几乎不需要怎么配置&#xff0c;即可实现上网。 enp0s17以太网必须要开启&#xff0c;才能上网&#xff1b; 但是主机ping不通虚拟机&#xff0c;貌似可以ping 127.0.0.1; 二、主机和虚拟机相互p…

《Vite 基础知识》使用 Glob 动态加载 .vue 文件

前言 开发基于 Vite Vue3 的组件库&#xff0c;多个 .vue 文件需要动态加载&#xff01; 注意 import.meta.globEager 已经弃用&#xff0c;请使用 import.meta.glob 来代替&#xff01; 使用 Glob 异步方式 代码第 1 行&#xff0c;注意使用两个 **&#xff0c;匹配当前目…

语境化语言表示模型-ELMO、BERT、GPT、XLnet

一.语境化语言表示模型介绍 语境化语言表示模型&#xff08;Contextualized Language Representation Models&#xff09;是一类在自然语言处理领域中取得显著成功的模型&#xff0c;其主要特点是能够根据上下文动态地学习词汇和短语的表示。这些模型利用了上下文信息&#xf…

医院患者满意度调查方法有哪些?

医院患者满意度调查可以使用多种方法来收集患者的反馈和意见。以下是一些常见的医院患者满意度调查方法&#xff1a; 在线调查问卷&#xff1a;这是一种常见的调查方法&#xff0c;患者可以在电脑、平板电脑或智能手机上填写问卷。在线问卷通常易于分发和收集&#xff0c;可以…

DrGraph原理示教 - OpenCV 4 功能 - 形态操作

形态类型 从OpenCV图像处理基本知识来看&#xff0c;膨胀腐蚀操作后&#xff0c;还有形态操作&#xff0c;如开运算、闭运算、梯度、礼帽与黑帽&#xff0c;感觉很多&#xff0c;其实&#xff0c;本质上就是批处理操作&#xff0c;如 开运算&#xff1a;先腐蚀&#xff0c;再膨…

大模型LLM Agent在 Text2SQL 应用上的实践

1.前言 在上篇文章中「如何通过Prompt优化Text2SQL的效果」介绍了基于Prompt Engineering来优化Text2SQL效果的实践&#xff0c;除此之外我们还可以使用Agent来优化大模型应用的效果。 本文将从以下4个方面探讨通过AI Agent来优化LLM的Text2SQL转换效果。 1 Agent概述2 Lang…

deepseed 单机多卡程序报错:exits with return code -7

现象&#xff1a;exits with return code -7原因&#xff1a;Setting the shm-size to a large number instead of default 64MB when creating docker container solves the problem in my case. It appears that multi-gpu training relies on the shared memory. ref 排查是…

肯尼斯·里科《C和指针》第6章 指针(3)

肯尼斯里科《C和指针》第6章 指针&#xff08;1&#xff09;-CSDN博客 肯尼斯里科《C和指针》第6章 指针&#xff08;2&#xff09;-CSDN博客 前置知识&#xff1a;左值右值 为了理解有些操作符存在的限制&#xff0c;必须理解左值(L-value)和右值(R-value)之间的区别。这两个…

2024年百场进校公益安全培训开启

自2023年年底&#xff0c;上海风暴救援队积极策划并推动了2024年的“百场进校传安全”培训项目。经过在东方锦绣于2023年12月14日、上钢新村幼儿园于2023年12月28日的先期测试&#xff0c;项目于2024年1月5日在齐河路幼儿园正式启动。随后&#xff0c;于2024年1月11日在浦南幼儿…