【HarmonyOS】HarmonyOS NEXT学习日记:四、布局与容器组件

【HarmonyOS】HarmonyOS NEXT学习日记:四、布局与容器组件

学习了基础组件之后,想要利用基础组件组装成一个页面,自然就要开始学习布局相关的知识。我理解的ArkUI的布局分为两个部分
一、组件自身的通用属性,诸如weight、height、margin、padding等
二、容器组件,ArkUI提供了很多容器组件,可以用来实现flex布局、网格布局等。
熟练掌握了以上两个方面,我们基本上就能写出一个基础页面了。
请添加图片描述

通用属性

尺寸属性

width、height、padding、margin

其意义与css一致,用法如下

Text('Radio1').width(200).height(100).padding({top:20,right: 40,bottom: 20,left: 40}).margin(20).backgroundColor(Color.Red)

在这里插入图片描述

需要注意的是,传入的值如果不带单位,默认单位为vp。
padding和margin用法一致,可以只传入一个数字,意义为top、bottom、left、right都采用该值、也可以传入上文中结构的对象分别设置四个方向的值。

size

设置长宽也可以使用size属性,用法如下

Text('Radio1').size({width: 200,height: 100,}).padding({top:20,right: 40,bottom: 20,left: 40}).margin(20).backgroundColor(Color.Red)

在这里插入图片描述
效果与单独设置width和height一致。

border

Text('边框').size({width:100,height:100}).border({width: {left: 1, right: 2},color: {left: Color.Red, right: Color.Blue},style: {left: BorderStyle.Dashed,right: BorderStyle.Dotted},radius: 10}) // top、right、bottom、left

代码中的border的参数都支持接收对象分别设置上下左右四个方向、或者接收一个数字设置四个方向的值。效果和css中的同名属性基本一致。
在这里插入图片描述

borderRadius

此外设置圆角也可以使用这个属性

Text('边框').size({width:100,height:100}).backgroundColor(Color.Red).borderRadius(5) // 四个圆角相同.borderRadius({topLeft: 5,topRight: 10,bottomRight: 15,bottomLeft: 20}) // 四个方向圆角,单独设置

在这里插入图片描述

layoutWeight

自适应伸缩,和cssflex布局中使用flex: xxx的表现类似。
设置 layoutWeight 属性的子元素与兄弟元素,会按照权重进行分配主轴的空间
语法:.layoutWeight(权重数字)

Row() {Text('Radio1').size({width: 200,height: 100,}).padding({top:20,right: 40,bottom: 20,left: 40}).margin(20).backgroundColor(Color.Red)Text('123').height(100).layoutWeight(1).backgroundColor(Color.Blue)}

在这里插入图片描述
可以看到设置了layoutWeight(1)的元素占满了剩余的宽度,和flex:1的表现是不是很像。

constraintSize

用来设置长宽的最大最小值,和css的maxWidth、minWidth、maxHeight、minHeight表现雷类似

Text('11').constraintSize({minWidth: 200,minHeight: 200}).backgroundColor(Color.Red)

在这里插入图片描述

Text('11111111111111111111111111111111111111111111111111111111111111111111111111111111').constraintSize({maxWidth: 100,maxHeight: 100}).backgroundColor(Color.Red)

在这里插入图片描述

背景

除了之前常用的backgroundColor,设置背景图片我们还会用到backgroundImage和一些相关的属性。

  • backgroundColor 设置背景色
  • backgroundImage 设置组件的背景图片
  • backgroundImageSize 设置组件背景图片的宽高
  • backgroundImagePosition 设置背景图的位置
Row().width(200).height(50).backgroundImage($r('app.media.test2'), ImageRepeat.NoRepeat).backgroundImagePosition({x: 50,y:0}).backgroundImageSize(ImageSize.Contain).border({ width: 1 })

在这里插入图片描述

ImageRepeat

ImageRepeat可以设置是否平铺,它的值可以为

  • NoRepeat:不平铺,默认值
  • X:水平平铺
  • Y:垂直平铺
  • XY:水平垂直均平铺
    !!!值得注意的是,背景定位默认单位是px
    但是我们推荐使用vp,所以这里推荐一个方法vp2px,可以将vp值转为px值
