【HarmonyOS】掌握布局组件，提升应用体验

       从今天开始，博主将开设一门新的专栏用来讲解市面上比较热门的技术 “鸿蒙开发”，对于刚接触这项技术的小伙伴在学习鸿蒙开发之前，有必要先了解一下鸿蒙，从你的角度来讲，你认为什么是鸿蒙呢？它出现的意义又是什么？鸿蒙仅仅是一个手机操作系统吗？它的出现能够和Android和IOS三分天下吗？它未来的潜力能否制霸整个手机市场呢？

抱着这样的疑问和对鸿蒙开发的好奇，让我们开始今天对布局组件的掌握吧！

目录

布局组件

Column与Row组件(排列布局)

Stack组件(层叠布局)

Flex组件(弹性布局)

RelativeContainer组件(相对布局)

List组件(创建列表)

Grid组件(创建网格)

布局组件

在 ArkTS 中，布局组件是一种用于管理和布置其他组件的特殊组件。它们用于定义用户界面的结构和排列方式。以下是ArkTS的通用属性：

名称参数说明描述
widthLength设置组件自身的宽度
heightLength设置组件自身的高度
sizeLength设置高宽尺寸
paddingPadding | Length设置内边距属性
marginMargin | Length设置外边距属性
constraintSizeLength设置约束尺寸，组件布局时进行尺寸范围限制

Column与Row组件(排列布局)

Column与Row是鸿蒙开发中最最常用的布局组件，它们分别用于垂直和水平方向上的排列和布局子组件，下面是该两个组件的使用区别：

Column(列)：

Column 组件将子组件在垂直方向上依次排列。子组件按照从上到下的顺序布局，每个子组件占据一行。Column 组件会根据子组件的大小自动调整自身的高度以适应内容。

Row(行)：

Row 组件将子组件在水平方向上依次排列。子组件按照从左到右的顺序布局，每个子组件占据一列。Row 组件会根据子组件的大小自动调整自身的宽度以适应内容。

因此，Column 和 Row 的主要区别在于排列方向和布局方式。如果你想要在垂直方向上依次排列子组件，可以使用 Column 组件；如果你想要在水平方向上依次排列子组件，可以使用 Row 组件。以下是使用Column和Row的基本用法：

