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.rhkb.cn/news/257909.html

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

相关文章

计算机网络——多媒体网络

计算机网络——多媒体网络

前些天发现了一个巨牛的人工智能学习网站 通俗易懂，风趣幽默，忍不住分享一下给大家， 跳转到网站 小程一言 我的计算机网络专栏，是自己在计算机网络学习过程中的学习笔记与心得，在参考相关教材，网络搜素…
阅读更多...
C# CAD交互界面-自定义面板集-查找定位（六）

C# CAD交互界面-自定义面板集-查找定位（六）

运行环境 vs2022 c# cad2016 调试成功 一、代码说明 1. 类成员变量声明&#xff1a; List<ObjectId> objectIds new List<ObjectId>(); // 用于存储AutoCAD实体对象的ObjectId列表 private static Autodesk.AutoCAD.Windows.PaletteSet _ps2; // 自定义浮动面板…
阅读更多...
猫头虎分享已解决Bug ‍ || Java Error: Could not find or load main class com.example.Main

猫头虎分享已解决Bug ‍ || Java Error: Could not find or load main class com.example.Main

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …
阅读更多...
VMware虚拟机安装openEuler系统（二）（2024）

VMware虚拟机安装openEuler系统（二）（2024）

下面我们进行openEuler系统的一些简单配置。 1. 开启openEuler系统 在VMware Workstation Pro虚拟机软件中找到安装好的openEuler操作系统虚拟机并开启。 等待开启。 2. 安装配置 进入后选择第一个“Install openEuler 20.03-LTS”。 3. 选择系统语言 为虚拟机设置系统语言…
阅读更多...
Docker 在window 2024版笔记 下载 安装 操作 配置

Docker 在window 2024版笔记 下载 安装 操作 配置

---Docker 前言--- Docker windows版官方版是一款专业开源的应用容器引擎&#xff0c;可以加快用户构建、共享和运行现代应用程序的速度&#xff0c;支持运行Linux和Windows Docker容器。 Docker 在容器的基础上&#xff0c;进行了进一步的封装&#xff0c;从文件系统、网络互…
阅读更多...
[缓存] - 1.缓存共性问题

[缓存] - 1.缓存共性问题

1. 缓存的作用 为什么需要缓存呢&#xff1f;缓存主要解决两个问题&#xff0c;一个是提高应用程序的性能&#xff0c;降低请求响应的延时&#xff1b;一个是提高应用程序的并发性。 1.1 高并发 一般来说&#xff0c; 如果 10Wqps&#xff0c;或者20Wqps &#xff0c;可使用分布…
阅读更多...
css浮动

css浮动

CSS浮动 1. 浮动的简介 在最初&#xff0c;浮动是用来实现文字环绕图片效果的&#xff0c;现在浮动是主流的页面布局方式之一。 2. 元素浮动后的特点 脱离文档流。不管浮动前是什么元素&#xff0c;浮动后&#xff1a;默认宽与高都是被内容撑开&#xff08;尽可能小&#x…
阅读更多...
第4讲引入JWT前后端交互

第4讲引入JWT前后端交互

引入JWT前后端交互 Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准&#xff08;(RFC 7519)&#xff1b; JWT就是一段字符串&#xff0c;用来进行用户身份认证的凭证&#xff0c;该字符串分成三段【头部、载荷、签证】 后端接口测试&…
阅读更多...
(06)Hive——正则表达式

(06)Hive——正则表达式

Hive版本&#xff1a;hive-3.1.2 一、Hive的正则表达式概述 正则表达式是一种用于匹配和操作文本的强大工具&#xff0c;它是由一系列字符和特殊字符组成的模式&#xff0c;用于描述要匹配的文本模式。 Hive的正则表达式灵活使用解决HQL开发过程中的很多问题&#xff0c;本篇文…
阅读更多...
java排课管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

java排课管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java排课管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5.0&#…
阅读更多...
网络安全最典型基础靶场-DVWA-本地搭建与初始化

网络安全最典型基础靶场-DVWA-本地搭建与初始化

写在前面&#xff1a; 之前也打过这个 DVWA 靶场&#xff0c;但是是在虚拟机环境下的一个小块分区靶场&#xff1b; 本篇博客主要介绍在本地搭建 DVWA 靶场以及靶场的初始化&#xff0c;后续会陆续更新通关教程。 由于我们是在本地搭建&#xff0c;则需要基于你已经装好 phpstu…
阅读更多...
Ps：创建联系表

Ps：创建联系表