backgroundImagePosition({x: vp2px(50),y:vp2px(0)})
backgroundImageSize

可以接收一个枚举值
枚举 ImageSize:

  • Contain:等比例缩放背景图,当宽或高与组件尺寸相同停止缩放
  • Cover:等比例缩放背景图至图片完全覆盖组件范围
  • Auto:默认,原图尺寸

也可以接收一个对象{x:,y:}

表现与css同名元素基本一致

 Row().width(200).height(50).backgroundImage($r('app.media.test2'), ImageRepeat.NoRepeat).backgroundImageSize({ width: '100%', height: '100%' })// .backgroundImageSize(ImageSize.Cover)// .backgroundImageSize(ImageSize.Contain).border({ width: 1 })

在这里插入图片描述

Row().width(200).height(50).backgroundImage($r('app.media.test2'), ImageRepeat.NoRepeat)// .backgroundImageSize({ width: '100%', height: '100%' }).backgroundImageSize(ImageSize.Cover)// .backgroundImageSize(ImageSize.Contain).border({ width: 1 })

在这里插入图片描述

Row().width(200).height(50).backgroundImage($r('app.media.test2'), ImageRepeat.NoRepeat)// .backgroundImageSize({ width: '100%', height: '100%' })// .backgroundImageSize(ImageSize.Cover).backgroundImageSize(ImageSize.Contain).border({ width: 1 })

在这里插入图片描述

position

设置绝对定位,确定子组件相对父组件的位置。

用法: position(value: Position | Edges | LocalizedEdges)

Text('文字内容').position({x: 50,y: 50}).backgroundColor(Color.Green)

在这里插入图片描述

zIndex属性
Column(){Text('文字内容').position({x: 50,y: 50}).backgroundColor(Color.Green).zIndex(999)Text('文字内容').position({x: 60,y: 60}).backgroundColor(Color.Red).zIndex(1)}

在这里插入图片描述

线性布局(Column和Row)

使用过element的同学都清楚,线性布局通常使用el-column、el-row组件实现,ArkUI也提供了功能类似的容器组件Column 和 Row。

Column

沿垂直方向布局的容器
用法Column(value?: {space?: string | number}),接收一个参数设置子组件的间距

Column({space: 10}){Text('111').backgroundColor(Color.Red)Text('222').backgroundColor(Color.Blue)}

在这里插入图片描述

alignItems属性

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

用法 alignItems(value: HorizontalAlign)
HorizontalAlign枚举值如下

  • Start 按照语言方向起始端对齐。
  • Center 居中对齐,默认对齐方式。
  • End 按照语言方向末端对齐。
Column(){Column({space: 10}){Text('111').backgroundColor(Color.Red)Text('222').backgroundColor(Color.Blue)Text('333').backgroundColor(Color.Green)}.width('100%').alignItems(HorizontalAlign.Start)Column({space: 10}){Text('111').backgroundColor(Color.Red)Text('222').backgroundColor(Color.Blue)Text('333').backgroundColor(Color.Green)}.width('100%').alignItems(HorizontalAlign.Center)Column({space: 10}){Text('111').backgroundColor(Color.Red)Text('222').backgroundColor(Color.Blue)Text('333').backgroundColor(Color.Green)}.width('100%').alignItems(HorizontalAlign.End)}

在这里插入图片描述

justifyContent属性

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

用法:justifyContent(value: FlexAlign)

