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 就…

共享指针在项目中实际的用法

共享指针是 C 中一种智能指针,用于管理动态内存。它可以有效防止内存泄漏和悬空指针问题。在实际项目中,共享指针有以下几种常见的用法: 1. 管理对象的生命周期 共享指针可以用来管理对象的生命周期。当最后一个共享指针指向的对象时&#…

Android 10.0 展讯平台长按power电源键开机时间修改

1.前言 在10.0的系统产品开发中,在产品关机的情况下,长按power电源键的情况下,会开启机器然后进入开机流程中,否则就不会开机 ,但是为了防误撞,误开机要求延长长按power电源键开机时间,所以就需要从kernel中来分析下长按开机的相关源码来实现 相关的功能 2.展讯平台长…

2024/2/14

指针练习 1、选择题 1.1、若有下面的变量定义,以下语句中合法的是( A )。 int i,a[10],*p; A) pa2; B) pa[5]; C) pa[2]2; D) p&(i…

玉米田——状态压缩DP

农夫约翰的土地由 MN 个小方格组成,现在他要在土地里种植玉米。 非常遗憾,部分土地是不育的,无法种植。 而且,相邻的土地不能同时种植玉米,也就是说种植玉米的所有方格之间都不会有公共边缘。 现在给定土地的大小&…

Codeforces Round 924(Div.2) A~E

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

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

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

django中配置使用websocket

Django 默认情况下并不支持 WebSocket,但你可以通过集成第三方库如 channels 来实现 WebSocket 功能。channels 是一个 Django 应用,它提供了对 WebSocket、HTTP2 和其他协议的支持。 下面是如何在 Django 项目中使用 WebSocket 的基本步骤:…

算法讲解之哈希表

哈希表简介: 通过以下几个问题来解释~ 1、哈希表是什么? 存储数据的容器。 2、有什么用? “快速”查找某个元素。时间复杂度O(1) 空间复杂度O(N) 3、什么时候使用哈希表 频繁的查找某个数时。 4、怎么用哈希表 第一种就是直接使用哈…

十三、枚举

文章目录 枚举4.1 基础4.2 实现枚举4.3 自定义枚举 枚举 本文为书籍《Java编程的逻辑》1和《剑指Java:核心原理与应用实践》2阅读笔记 枚举是一种特殊的数据,它的取值是有限的,是可以枚举出来的,比如一年有四季、一周有七天。 …

算法导论记录丨16.1 活动选择、877. 石子游戏

16.1 活动选择 最优子结构 活动选择问题的最优子结构意味着问题的最优解包含了其子问题的最优解。具体来说,如果我们有一个按结束时间排序的活动集合 S{a1​,a2​,...,an​},并且 S’ 是 S 的最大兼容活动子集,那么对于 S′ 中的任何活动aj…

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…

。ldewd

学习目标: 提示:这里可以添加学习目标 例如: 一周掌握 Java 入门知识 学习内容: 提示:这里可以添加要学的内容 例如: 搭建 Java 开发环境掌握 Java 基本语法掌握条件语句掌握循环语句 学习时间&#x…

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…