@Entry
@Component
struct TEST {build() {Column({ space: 10 }){Row({ space: 10 }){Row(){}.width('33%').height(160).backgroundColor('red').layoutWeight(1)Row(){}.width('33%').height(160).backgroundColor('green').layoutWeight(1)Row(){}.width(100).height(160).backgroundColor('blue')}.width('100%').height(160)Column({ space: 10 }){Row().width('100%').backgroundColor(Color.Gray).layoutWeight(1)Row().width('100%').backgroundColor(Color.Red).layoutWeight(2)}.width('100%').height(160)}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

呈现的结果如下：

Stack组件(层叠布局)

层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素（子组件）依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。

层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。如下：

Stack组件通过alignContent参数实现位置的相对移动。如下表所示，支持九种对齐方式：

名称

描述

TopStart

顶部起始端。

Top

顶部横向居中。

TopEnd

顶部尾端。

Start

起始端纵向居中。

Center

横向和纵向居中。

End

尾端纵向居中。

BottomStart

底部起始端。

Bottom

底部横向居中。

BottomEnd

底部尾端。

以下是借助Stack组件进行的案例，代码如下：

@Entry
@Component
struct TEST {@State list: number[] = [1, 2, 3]build() {Column(){Stack({ alignContent: Alignment.BottomEnd }){Stack({ alignContent: Alignment.TopStart}){Column(){List({ space: 10 }){ForEach(this.list,(item)=>{ListItem(){Text(`${item}`).fontSize(30).width('100%').backgroundColor('#eee').height(50).textAlign(TextAlign.Center)}})}.margin({ bottom: 70 })}.margin({ top: 60 }).height('100%')Row(){Text('HarmonyOS').fontSize(30).fontColor(Color.White).width('100%').textAlign(TextAlign.Center)}.width('100%').backgroundColor(Color.Orange).height(50)}Button(){Text('+').fontSize(40).fontColor(Color.White)}.width(80).height(80).onClick( ()=> {this.list.push(this.list[this.list.length - 1] + 1)}).margin({ right: 10, bottom: 10 })}}.width('100%').height('100%')}
}

最终呈现的结果如下：

Flex组件(弹性布局)

弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。弹性布局在开发场景中用例特别多，比如页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等等。

主轴：Flex组件布局方向的轴线，子元素默认沿着主轴排列。主轴开始的位置称为主轴起始点，结束位置称为主轴结束点。
交叉轴：垂直于主轴方向的轴线。交叉轴开始的位置称为交叉轴起始点，结束位置称为交叉轴结束点。

以下是flex常见的使用参数：

参数名参数类型必填默认值参数描述
directionFlexDirection否FlexDirection.Row主轴方向
wrapFlexWrap否FlexWrap.NoWrap确认容器是单行/列还是多行
justifyContentFlexAlign否FlexAlign.Start子组件在flex容器主轴上对齐格式
alignItemsItemAlign否ItemAlign.Start子组件在flex容器交叉轴上对齐格式
alignContentFlexAlign否FlexAlign.Start多行内容的对齐格式。wrap多行下生效

以下是通过 FlexDirection 来更改方向的操作：

@Entry
@Component
struct TEST {build() {Column({ space: 20 }){// 主轴为水平方向，子组件从起始端沿着水平方向开始排布。Flex({ direction: FlexDirection.Row }) {Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)Text('2').width('33%').height(50).backgroundColor(0xD2B48C)Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)}.height(70).width('90%').padding(10).backgroundColor(0xAFEEEE)// 主轴为水平方向，子组件从终点端沿着FlexDirection. Row相反的方向开始排布。Flex({ direction: FlexDirection.RowReverse }) {Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)Text('2').width('33%').height(50).backgroundColor(0xD2B48C)Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)}.height(70).width('90%').padding(10).backgroundColor(0xAFEEEE)// 主轴为垂直方向，子组件从起始端沿着垂直方向开始排布。Flex({ direction: FlexDirection.Column }) {Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)Text('2').width('100%').height(50).backgroundColor(0xD2B48C)Text('3').width('100%').height(50).backgroundColor(0xF5DEB3)}.height(70).width('90%').padding(10).backgroundColor(0xAFEEEE)// 主轴为垂直方向，子组件从终点端沿着FlexDirection. Column相反的方向开始排布。Flex({ direction: FlexDirection.ColumnReverse }) {Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)Text('2').width('100%').height(50).backgroundColor(0xD2B48C)Text('3').width('100%').height(50).backgroundColor(0xF5DEB3)}.height(70).width('90%').padding(10).backgroundColor(0xAFEEEE)}.width('100%').height('100%')}
}

最终呈现的结果如下：

当然弹性布局方面还有许多其他的操作，这里就不再赘述了，详情请参考 文档  

RelativeContainer组件(相对布局)

相对布局组件用于复杂场景中元素对齐的布局，支持容器内的子元素设置相对位置关系，子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局，下图表示相对布局的概念图，虚线表示位置的依赖关系：

通过以下的案例代码来学习相对布局的形成：

@Entry
@Component
struct TEST {build() {Column(){// RelativeContainer必须包含子元素// RelativeContainer固定的id就是 __container__RelativeContainer(){// RelativeContainer里面的子元素必须配置id属性Text("1").width(100).height(100).fontSize(30).alignRules({ // 当前容器的属性right: {anchor: "__container__", // 锚点，传入容器idalign: HorizontalAlign.End // 相对于锚点位置的布局}}).backgroundColor(Color.Blue).id('test1')Text("2").width(100).height(100).fontSize(30).alignRules({ // 当前容器的属性middle: {anchor: "__container__", // 锚点，传入容器idalign: HorizontalAlign.Center // 相对于锚点位置的布局}}).backgroundColor(Color.Orange).id('test2')Text("3").width(100).height(100).fontSize(30).alignRules({ // 当前容器的属性bottom: {anchor: "__container__", // 锚点，传入容器idalign: VerticalAlign.Bottom // 相对于锚点位置的布局},right: {anchor: "__container__", // 锚点，传入容器idalign: HorizontalAlign.End // 相对于锚点位置的布局}}).backgroundColor(Color.Red).id('test3')// 相对于 2 进行布局，使其在2的正上方Text("4").width(100).height(100).fontSize(30).alignRules({ // 当前容器的属性bottom: {anchor: "test2", // 锚点，传入容器idalign: VerticalAlign.Top // 相对于锚点位置的布局},left: {anchor: "test2", // 锚点，传入容器idalign: HorizontalAlign.Start // 相对于锚点位置的布局}}).backgroundColor(Color.Green).id('test4').offset({ // 微调位置y: -20,x: 0})}.width(300).height(300).border({width: 1,color: Color.Red})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

最终呈现的结果如下：

List组件(创建列表)

列表是一种复杂的容器，当列表项达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集，例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求（如通讯录、音乐列表、购物清单等）。其主要使用的参数如下：

参数名

参数类型

必填

参数描述

space

number | string

否

子组件主轴方向的间隔。

initialIndex

number

否

设置当前List初次加载时视口起始位置显示的item的索引值。

scroller

Scroller

否

可滚动组件的控制器。用于与可滚动组件进行绑定。

以下是使用List组件的案例：

@Entry
@Component
struct TEST {list: number[] = [1, 2, 3, 4, 5, 6, 7]build() {Column(){List({ space: 20 }){ForEach(this.list,(item) => {ListItem(){Text(`${item}`).textAlign(TextAlign.Center).width('100%').height(100).fontSize(30)}.backgroundColor(0xffffff)})}.listDirection(Axis.Vertical) // 配置list显示方向.scrollBar(BarState.Auto) // 显示滚动条.padding(10).divider({strokeWidth: 5,color: Color.Red,startMargin: 20,endMargin: 20})}.backgroundColor('#cccccc').width('100%').height('100%')}
}

最终呈现的效果如下：

Grid组件(创建网格)

网格布局是由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。

名称描述名称描述
columnsTemplate设置当前网格布局列的数量rowsTemplate设置当前网格布局行的数量
columnsGap设置列与列的间距。rowsGap设置行与行的间距。
scrollBar设置滚动条状态。scrollBarColor设置滚动条的颜色。
scrollBarWidth设置滚动条的宽度。cachedCount设置预加载的GridItem的数量，只在LazyForEach中生效。
editMode设置Grid是否进入编辑模式layoutDirection设置布局的主轴方向。
minCount示可显示的最小行/列数。cellLength表示一行的高度/一列的宽度
multiSelectable是否开启鼠标框选。supportAnimation是否支持动画。

基础按钮如下：

@Entry
@Component
struct TEST {build() {Column(){Grid(){GridItem(){Text("1").fontSize(16).fontColor(Color.White).backgroundColor('red').width('100%').height('100%').textAlign(TextAlign.Center)}.rowStart(1).rowEnd(2)GridItem(){Text("2").fontSize(16).fontColor(Color.White).backgroundColor('red').width('100%').height('100%').textAlign(TextAlign.Center)}.columnStart(2).columnEnd(3)GridItem(){Text("3").fontSize(16).fontColor(Color.White).backgroundColor('red').width('100%').height('100%').textAlign(TextAlign.Center)}GridItem(){Text("4").fontSize(16).fontColor(Color.White).backgroundColor('red').width('100%').height('100%').textAlign(TextAlign.Center)}GridItem(){Text("5").fontSize(16).fontColor(Color.White).backgroundColor('red').width('100%').height('100%').textAlign(TextAlign.Center)}GridItem(){Text("6").fontSize(16).fontColor(Color.White).backgroundColor('red').width('100%').height('100%').textAlign(TextAlign.Center)}.columnStart(2).columnEnd(3)}.columnsTemplate('1fr 1fr 1fr') // 显示3列.columnsGap(10).rowsTemplate('1fr 2fr 1fr') // 显示3行 ，第二行宽度占总宽度二分之一.rowsGap(10).height(300)}}
}

呈现的效果如下所示：

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

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

相关文章

【RT-DETR有效改进】华为 | GhostnetV2移动端的特征提取网络效果完爆MobileNet系列

【RT-DETR有效改进】华为 | GhostnetV2移动端的特征提取网络效果完爆MobileNet系列

前言 大家好，这里是RT-DETR有效涨点专栏。 本专栏的内容为根据ultralytics版本的RT-DETR进行改进，内容持续更新，每周更新文章数量3-10篇。 专栏以ResNet18、ResNet50为基础修改版本，同时修改内容也支持ResNet32、ResNet101和PP…
阅读更多...
自动控制原理——数学模型建立

自动控制原理——数学模型建立

目标 1.数学模型概念 描述系统输入、输出变量以及内部个变量之间的关系的数学表达式 2.建模方法 解析法（机理解析法）: 根据系统工作所依据的物理定律写运动方程 实验法（系统辨识法）： 给系统施加某种测试信号&am…
阅读更多...
万户 ezOFFICE wf_process_attrelate_aiframe.jsp SQL注入漏洞复现

万户 ezOFFICE wf_process_attrelate_aiframe.jsp SQL注入漏洞复现

0x01 产品简介 万户OA ezoffice是万户网络协同办公产品多年来一直将主要精力致力于中高端市场的一款OA协同办公软件产品，统一的基础管理平台，实现用户数据统一管理、权限统一分配、身份统一认证。统一规划门户网站群和协同办公平台，将外网信息维护、客户服务、互动交流和日…
阅读更多...
Intel开发环境Quartus、Eclipse与WSL的安装

Intel开发环境Quartus、Eclipse与WSL的安装

PC ：win10 64bit 安装顺序：先安装Quartus 21.4，接着Eclipse或者WSL（Windows Subsystem for Linux），Eclipse与WSL的安装不分先后。 为什么要安装Eclipse？ 因为Eclipse可以开发基于Nios II的C/…
阅读更多...
SwiftUI 框架有哪些主要优势

SwiftUI 框架有哪些主要优势

SwiftUI是苹果公司在2019年推出的一种用于构建用户界面的框架，它使用Swift语言编写，并且与iOS、iPadOS、macOS、watchOS和tvOS等平台兼容。下面简单的看下有哪些主要的优势。 声明式的界面描述 使用声明式编程风格，通过简洁的代码描述用户界…
阅读更多...
力扣645.错误的集合

力扣645.错误的集合

一点一点地刷，慢慢攻克力扣！！ 王子公主请看题 集合 s 包含从 1 到 n 的整数。不幸的是，因为数据错误，导致集合里面某一个数字复制了成了集合里面的另外一个数字的值，导致集合 丢失了一个数字 并且 有一个数…
阅读更多...
C++：基于C的语法优化

C++：基于C的语法优化

C：基于C的语法优化 命名空间命名空间域域作用限定符展开命名空间域 输入输出缺省参数全缺省参数半缺省参数 函数重载参数类型不同参数个数不同参数类型的顺序不同 引用基本语法按引用传递返回引用引用与指针的区别 内联函数autoauto与指针和引用结合 范围for循环nul…
阅读更多...
红队打靶练习:W34KN3SS: 1

红队打靶练习:W34KN3SS: 1

目录 信息收集 1、arp 2、nmap 3、nikto 4、gobuster 5、dirsearch WEB web信息收集 目录探测 漏洞利用 openssl密钥碰撞 SSH登录 提权 get user.txt get passwd 信息收集 1、arp ┌──(root㉿ru)-[~/kali] └─# arp-scan -l Interface: eth0, type: EN10MB…
阅读更多...
羊驼系列大模型LLaMa、Alpaca、Vicuna

羊驼系列大模型LLaMa、Alpaca、Vicuna

羊驼系列大模型：大模型的安卓系统 GPT系列：类比ios系统，不开源 LLaMa让大模型平民化 LLaMa优势 用到的数据：大部分英语、西班牙语，少中文 模型下载地址 https://huggingface.co/meta-llama Alpaca模型 Alpaca是斯…
阅读更多...
java枚举详细解释

java枚举详细解释

枚举的基本认识 我们一般直接定义一个单独的枚举类 public enum 枚举类名{枚举项1,枚举项2,枚举项3 } 可以通过 枚举类名.枚举项 来访问该枚举项的 - 可以理解为 枚举项就是我们自己定义的一个数据类型,是独一无二的 接下来我们直接用一个例子来完全理解 加深理解 这里…
阅读更多...
VScode代码查找、替换

VScode代码查找、替换

快捷方法按CtrlF Mac为CommandF 右上角出现的框就是查找框，可以输入想找的内容 点击左边的小尖儿，输入替换的内容后 按回车是替换一个，按Ctrl回车（Command回车）是全替换，点击右边那两个图案也可以&#x…
阅读更多...
DHCP配置（路由器，交换机）

DHCP配置（路由器，交换机）

DHCP接口地址池配置 拓扑 PC配置DHCP点击应用。 路由器配置命令 <Huawei>sy Enter system view, return user view with CtrlZ. [Huawei]int g0/0/1[Huawei-GigabitEthernet0/0/1]ip address 10.1.1.1 24[Huawei-GigabitEthernet0/0/1]q[Huawei]dhcp enable Info: T…
阅读更多...
DBA技术栈MongoDB: 索引和查询优化

DBA技术栈MongoDB: 索引和查询优化

2.1 批量插入数据 单条数据插入db.collection.insertOne()多条数据插入db.collection.insertMany() db.inventory.insertMany( [{ item: "journal", qty: 25, size: { h: 14, w: 21, uom: "cm" }, status: "A" },{ item: "notebook"…
阅读更多...
web蓝桥杯真题--12、由文本溢出引发的“不友好体验”

web蓝桥杯真题--12、由文本溢出引发的“不友好体验”

背景介绍 通常情况下&#xff0c;为保证布局的稳定性&#xff0c;以及遵循在有限的空间展示更多内容的原则&#xff0c;页面的某块区域不会随内容的增多而无限增高或增宽&#xff0c;一般会有一个约束。 例如&#xff1a;整体元素过多可以使用滚动条&#xff1b;文字内容过多…
阅读更多...
供应链安全项目in-toto开源框架详解

供应链安全项目in-toto开源框架详解

引言&#xff1a;in-toto 是一个开源框架&#xff0c;能够以密码学的方式验证构件生产路径上的每个组件和步骤。它可与主流的构建工具、部署工具进行集成。in-toto已经被CNCF技术监督委员会 (Technical Oversight Committee&#xff0c;TOC)接纳为CNCF孵化项目。 1. 背景 由于…
阅读更多...
【富文本编辑器实战】03 Vuex 的配置编写

【富文本编辑器实战】03 Vuex 的配置编写

Vuex 的配置编写 目录 Vuex 的配置编写Vuex 是什么&#xff1f;什么是“状态管理模式”&#xff1f;什么情况下我应该使用 Vuex&#xff1f;安装 Vuex开始使用 VuexAction 文件Mutations-types 文件Mutation 文件Index Vuex 是什么&#xff1f; 这里我们来看看官方网站是如何介…
阅读更多...
《游戏-02_2D-开发》

《游戏-02_2D-开发》

基于《游戏-01_2D-开发》&#xff0c; 继续制作游戏&#xff1a; 首先给人物添加一个2D重力效果 在编辑的项目设置中&#xff0c; 可以看出unity默认给的2D重力数值是-9.81&#xff0c;模拟现实社会中的重力效果 下方可以设置帧率 而Gravity Scale代表 这个数值会 * 重力 还…
阅读更多...
Addressables(2) ResourceLocation和AssetReference

Addressables(2) ResourceLocation和AssetReference

IResourceLocation var op Addressables.LoadResourceLocationsAsync(key); var result op.WaitForCompletion(); 把加载的Key塞进去&#xff0c;不难看出&#xff0c;IResourceLocation可以用来获得资源的详细信息 很适合用于更新分析&#xff0c;或者一些检查工具 AssetR…
阅读更多...
Eureka使用详解

Eureka使用详解

介绍主要特点主要功能与常用服务注册中心的比较Eureka与Zookeeper的区别和联系Eureka与Nacos的区别与联系Eureka与Consul的区别与联系 安装部署Eureka与CAP理论Eureka实现实时上下线Eureka常用注解Eureka架构模式 介绍 Eureka是一个基于REST的服务&#xff0c;主要用于AWS云中…
阅读更多...
一文读懂「RAG，Retrieval-Augmented Generation」检索增强生成

一文读懂「RAG，Retrieval-Augmented Generation」检索增强生成

Retrieval-Augmented Generation&#xff08;RAG&#xff09;作为机器学习和自然语言处理领域的一大创新&#xff0c;不仅代表了技术的进步&#xff0c;更在实际应用中展示了其惊人的潜力。 RAG结合了检索&#xff08;Retrieval&#xff09;和生成&#xff08;Generation&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023