FlexAlign枚举值说明:

  • Start 元素在主轴方向首端对齐,第一个元素与行首对齐,同时后续的元素与前一个对齐。
  • Center 元素在主轴方向中心对齐,第一个元素与行首的距离与最后一个元素与行尾距离相同。
  • End 元素在主轴方向尾部对齐,最后一个元素与行尾对齐,其他元素与后一个对齐。
  • SpaceBetween Flex主轴方向均匀分配弹性元素,相邻元素之间距离相同。第一个元素与行首对齐,最后一个元素与行尾对齐。
  • SpaceAround Flex主轴方向均匀分配弹性元素,相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
  • SpaceEvenly Flex主轴方向均匀分配弹性元素,相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
 Column(){Column({space: 10}){Text('111').backgroundColor(Color.Red)Text('222').backgroundColor(Color.Blue)Text('333').backgroundColor(Color.Green)}.width('100%').height(200).backgroundColor('#eeeeee').justifyContent(FlexAlign.Start)Column({space: 10}){Text('111').backgroundColor(Color.Red)Text('222').backgroundColor(Color.Blue)Text('333').backgroundColor(Color.Green)}.width('100%').height(200).backgroundColor('#aaaaaa').justifyContent(FlexAlign.Center)Column({space: 10}){Text('111').backgroundColor(Color.Red)Text('222').backgroundColor(Color.Blue)Text('333').backgroundColor(Color.Green)}.width('100%').height(200).backgroundColor('#000000').justifyContent(FlexAlign.End)}

在这里插入图片描述

Column(){Column({space: 10}){Text('111').backgroundColor(Color.Red)Text('222').backgroundColor(Color.Blue)Text('333').backgroundColor(Color.Green)}.width('100%').height(200).backgroundColor('#eeeeee').justifyContent(FlexAlign.SpaceBetween)Column({space: 10}){Text('111').backgroundColor(Color.Red)Text('222').backgroundColor(Color.Blue)Text('333').backgroundColor(Color.Green)}.width('100%').height(200).backgroundColor('#aaaaaa').justifyContent(FlexAlign.SpaceAround)Column({space: 10}){Text('111').backgroundColor(Color.Red)Text('222').backgroundColor(Color.Blue)Text('333').backgroundColor(Color.Green)}.width('100%').height(200).backgroundColor('#000000').justifyContent(FlexAlign.SpaceEvenly)}

在这里插入图片描述
这里的值与css的flex布局同名参数值与效果基本一致。

Row

沿水平方向布局容器。

用法: Row(value?:{space?: number | string }),接收一个参数设置子组件的间距

Column() {Row({ space: 10 }) {Text('111').backgroundColor(Color.Red)Text('222').backgroundColor(Color.Blue)Text('333').backgroundColor(Color.Green)}.width('100%').height(100).backgroundColor('#eeeeee')}

在这里插入图片描述

alignItems属性

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

用法:alignItems(value: VerticalAlign)

VerticalAlign枚举值如下:

  • Top 顶部对齐。
  • Center 居中对齐,默认对齐方式。
  • Bottom 底部对齐。
Column() {Row({ space: 10 }) {Text('111').backgroundColor(Color.Red)Text('222').backgroundColor(Color.Blue)Text('333').backgroundColor(Color.Green)}.width('100%').height(100).backgroundColor('#eeeeee').alignItems(VerticalAlign.Top)Row({ space: 10 }) {Text('111').backgroundColor(Color.Red)Text('222').backgroundColor(Color.Blue)Text('333').backgroundColor(Color.Green)}.width('100%').height(100).backgroundColor('#aaaaaa').alignItems(VerticalAlign.Center)Row({ space: 10 }) {Text('111').backgroundColor(Color.Red)Text('222').backgroundColor(Color.Blue)Text('333').backgroundColor(Color.Green)}.width('100%').height(100).backgroundColor('#000000').alignItems(VerticalAlign.Bottom)}

在这里插入图片描述

justifyContent属性

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

用法: justifyContent(value: FlexAlign)

FlexAlign枚举值说明:

  • Start 元素在主轴方向首端对齐,第一个元素与行首对齐,同时后续的元素与前一个对齐。
  • Center 元素在主轴方向中心对齐,第一个元素与行首的距离与最后一个元素与行尾距离相同。
  • End 元素在主轴方向尾部对齐,最后一个元素与行尾对齐,其他元素与后一个对齐。
  • SpaceBetween Flex主轴方向均匀分配弹性元素,相邻元素之间距离相同。第一个元素与行首对齐,最后一个元素与行尾对齐。
  • SpaceAround Flex主轴方向均匀分配弹性元素,相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
  • SpaceEvenly Flex主轴方向均匀分配弹性元素,相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
