HarmonyOS鸿蒙学习基础篇 - Column/Row 组件

前言

  Row和Column组件是线性布局容器,用于按照垂直或水平方向排列子组件。Row表示沿水平方向布局的容器,而Column表示沿垂直方向布局的容器。这些容器具有许多属性和方法,可以方便地管理子组件的位置、大小、间距和对齐方式。例如,可以设置容器内部的子组件之间的间距(space属性),以及子组件在主轴(水平或垂直方向)和交叉轴上的对齐方式。

Column组件

Column(value?: {space?: string | number})

参数解释:

参数名

参数类型

必填

参数描述

space

string | number

纵向布局元素垂直方向间距。

从API version 9开始,space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。

默认值:0

说明:

可选值为大于等于0的数字,或者可以转换为数字的字符串。

Column组件支持很多通用属性,如:width、height等,还支持如下属性:

名称

参数类型

描述

alignItems

HorizontalAlign

设置子组件在水平方向上的对齐格式。

默认值:HorizontalAlign.Center

从API version 9开始,该接口支持在ArkTS卡片中使用。

justifyContent8+

FlexAlign

设置子组件在垂直方向上的对齐格式。

默认值:FlexAlign.Start

从API version 9开始,该接口支持在ArkTS卡片中使用。

示例

以下代码定义了一个名为 ColumnExample 的组件,用于展示 Column 布局的不同特性,包括子元素间距、对齐方式和背景颜色。

@Entry  // 使用 @Entry 装饰器标识这是一个入口组件。
@Component  // 使用 @Component 装饰器定义一个新组件。
struct ColumnExample {  // 定义名为 ColumnExample 的结构体,代表这个组件。build() {  // 定义 build 方法来构建UI。Column({ space: 5 }) {  // 创建一个 Column 组件,设置子元素间的垂直间距为5。Text('space').width('90%')  // 创建一个 Text 组件,说明接下来的内容与space属性相关。Column({ space: 5 }) {  // 创建一个内部 Column 组件,再次设置子元素间的垂直间距为5。Column().width('100%').height(30).backgroundColor(0xAFEEEE)  // 创建一个 Column 子组件,设置宽度、高度和背景颜色为浅蓝色。Column().width('100%').height(30).backgroundColor(0x00FFFF)  // 创建另一个 Column 子组件,设置宽度、高度和背景颜色为青色。}.width('90%').height(100).border({ width: 1 })  // 为这个内部 Column 设置宽度、高度和边框。// 设置子元素水平方向对齐方式Text('alignItems(Start)').width('90%')  // 创建一个 Text 组件,说明接下来的内容与水平起始对齐相关。Column() {  // 创建一个 Column 组件。Column().width('50%').height(30).backgroundColor(0xAFEEEE)  // 创建一个子 Column,设置宽度、高度和背景颜色为浅蓝色。Column().width('50%').height(30).backgroundColor(0x00FFFF)  // 创建另一个子 Column,设置宽度、高度和背景颜色为青色。}.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 })  // 为这个 Column 设置子元素水平起始对齐、宽度和边框。Text('alignItems(End)').width('90%')  // 创建一个 Text 组件,说明接下来的内容与水平结束对齐相关。Column() {  // 创建一个 Column 组件。Column().width('50%').height(30).backgroundColor(0xAFEEEE)  // 创建子 Column 组件,设置同上。Column().width('50%').height(30).backgroundColor(0x00FFFF)  // 创建另一个子 Column 组件,设置同上。}.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 })  // 为这个 Column 设置子元素水平结束对齐、宽度和边框。Text('alignItems(Center)').width('90%')  // 创建一个 Text 组件,说明接下来的内容与水平居中对齐相关。Column() {  // 创建一个 Column 组件。Column().width('50%').height(30).backgroundColor(0xAFEEEE)  // 创建子 Column 组件,设置同上。Column().width('50%').height(30).backgroundColor(0x00FFFF)  // 创建另一个子 Column 组件,设置同上。}.alignItems(HorizontalAlign.Center).width('90%').border({ width: 1 })  // 为这个 Column 设置子元素水平居中对齐、宽度和边框。// 设置子元素垂直方向的对齐方式Text('justifyContent(Center)').width('90%')  // 创建一个 Text 组件,说明接下来的内容与垂直居中对齐相关。Column() {  // 创建一个 Column 组件。Column().width('90%').height(30).backgroundColor(0xAFEEEE)  // 创建子 Column 组件,设置宽度、高度和背景颜色为浅蓝色。Column().width('90%').height(30).backgroundColor(0x00FFFF)  // 创建另一个子 Column 组件,设置宽度、高度和背景颜色为青色。}.height(100).border({ width: 1 }).justifyContent(FlexAlign.Center)  // 为这个 Column 设置高度、边框和子元素垂直居中对齐。Text('justifyContent(End)').width('90%')  // 创建一个 Text 组件,说明接下来的内容与垂直结束对齐相关。Column() {  // 创建一个 Column 组件。Column().width('90%').height(30).backgroundColor(0xAFEEEE)  // 创建子 Column 组件,设置同上。Column().width('90%').height(30).backgroundColor(0x00FFFF)  // 创建另一个子 Column 组件,设置同上。}.height(100).border({ width: 1 }).justifyContent(FlexAlign.End)  // 为这个 Column 设置高度、边框和子元素垂直结束对齐。}.width('100%').padding({ top: 5 })  // 为最外层 Column 设置宽度和顶部内边距。}
}

