【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__", // 锚点，传入容器id
              align: HorizontalAlign.End // 相对于锚点位置的布局
             }
          })
          .backgroundColor(Color.Blue)
          .id('test1')

        Text("2")
          .width(100)
          .height(100)
          .fontSize(30)
          .alignRules({ // 当前容器的属性
            middle: {
              anchor: "__container__", // 锚点，传入容器id
              align: HorizontalAlign.Center // 相对于锚点位置的布局
            }
          })
          .backgroundColor(Color.Orange)
          .id('test2')

        Text("3")
          .width(100)
          .height(100)
          .fontSize(30)
          .alignRules({ // 当前容器的属性
            bottom: {
              anchor: "__container__", // 锚点，传入容器id
              align: VerticalAlign.Bottom // 相对于锚点位置的布局
            },
            right: {
              anchor: "__container__", // 锚点，传入容器id
              align: HorizontalAlign.End // 相对于锚点位置的布局
            }
          })
          .backgroundColor(Color.Red)
          .id('test3')

        // 相对于 2 进行布局，使其在2的正上方
        Text("4")
          .width(100)
          .height(100)
          .fontSize(30)
          .alignRules({ // 当前容器的属性
            bottom: {
              anchor: "test2", // 锚点，传入容器id
              align: VerticalAlign.Top // 相对于锚点位置的布局
            },
            left: {
              anchor: "test2", // 锚点，传入容器id
              align: 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)
    }
  }
}

呈现的效果如下所示：

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

DP活动：以太网HMI线下培训RA6M3 HMI Board[MQTT Squareline LVGL]

DP活动：以太网HMI线下培训RA6M3 HMI Board[MQTT Squareline LVGL]

以太网HMI线下培训-环境准备 这是官方社群的文档：【腾讯文档】以太网线下培训（HMI-Board）所有教程都在这~ https://docs.qq.com/doc/DY0FIWFVuTEpORlNn R A 6 M 3 H M I − B o a r d \textcolor{#4183c4}{RA6M3 HMI-Board} RA6M3HMI−Board…
阅读更多...
鼠标移动高亮边框

鼠标移动高亮边框

这个其实我也没有很明白，写的比较粗糙。 说一下步骤： 1.在界面上放上几排的div，要求做成卡片网格布局。 2.每一个卡片年内放置一个div，写文字或者其他都可以，要求不设置高度使用position: absolute; inset: 1px;将元素…
阅读更多...
lattice Diamond Programmer程序下载

lattice Diamond Programmer程序下载

Lattice Diamond Programmer Diamond Programmer程序下载1 Diamond Programmer启动2 Diamond Programmer程序烧写3 Cannot Identify Device错误解决 Diamond Programmer程序下载 Diamond Programmer适用于Lattice公司的FPGA器件与CPLD器件的程序下载，其下载步骤如下…
阅读更多...
【flutter】完全自定义样式模态对话框

【flutter】完全自定义样式模态对话框

示例完成结果展示： 示例组件代码： context：上下文 title：提示标题，null时不显示 content：提示内容，null时不显示 cancelText：取消按钮文字，null时不显示取消按钮 confirm…
阅读更多...
每日一练【最大连续1的个数】

每日一练【最大连续1的个数】

一、题目描述 给定一个二进制数组 nums 和一个整数 k，如果可以翻转最多 k 个 0 ，则返回 数组中连续 1 的最大个数 。 二、题目解析 本题同样是利用滑动窗口的解法。 首先进入窗口，如果是1，就直接让right，但是如果是…
阅读更多...
Android双击图片放大移动图中双击点到ImageView区域中心，Kotlin

Android双击图片放大移动图中双击点到ImageView区域中心，Kotlin

Android双击图片放大移动图中双击点到ImageView区域中心，Kotlin 初始化状态，ImageView里面只是显示一张fitcenter被缩放的原图，当手指在图片上双击后（记录双击点位置：mCurX，mCurY）画一个红色小圆…
阅读更多...
html5实现好看的年会邀请函源码模板

html5实现好看的年会邀请函源码模板

文章目录 1.设计来源1.1 邀请函主界面1.2 诚挚邀请界面1.3 关于我们界面1.4 董事长致词界面1.5 公司合作方界面1.6 活动流程界面1.7 加盟支持界面1.8 加盟流程界面1.9 加盟申请界面1.10 活动信息界面 2.效果和源码2.1 动态效果2.2 源码目录结构 源码下载 作者：xcLei…
阅读更多...
SpringMVC 文件上传和下载

SpringMVC 文件上传和下载

文章目录 1、文件下载2、文件上传3. 应用 Spring MVC 提供了简单而强大的文件上传和下载功能。 下面是对两者的简要介绍： 文件上传： 在Spring MVC中进行文件上传的步骤如下： 在表单中设置 enctype“multipart/form-data”，这样…
阅读更多...
logstack 日志技术栈-04-opensource 开源工具 Syslog-ng+Highlight.io

logstack 日志技术栈-04-opensource 开源工具 Syslog-ng+Highlight.io