Column() {Row({ space: 10 }) {Text('111').backgroundColor(Color.Red)Text('222').backgroundColor(Color.Blue)Text('333').backgroundColor(Color.Green)}.width('100%').height(100).backgroundColor('#eeeeee').justifyContent(FlexAlign.Start)Row({ space: 10 }) {Text('111').backgroundColor(Color.Red)Text('222').backgroundColor(Color.Blue)Text('333').backgroundColor(Color.Green)}.width('100%').height(100).backgroundColor('#aaaaaa').justifyContent(FlexAlign.Center)Row({ space: 10 }) {Text('111').backgroundColor(Color.Red)Text('222').backgroundColor(Color.Blue)Text('333').backgroundColor(Color.Green)}.width('100%').height(100).backgroundColor('#000000').justifyContent(FlexAlign.End)}

在这里插入图片描述

Column() {Row({ space: 10 }) {Text('111').backgroundColor(Color.Red)Text('222').backgroundColor(Color.Blue)Text('333').backgroundColor(Color.Green)}.width('100%').height(100).backgroundColor('#eeeeee').justifyContent(FlexAlign.SpaceBetween)Row({ space: 10 }) {Text('111').backgroundColor(Color.Red)Text('222').backgroundColor(Color.Blue)Text('333').backgroundColor(Color.Green)}.width('100%').height(100).backgroundColor('#aaaaaa').justifyContent(FlexAlign.SpaceAround)Row({ space: 10 }) {Text('111').backgroundColor(Color.Red)Text('222').backgroundColor(Color.Blue)Text('333').backgroundColor(Color.Green)}.width('100%').height(100).backgroundColor('#000000').justifyContent(FlexAlign.SpaceEvenly)}

在这里插入图片描述

弹性布局(Flex)

以弹性方式布局子组件的容器组件

用法: Flex(value?: FlexOptions)

FlexOptions说明:

参数名参数类型必填默认值描述
directionFlexDirectionFlexDirection.Row子组件在Flex容器上排列的方向,即主轴的方向。
wrapFlexWrapFlexWrap.NoWrapFlex容器是单行/列还是多行/列排列。在多行布局时,通过交叉轴方向,确认新行堆叠方向。
justifyContentFlexAlignFlexAlign.Start所有子组件在Flex容器主轴上的对齐格式。
alignItemsItemAlignItemAlign.Start所有子组件在Flex容器交叉轴上的对齐格式。
alignContentFlexAlignFlexAlign.Start交叉轴中有额外的空间时,多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。
space12+FlexSpaceOptions{main: LengthMetrics.px(0), cross: LengthMetrics.px(0)}所有子组件在Flex容器主轴或交叉轴的space。
空间为负数、百分比或justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。

在这里插入图片描述
flex布局几乎和用css写flex布局参数一致。
比如我们写一个常用的,水平垂直居中

Flex({justifyContent: FlexAlign.Center,alignItems: ItemAlign.Center}){Text('111').backgroundColor(Color.Red)Text('222').backgroundColor(Color.Blue)Text('333').backgroundColor(Color.Green)}.height(300).backgroundColor('#eeeeee')

在这里插入图片描述

层叠布局(Stack)

Stack 堆叠容器,子组件按照顺序依次入栈,后一个子组件覆盖前一个子组件

用法:Stack(value?: { alignContent?: Alignment })

Alignment枚举如下

  • TopStart 顶部起始端。
  • Top 顶部横向居中。
  • TopEnd 顶部尾端。
  • Start 起始端纵向居中。
  • Center 横向和纵向居中。
  • End 尾端纵向居中。
  • BottomStart 底部起始端。
  • Bottom 底部横向居中。
  • BottomEnd 底部尾端。
Stack({ alignContent: Alignment.Bottom }) {Text('First child, show in bottom').width('90%').height('100%').backgroundColor(0xd2cab3).align(Alignment.Top)Text('Second child, show in top').width('70%').height('60%').backgroundColor(0xc1cbac).align(Alignment.Top)}.width('100%').height(150).margin({ top: 5 })