代码预览:

Row组件

Row(value?:{space?: number | string })

参数解释:

参数名

参数类型

必填

参数描述

space

string | number

横向布局元素间距。

从API version 9开始,space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。

默认值:0,单位vp

说明:

可选值为大于等于0的数字,或者可以转换为数字的字符串。

Row属性:

名称

参数类型

描述

alignItems

VerticalAlign

设置子组件在垂直方向上的对齐格式。

默认值:VerticalAlign.Center

从API version 9开始,该接口支持在ArkTS卡片中使用。

justifyContent8+

FlexAlign

设置子组件在水平方向上的对齐格式。

默认值:FlexAlign.Start

从API version 9开始,该接口支持在ArkTS卡片中使用。

示例

如下代码定义了一个名为 RowExample 的组件,用于展示 Row 布局的不同特性,包括子元素间距、垂直对齐方式和水平对齐方式。

@Entry  // 使用 @Entry 装饰器标识这是一个入口组件。
@Component  // 使用 @Component 装饰器定义一个新组件。
struct RowExample {  // 定义名为 RowExample 的结构体,代表这个组件。build() {  // 定义 build 方法来构建UI。Column({ space: 5 }) {  // 创建一个 Column 组件,设置子元素间的垂直间距为5。Text('space').width('90%')  // 创建一个 Text 组件,说明接下来的内容与space属性相关。Row({ space: 5 }) {  // 创建一个 Row 组件,设置子元素间的水平间距为5。Row().width('30%').height(50).backgroundColor(0xAFEEEE)  // 创建一个子 Row 组件,设置宽度、高度和背景颜色为浅蓝色。Row().width('30%').height(50).backgroundColor(0x00FFFF)  // 创建另一个子 Row 组件,设置宽度、高度和背景颜色为青色。}.width('90%').height(107).border({ width: 1 })  // 为这个 Row 设置宽度、高度和边框。// 设置子元素垂直方向对齐方式Text('alignItems(Bottom)').width('90%')  // 创建一个 Text 组件,说明接下来的内容与垂直底部对齐相关。Row() {  // 创建一个 Row 组件。Row().width('30%').height(50).backgroundColor(0xAFEEEE)  // 创建子 Row 组件,设置同上。Row().width('30%').height(50).backgroundColor(0x00FFFF)  // 创建另一个子 Row 组件,设置同上。}.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 })  // 为这个 Row 设置垂直底部对齐、宽度、高度和边框。Text('alignItems(Center)').width('90%')  // 创建一个 Text 组件,说明接下来的内容与垂直居中对齐相关。Row() {  // 创建一个 Row 组件。Row().width('30%').height(50).backgroundColor(0xAFEEEE)  // 创建子 Row 组件,设置同上。Row().width('30%').height(50).backgroundColor(0x00FFFF)  // 创建另一个子 Row 组件,设置同上。}.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 })  // 为这个 Row 设置垂直居中对齐、宽度、高度和边框。// 设置子元素水平方向对齐方式Text('justifyContent(End)').width('90%')  // 创建一个 Text 组件,说明接下来的内容与水平结束对齐相关。Row() {  // 创建一个 Row 组件。Row().width('30%').height(50).backgroundColor(0xAFEEEE)  // 创建子 Row 组件,设置同上。Row().width('30%').height(50).backgroundColor(0x00FFFF)  // 创建另一个子 Row 组件,设置同上。}.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End)  // 为这个 Row 设置水平结束对齐、宽度和边框。Text('justifyContent(Center)').width('90%')  // 创建一个 Text 组件,说明接下来的内容与水平居中对齐相关。Row() {  // 创建一个 Row 组件。Row().width('30%').height(50).backgroundColor(0xAFEEEE)  // 创建子 Row 组件,设置同上。Row().width('30%').height(50).backgroundColor(0x00FFFF)  // 创建另一个子 Row 组件,设置同上。}.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center)  // 为这个 Row 设置水平居中对齐、宽度和边框。}.width('100%')  // 为最外层 Column 设置宽度为100%。}
}