5. Syslog-ng Syslog-ng 是一个开源的日志管理解决方案，主要用于收集和处理日志数据。它可以从多种源收集日志，包括系统日志、网络设备日志和第三方应用日志。 然后将日志解析、分类、重写和关联到统一格式中，然后将其存储或安全地传输到不同…
阅读更多...
Element-UI 多个el-upload组件自定义上传，不用上传url，并且携带自定义传参（文件序号）

Element-UI 多个el-upload组件自定义上传，不用上传url，并且携带自定义传参（文件序号）

1. 需求： 有多个（不确定具体数量）的upload组件，每个都需要单独上传获取文件（JS File类型），不需要action上传到指定url，自定义上传动作和http操作。而且因为不确定组件数量&#xff0…
阅读更多...
vscode配置web开发环境(WampServer)

vscode配置web开发环境(WampServer)

这里直接去下载了集成的服务器组件wampserver，集成了php，MySQL，Apache 可能会出现安装问题，这里说只有图上这些VC包都安装了才能继续安装，进入报错里提供的链接 在页面内搜索相关信息 github上不去可以去镜像站 下载…
阅读更多...
ChatGPT 和文心一言，各有优劣

ChatGPT 和文心一言，各有优劣

目录 前言 具体比较 智能回复能力 语言准确性 知识库丰富度 生成内容风格 总结 前言 近年来，随着人工智能技术的不断进步，AI助手已成为人机交互的重要载体。其中代表性的两个AI助手系统分别是OpenAI推出的ChatGPT,以及腾讯研发的文心一言。这两个…
阅读更多...
实战纪实 | 某配送平台zabbix 未授权访问 + 弱口令

实战纪实 | 某配送平台zabbix 未授权访问 + 弱口令

本文由掌控安全学院 - 17828147368 投稿 找到一个某src的子站，通过信息收集插件wappalyzer，发现ZABBIX-监控系统： 使用谷歌搜索历史漏洞：zabbix漏洞 通过目录扫描扫描到后台，谷歌搜索一下有没有默认弱口令 成功进去了…
阅读更多...
Ubuntu安装mysql8详细步骤

Ubuntu安装mysql8详细步骤

1、拉取镜像 docker pull mysql:8.0.20 2、启动镜像 docker run -p 3307:3306 --name mysql8 -e MYSQL_ROOT_PASSWORD123456 -d mysql:8.0.20 检查是否启动成功 docker ps 3、配置挂载 创建挂载目录（请检查保证创建成功） mkdir -p /docker/mysql8.0.20/…
阅读更多...
3d渲染软件有哪些？3d云渲染推荐

3d渲染软件有哪些？3d云渲染推荐

目前市面上的3D渲染软件非常多，不同的建模软件都有自己的渲染方式，根据所处行业的不同和项目需要，设计师可以选择不同的软件帮助展示最终效果。 主流的渲染软件有：VRay和Corona：一般用于室内效果图渲染，与3…
阅读更多...
009 Linux_文件系统 | 软硬链接

009 Linux_文件系统 | 软硬链接

前言 本文将会向你介绍文件系统与软硬链接 文章重点 本文将会先向你介绍文件是如何在磁盘上进行管理的，关于文件的管理将会从管理属性和管理内容两方面来谈，最后会向你介绍软硬链接的概念 文件在磁盘中的管理 首先，假设一个磁盘200GB&#…
阅读更多...
小样本跨域（cross-domain）系列工作（超级详细）

小样本跨域（cross-domain）系列工作（超级详细）

小样本跨域（cross-domain）系列工作 本文记录近期阅读过的小样本跨域相关论文，每一篇文章都经过了自己的深入思考和总结，按照：解决什么问题、动机、方法、数据集、结论和启发的顺序进行总结，同时会有部分细…
阅读更多...
SaaS多租户篇

SaaS多租户篇

文章目录 1. 多租户是什么2. 技术组件2.1 如何实现多租户的DB封装2.2 如何实现多租户的redis封装2.3 如何实现多租户的Web和Security封装 1. 多租户是什么 2. 技术组件 2.1 如何实现多租户的DB封装 2.2 如何实现多租户的redis封装 2.3 如何实现多租户的Web和Security封装
阅读更多...
消息中间件之Kafka(二)

消息中间件之Kafka(二)

1.Kafka线上常见问题 1.1 为什么要对topic下数据进行分区存储? 1.commit log文件会受到所在机器的文件系统大小的限制，分区之后可以将不同的分区放在不同的机器上， 相当于对数据做了分布式存储，理论上一个topic可以处理任意数量的数据2.提…
阅读更多...
初识计算机图形学

初识计算机图形学

初识计算机图形学 笔记来源：【老奇】阴差阳错 撼动世界的游戏引擎 1.MVP Transformation 详见本人博客： 1.Transformation 2.梳理从MVP变换到光栅化的过程 MVP变换将空间中3D物体投影到2D屏幕 2.Rasterization 详见本人博客： 1.Rasteri…
阅读更多...
最新文章

Copyright @ 2022~2023