在这里插入图片描述

Stack({ alignContent: Alignment.Center }) {Text('First child, show in bottom').width('90%').height('100%').backgroundColor(0xd2cab3).align(Alignment.Top)Text('Second child, show in top').width('70%').height('60%').backgroundColor(0xc1cbac).align(Alignment.Top)}.width('100%').height(150).margin({ top: 5 })

在这里插入图片描述

Stack({ alignContent: Alignment.TopEnd }) {Text('First child, show in bottom').width('90%').height('100%').backgroundColor(0xd2cab3).align(Alignment.Top)Text('Second child, show in top').width('70%').height('60%').backgroundColor(0xc1cbac).align(Alignment.Top)}.width('100%').height(150).margin({ top: 5 })

在这里插入图片描述

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

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

相关文章

加密软件有什么用?五款电脑文件加密软件推荐

加密软件对于个人和企业来说至关重要,尤其是在2024年这样一个高度数字化的时代,数据安全变得尤为重要。 数据保护:加密软件可以保护敏感信息不被未经授权的人访问。这包括个人数据、财务记录、健康信息、企业机密等。 防泄漏:防…

HarmonyOS工程目录结构

应用级配置文件app.json5 应用唯一标识、版本号、应用图标、应用名称等信息 模块级配置文件module.json5 oh-package.json5 三方库的管理 其他配置 用于编译构建,包括构建配置文件、编译构建任务脚本、混淆规则文件、依赖的共享包信息等。 build-profile.json…

用Wireshark观察IPsec协议的通信过程

目录 一、配置本地安全策略 二、启动Wireshark,设置过滤器,开始捕获 1. 主模式 2. Quick mode 三、心得体会 1. 碰到的问题和解决办法 2. 心得 一、配置本地安全策略 配置好IPsec如下: 由于在windows server2008安装wireshark失败&…

Android IjkPlayer内核编译记(一)so库编译使用

转载请注明出处:https://blog.csdn.net/kong_gu_you_lan/article/details/140528831 本文出自 容华谢后的博客 0.写在前面 最近在搞RTMP协议直播拉流的功能,使用了B站开源的IjkPlayer作为播放器内核,在网络不好的情况下延迟会比较高&#xf…

网络安全防御【防火墙双机热备带宽管理综合实验】