Ps菜单&#xff1a;文件/自动/联系表 II Automate/Contact sheet II Photoshop 的“联系表 II” Contact Sheet II命令为快速生成图像集合的预览和打印目录提供了一种高效的方法。 此命令可以通过自动化过程读取指定的图像文件&#xff0c;然后根据用户定义的参数&#xff08;如…
阅读更多...
STM32 STD/HAL库驱动W25Q64模块读写字库数据+OLED0.96显示例程

STM32 STD/HAL库驱动W25Q64模块读写字库数据+OLED0.96显示例程

STM32 STD/HAL库驱动W25Q64 模块读写字库数据OLED0.96显示例程 &#x1f3ac;原创作者对W25Q64保存汉字字库演示&#xff1a; W25Q64保存汉字字库 &#x1f39e;测试字体显示效果&#xff1a; &#x1f4d1;功能实现说明 利用W25Q64保存汉字字库&#xff0c;OLED显示汉字的时…
阅读更多...
C++初阶：适合新手的手撕list（模拟实现list）

C++初阶：适合新手的手撕list（模拟实现list）

上次讲了常用的接口&#xff1a;今天就来进行模拟实现啦 文章目录 1.基本结构与文件规划2.空参构造函数&#xff08;constructor)3.完善迭代器&#xff08;iterator&#xff09;(begin(),end())4.List Capacity&#xff08;size(),empty())4.增删改查(push_back,pop_back,pop_f…
阅读更多...
核心篇-OSPF技术之序（下）

核心篇-OSPF技术之序（下）

文章目录 一. 实验专题1.1. 实验1&#xff1a;配置OSPF特殊区域1.1.1. 实验目的1.1.2. 实验拓扑图1.1.3. 实验步骤&#xff08;1&#xff09;配置IP地址&#xff08;2&#xff09;创建环回口&#xff08;3&#xff09;查看路由表&#xff08;4&#xff09;设置Stub区域&#xf…
阅读更多...
Unity Meta Quest MR 开发（四）：使用 Scene API 和 Depth API 实现深度识别和环境遮挡

Unity Meta Quest MR 开发（四）：使用 Scene API 和 Depth API 实现深度识别和环境遮挡

文章目录 &#x1f4d5;教程说明&#x1f4d5;Scene API 实现遮挡&#x1f4d5;Scene API 实现遮挡的缺点&#x1f4d5;Depth API 实现遮挡⭐导入 Depth API⭐修改环境配置⭐添加 EnvironmentDepthOcclusion 预制体⭐给物体替换遮挡 Shader⭐取消现实手部的遮挡效果 此教程相关…
阅读更多...
node+vue3+mysql前后分离开发范式——实现对数据库表的增删改查

node+vue3+mysql前后分离开发范式——实现对数据库表的增删改查

文章目录 ⭐前言⭐ 功能设计与实现💖 node后端操作数据库实现增删改查💖 vue3前端实现增删改查⭐ 效果⭐ 总结⭐ 结束⭐结束⭐前言 大家好，我是yma16，本文分享关于 node+vue3+mysql前后分离开发范式——实现对数据库表的增删改查。 技术选型 前端：vite+vue3+antd 后端：…
阅读更多...
2024-02-12 Unity 编辑器开发之编辑器拓展3 —— EditorGUI

2024-02-12 Unity 编辑器开发之编辑器拓展3 —— EditorGUI

文章目录 1 GUILayout2 EditorGUI 介绍3 文本、层级、标签、颜色拾取3.1 LabelField3.2 LayerField3.3 TagField3.4 ColorField3.5 代码示例 4 枚举选择、整数选择、按下按钮4.1 EnumPopup / EnumFlagsField4.2 IntPopup4.3 DropdownButton4.4 代码示例 5 对象关联、各类型输入…
阅读更多...
自然语言处理（NLP）—— 基本概念

自然语言处理（NLP）—— 基本概念

自然语言处理&#xff08;Natural Language Processing&#xff0c;简称NLP&#xff09;是人工智能和语言学领域的一个分支&#xff0c;它涉及到计算机和人类&#xff08;自然&#xff09;语言之间的相互作用。它的主要目标是让计算机能够理解、解释和生成人类语言的数据。NLP结…
阅读更多...
分享72个Html前端模板，总有一款适合您

分享72个Html前端模板，总有一款适合您

分享72个Html前端模板&#xff0c;总有一款适合您 72个Html前端模板下载链接&#xff1a;https://pan.baidu.com/s/1ZVhDy6aMGc9fBl447d69yg?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023