代码预览:

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

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

相关文章

从C向C++7——继承

一.继承 1.理解继承 C中的继承是类与类之间的关系,是一个很简单很直观的概念,与现实世界中的继承类似,例如儿子继承父亲的财产。 继承可以理解为一个类从另一个类获取成员变量和成员函数的过程。例如类 B 继承于类 A,那么 B 就…

Codeforces Round 924(Div.2) A~E

A.Rectangle Cutting (模拟) 题意: 给出一个长方形,通过平行于原始矩形的一条边进行切割,将该矩形切割成两个边长为整数的矩形。询问是否能通过旋转和移动这两个矩形,得到新的矩形。 分析: 可以发现拼成的新长方形…

Python算法探索:从经典到现代(三)

一、引言 随着信息技术的飞速发展,数据已经成为现代社会不可或缺的资源。Python,作为数据处理和分析的利器,为我们提供了大量强大的库和工具,用于从经典到现代的各种算法探索。本文将带你领略Python在算法领域的魅力,从…

COW AI接入到微信 保姆教程 (部署在服务器,插件安装)

此文章不涉及国外的AI模型,也无需翻墙,跟某AI模型无关,审核大哥别弄错了 最近的AI开始越开越火了,开始介入到我们生活中的方方面面。就有人好奇AI是否能接入到微信吗?我在GitHub上搜索的时候还真有除了对话外还可以通…

MySQL 基础知识(五)之数据增删改

目录 1 插入数据 2 删除数据 3 更改数据 创建 goods 表 drop table if exists goods; create table goods ( id int(10) primary key auto_increment, name varchar(14) unique, stockdate date )charsetutf8; 1 插入数据 当要插入的数据为日期/时间类型时,如果…

Spring Boot 笔记 021 项目部署

1.1 引入坐标,并双击package打包成jar包 1.2 在服务器上运行jar包 1.3 使用postman测试 2.1 运行配置 2.1.1 命令更改端口 java -jar big-event-1.0-SNAPSHOT.jar --server.port7777 2.1.2 环境变量更新(略) 2.1.3 外部配置文件&#xff0c…

日期类运算符重载以及const成员详细解析

个人主页:点我进入主页 专栏分类:C语言初阶 C语言进阶 数据结构初阶 Linux C初阶 算法 欢迎大家点赞,评论,收藏。 一起努力,一起奔赴大厂 目录 一.前言 二.运算符重载 2.1概念 2.2比较的符号重载 2.2.1…

ZBX_NOTSUPPORTED: Unsupported item key. 原因排查

进行自定义监控项时,在zabbix-agent端测试没问题,却在zabbix-server进行测试时,出现 ZBX_NOTSUPPORTED: Unsupported item key. 1.在zabbix-agent测试没问题,证明自定义监控项的脚本没问题,却在zabbix-server端测试出…

点击侧边栏菜单时只切换 <router-view> 中的内容,而不是进行整个页面的路由跳转(动态路由)

解决方法&#xff1a;在 <el-menu> 的 select 事件中调用了 handleMenuSelect 方法来处理菜单项的选择。你可以在 handleMenuSelect 方法中根据菜单项的 index 来执行相应的操作&#xff0c;例如更新组件内的数据或者切换组件。由于整个页面的路由路径并没有改变&#xf…

平时积累的FPGA知识点(7)

平时在FPGA群聊等积累的FPGA知识点&#xff0c;第七期&#xff1a; 11 描述扇出的xilinx官方文档是&#xff1f; 解释&#xff1a;ug949 12 在BD中如何指定某个IP用global&#xff0c;其他的用OOC模式&#xff1f;因为某个模块引用的IP带着XPM&#xff0c;综合不了 解释&am…