目录 一、实验拓扑图 二、实验要求 三、实验思路: 四、实验步骤: 1、FW3的网络相关配置: 2、FW1的新增配置: 3、交换机LSW6(总公司)的新增配置: 4、双机热备技术配置(双机热…

甲骨文闲置ARM实例防回收的方法

前几日挖了个大坑,今天补一下,谈谈甲骨文闲置实例如何防止回收。 回收原则 2022年11月16日 Oracle添加声明: 从 2022 年 11 月 24 日开始,您闲置的 Always Free 计算实例可能会停止。巴拉巴拉,您还可以随时升级您的帐…

线程基础概念

1、线程概念: 线程是一个轻量级的进程 每一个线程都属于一个进程 进程是操作系统资源分配的最小单元 线程是CPU任务调度的最小单元 线程是一个任务执行的过程,包括创建、调度、消亡 创建: 线程空间位于进程空间内部 进程: …

“生日悖论”简析——公式计算、代码模拟

“生日悖论”共享生日概率,通项公式计算,代码模拟计算。 (笔记模板由python脚本于2024年07月17日 18:16:40创建,本篇笔记适合会基础编程的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网:https://www.python.org/ Free&…

《汇编语言 基于x86处理器》- 读书笔记 - Visual Studio 2019 配置 MASM环境

安装 Visual Studio 2019 配置 MASM环境 下载 Visual Studio Installer安装 Visual Studio 20191. 双击运行2. 自定义安装内容3. 修改 MSVC 工具集版本4. 设置主题(可选)5. 安装代码高亮插件 AsmDude(可选)6. 通义灵码&#xff08…

C++基础语法:STL之容器(4)--序列容器中的list(一)

前言 "打牢基础,万事不愁" .C的基础语法的学习 引入 序列容器的学习.以<C Prime Plus> 6th Edition(以下称"本书")内容理解 本书中容器内容不多只有几页.最好是有数据结构方面的知识积累,如果没有在学的同时补上. 序列容器回顾:序列容器内元素按严格…

多口适配器,给您的生活增添便利

随着科技的快速发展&#xff0c;我们的生活已离不开各种各样的电子设备&#xff0c;智能手机、平板电脑、智能手表、无线耳机……它们共同构建了我们丰富多彩的数字生活。然而&#xff0c;面对众多设备的充电需求&#xff0c;传统的单一充电口已难以满足现代人的使用习惯。在这…

x264 编码器 CAVLC 熵编码源码分析

CAVLC 关于 CAVLC 原理具体可参考:基于上下文自适应可变长熵编码 CAVLC 原理详细分析函数关系图 x264_macroblock_write_cavlc函数 函数作用:用于将宏块(macroblock)的数据通过 CAVLC(Context-based Adaptive Variable Length Coding)编码成比特流。函数内部核心功能:宏…

使用 OpenCV 和 YOLO 模型进行实时目标检测并在视频流中显示检测结果

文章目录 Github官网简介视频帧推理视频设备ID安装依赖 检测示例分类示例姿势估计 Github https://github.com/ultralytics/ultralytics 官网 https://docs.ultralytics.com/zhhttps://docs.ultralytics.com/zh/quickstart/ 简介 Ultralytics 是一个软件公司&#xff0c;专…

【中项】系统集成项目管理工程师-第2章 信息技术发展-2.2新一代信息技术及应用-2.2.1物联网与2.2.2云计算

前言&#xff1a;系统集成项目管理工程师专业&#xff0c;现分享一些教材知识点。觉得文章还不错的喜欢点赞收藏的同时帮忙点点关注。 软考同样是国家人社部和工信部组织的国家级考试&#xff0c;全称为“全国计算机与软件专业技术资格&#xff08;水平&#xff09;考试”&…

Linux下如何安装配置Graylog日志管理工具

Graylog是一个开源的日志管理工具&#xff0c;可以帮助我们收集、存储和分析大量的日志数据。它提供了强大的搜索、过滤和可视化功能&#xff0c;可以帮助我们轻松地监控系统和应用程序的运行情况。 在Linux系统下安装和配置Graylog主要包括以下几个步骤&#xff1a; 准备安装…

【Spark On Hive】—— 基于电商数据分析的项目实战

文章目录 Spark On Hive 详解一、项目配置1. 创建工程2. 配置文件3. 工程目录 二、代码实现2.1 Class SparkFactory2.2 Object SparkFactory Spark On Hive 详解 本文基于Spark重构基于Hive的电商数据分析的项目需求&#xff0c;在重构的同时对Spark On Hive的全流程进行详细的…

【人工智能】机器学习 -- 决策树(乳腺肿瘤数)

目录 一、使用Python开发工具&#xff0c;运行对iris数据进行分类的例子程序dtree.py&#xff0c;熟悉sklearn机器实习开源库。 二、登录https://archive-beta.ics.uci.edu/ 三、使用sklearn机器学习开源库&#xff0c;使用决策树对breast-cancer-wisconsin.data进行分类。 …

Linux 注意事项

Linux 与 Windows 是两个相互独立的操作系统&#xff0c;两者有较大差距&#xff1a; 1.1 Linux 严格区分大小写&#xff08;Windows不严格区分大小写&#xff09;&#xff1b; 1.2 Linux 中所有内容&#xff0c;硬件设备都以文件形式保存在 /dev 目录下&#xff08;万物皆文件…

攻防世界 re新手模式

Reversing-x64Elf-100 64位ida打开 看if语句&#xff0c;根据i的不同&#xff0c;选择不同的数组&#xff0c;后面的2*i/3选择数组中的某一个元素&#xff0c;我们输入的是a1 直接逆向得到就行 二维字符数组写法&#xff1a;前一个是代表有几个字符串&#xff0c;后一个是每…