代码随想录Day50 | 70. 爬楼梯 322. 零钱兑换 279.完全平方数

代码随想录Day50 | 70. 爬楼梯 322. 零钱兑换 279.完全平方数 70.爬楼梯322.零钱兑换279.完全平方数 70.爬楼梯 文档讲解&#xff1a;代码随想录 视频讲解&#xff1a; 状态 dp数组 dp[j]表示爬上第j阶台阶需要的方法数递推公式&#xff0c;由于在每一阶台阶可以向上走1~m阶&a…

代码随想录算法训练营Day57|647. 回文子串、516.最长回文子序列、动态规划总结

目录 647. 回文子串 前言 思路 算法实现 516.最长回文子序列 前言 思路 算法实现 动态规划总结 动规五部曲回顾 动规各小专题问题 647. 回文子串 题目链接 文章链接 前言 本题利用动态规划求解时&#xff0c;dp数组的定义与前面的就有些不同了&#xff0c;是难点之…

随机过程及应用学习笔记(三)几种重要的随机过程

介绍独立过程和独立增量过程。重点介绍两种独立增量过程-—维纳过程和泊松过程。 目录 前言 一、独立过程和独立增量过程 1、独立过程&#xff08;Independent Process&#xff09; 2、独立增量过程&#xff08;Independent Increment Process&#xff09; 二、正态过程&am…

debug - 打补丁 - 浮点数加法

文章目录 debug - 打补丁 - 浮点数加法概述笔记demo用CE查看汇编(x64debug)main()update_info()快捷键 - CE中查看代码时的导航打补丁的时机 - 浮点数加法补丁代码补丁效果浮点数寄存器组的保存END debug - 打补丁 - 浮点数加法 概述 在cm中, UI上显示的数值仅仅用来显示, 改…

力扣---通配符匹配

题目描述&#xff1a; 给你一个输入字符串 (s) 和一个字符模式 (p) &#xff0c;请你实现一个支持 ? 和 * 匹配规则的通配符匹配&#xff1a; ? 可以匹配任何单个字符。 * 可以匹配任意字符序列&#xff08;包括空字符序列&#xff09;。 判定匹配成功的充要条件是&#xff…

华为23年9月笔试原题,巨详细题解,附有LeetCode测试链接

文章目录 前言思路主要思路关于f函数的剖析Code就到这&#xff0c;铁子们下期见&#xff01;&#xff01;&#xff01;&#xff01; 前言 铁子们好啊&#xff01;今天阿辉又给大家来更新新一道好题&#xff0c;下面链接是23年9月27的华为笔试原题&#xff0c;LeetCode上面的ha…

开源≠不赚钱,开源软件盈利的7大模式。

开源不是目的&#xff0c;目的是圈用户&#xff0c;留住用户&#xff0c;盈利自然不成问题。 开源系统可以通过多种方式赚钱&#xff0c;以下是其中几种常见的方式&#xff1a; 提供付费支持&#xff1a; 开源系统可以提供付费的技术支持服务&#xff0c;包括安装、配置、维…

mysql5.6安装---windows版本

安装包下载 链接&#xff1a;https://pan.baidu.com/s/1L4ONMw-40HhAeWrE6kluXQ 提取码&#xff1a;977q 安装视频 1.解压完成之后将其放到你喜欢的地址当中去&#xff0c;这里我默认放在了D盘&#xff0c;这是我的根目录 2.配置环境变量 我的电脑->属性->高级->环境…

阿里云增加数据库访问白名单

阿里云增加数据库访问白名单 概况 我们希望在外网访问数据库时&#xff0c;可能会遇到无法连接的问题&#xff0c;这有可能是被拦截了。这时就需要去查看自己的ip有没有在白名单里面&#xff0c;没有的话就把ip加入到白名单。 路径 阿里云控制台-搜索RDS-进入RDS管理控制台…

宋小黑的生财知识资料库第1011期

大家好&#xff0c;我是小黑&#xff0c;在当前经济和职场环境中&#xff0c;拥有一份副业已经成为很多人增加财务安全感和提升个人能力的重要手段。通过投身于副业&#xff0c;你不仅可以为自己创造一个额外的收入来源&#xff0c;减少对主职工作的经济依赖&#xff0c;还可以…