鸿蒙ArkTS中的布局容器组件(Column、Row、Flex、 Stack、Grid)

  在鸿蒙ArkTS中,布局容器组件有很多,常见的有:
  ⑴ Column:(垂直布局容器):用于将子组件垂直排列。
  ⑵ Row:(水平布局容器):用于将子组件水平排列。
  ⑶ Flex:(弹性布局方式)它提供了更加有效的方法对容器中的子元素进行排列、对齐和分配剩余空间。
  ⑷ Stack:Stack布局是一种可以将多个组件按照一定顺序叠放的布局。
  ⑸ Grid(网格容器):用于创建二维网格布局,适合需要行列对齐的复杂布局。
  ⑹ List(列表容器):用于展示列表数据,可以设置列表项的布局和样式。
  ⑺ Tabs(页签容器):用于创建页签布局,允许用户在不同的页面或视图间切换。
  ⑻ Swiper(滑块视图容器):用于创建滑动视图,常用于图片轮播或广告等场景。
  ⑼ Scroll(可滑动的容器):允许用户滚动查看超出视图范围的内容。
  ⑽ RelativeContainer(相对布局容器):允许子元素相对于容器或指定的兄弟元素进行定位。
  上面的11中布局容器组件各有特点,共同的特性是:
  ⑴ 空间分配属性(如space):用于调整子组件之间的间距。
  ⑵ 对齐属性(如justifyContent和alignItems):用于设置子组件在主轴和交叉轴方向上的对齐方式。
  ⑶ 尺寸属性(如width和height):用于设置容器的宽度和高度。
  ⑷ 边距和填充(如padding和margin):用于设置容器的内边距和外边距。
  ⑸ 其他属性,比如背景色等。

  可以一起学习,方便对比。

  一、Column和Row

  Column和Row都是线性布局方式。

  Column组件:用于创建垂直方向的线性布局,其子组件会按照从上到下的顺序排列。
  Row组件:用于创建水平方向的线性布局,其子组件会按照从左到右的顺序排列。
  常用属性:
  ① width:设置组件的宽度。
  ② height:设置组件的高度。
  ③ alignment:设置子组件在垂直方向上的对齐方式(如顶部对齐、底部对齐、居中对齐等)。
  ④ spacing:设置子组件之间的间距。
  ⑤ backgroundColor:设置组件的背景颜色。
  ⑥ padding:设置组件的内边距。
  ⑦ Row组件的特有属性wrap:设置是否允许子组件换行(当子组件总宽度超过Row宽度时)。

  做一个2行三列的宫格布局,使用Column和Row。

// 获取随机颜色的函数
function getRandomColor() {
    const letters :string= '0123456789ABCDEF';
    let color:string = '#';
    for (let i = 0; i < 6; i++) {
      let Itemp:number=Math.floor(Math.random() * 16)
      color += letters.substr(Itemp,1);
    }
    return color;
}

@Entry
@Component
struct Index {
  str:string='在鸿蒙ArkTS中,Column和Row是两种常用的布局容器组件,它们分别用于垂直和水平布局。Column(垂直布局容器)用于将子组件垂直排列,Row(水平布局容器)用于将子组件水平排列。'
  build() {
    Column() {
        Row(){
          Column(){
            Text(this.str)
              .fontSize(18).fontColor(getRandomColor()).textAlign(TextAlign.Center)
              .maxLines(4).textOverflow({
              overflow:TextOverflow.Ellipsis
            })
          }.layoutWeight(1).height('100%').justifyContent(FlexAlign.Center)
          Column(){
            Text(this.str).fontSize(18).fontColor(getRandomColor()).align(Alignment.Center)
          }.layoutWeight(1).height('100%').justifyContent(FlexAlign.Center)
          Column(){
            Text(this.str).fontSize(18).fontColor(getRandomColor())
          }.layoutWeight(1).height('100%').justifyContent(FlexAlign.Center)
        }.height('50%')
        Row(){
          Column(){
            Text(this.str).fontSize(18).fontColor(getRandomColor())
          }.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).layoutWeight(1).height('100%')
          Column(){
            Text(this.str).fontSize(18).fontColor(getRandomColor())
          }.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).layoutWeight(1).height('100%')
          Column(){
            Text(this.str).fontSize(18).fontColor(getRandomColor())
          }.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).layoutWeight(1).height('100%')
        }.height('50%')
    }.width('100%').height('100%')
  }
}

  效果图:

  代码写得有些乱,主要是公共的属性太多,可以使用@style和@Extend来优化代码,并且还可以提供变化的灵活性。

  下面的代码@Style只是展示一种写法,主要是@Extend(组件)的写法。

function getRandomColor() {
    const letters :string= '0123456789ABCDEF';
    let color:string = '#';
    for (let i = 0; i < 6; i++) {
      let Itemp:number=Math.floor(Math.random() * 16)
      color += letters.substr(Itemp,1);
    }
    return color;
}
@Extend(Text) function CustomText() {
  .fontColor(getRandomColor())
  .fontSize(18)
  .textAlign(TextAlign.Center)
  .maxLines(5)
  .textOverflow({ overflow: TextOverflow.Ellipsis })
}
@Extend(Column) function ColumnCustomAttr(){
  .justifyContent(FlexAlign.Center)
  .alignItems(HorizontalAlign.Center)
}

@Entry
@Component
struct Index {
  str: string = '在鸿蒙ArkTS中,Column和Row是两种常用的布局容器组件,它们分别用于垂直和水平布局。Column(垂直布局容器)用于将子组件垂直排列,Row(水平布局容器)用于将子组件水平排列。'
  @Styles
  CommonStyle() {
    .layoutWeight(1)
    .height('100%')
    .padding({top:5,left:5,right:5,bottom:5})
    .margin({top:5,left:5,right:5,bottom:5})
    .border({width:2,color:getRandomColor()})
  }
  build() {
        Column() {
            Row() {
                Column() { Text(this.str).CustomText().CommonStyle() }.CommonStyle().ColumnCustomAttr()
                Column() { Text(this.str).CustomText() }.CommonStyle().ColumnCustomAttr()
                Column() { Text(this.str).CustomText() }.CommonStyle().ColumnCustomAttr()
            }.height('50%')
            Row() {
                Column() { Text(this.str).CustomText() }.CommonStyle().ColumnCustomAttr()
                Column() { Text(this.str).CustomText().CommonStyle() }.CommonStyle().ColumnCustomAttr()
                Column() { Text(this.str).CustomText() }.CommonStyle().ColumnCustomAttr()
            }.height('50%')
        }.width('100%').height('100%')
  }
}

  上面的代码就整洁了一些,而且方便修改,无论修改的是公共属性还是组件独有属性。

  实际效果图:

  二、Flex(弹性布局组件)

  Flex布局是一种二维布局模型,它可以在任意方向上对元素进行排列,并且可以动态地调整元素的大小和位置,以适应不同的屏幕尺寸和设备。通过使用Flex布局,可以实现响应式布局效果。

 

  Flex(弹性伸缩布局)组件当容器的宽或者高超出父容器时会默认进行压缩显示。Row相当于Flex中的主轴,Column相当于Flex中的交叉轴。

  Flex主要属性:

  ① direction(主轴的方向):用于指定子组件在Flex容器上排列的方向,即主轴的方向。可选值包括Row(主轴方向为水平向右)、RowReverse(主轴方向为水平向左)、Column(主轴方向为垂直向下)和ColumnReverse(主轴方向为垂直向上)

  ② justifyContent(主轴的对齐方式):用于定义所有子组件在Flex容器主轴上的对齐方式。,可选值:justifyContent:FlexAlign.Start / Center / End / SpaceBetween / SpaceAround / SpaceEvenly,共有6种方式。

  ③ alignItems(交叉轴的对弃方式):用于定义所有子组件在Flex容器交叉轴上的对齐方式。可选值:alignItems.Auto / Start / Center / End / Baseline /Stretch,共有6种方式。

  ④ wrap(布局换行):用于确定Flex容器是单行/列排列还是多行/列排列。在多行布局时,它还会通过交叉轴方向确定新行的堆叠方向。可选值:wrap:FlexWrap.NoWrap / Wrap / WrapReverse。

  演示:

function getRandomColor() {
    const letters :string= '0123456789ABCDEF';
    let color:string = '#';
    for (let i = 0; i < 6; i++) {
      let Itemp:number=Math.floor(Math.random() * 16)
      color += letters.substr(Itemp,1);
    }
    return color;
}
@Extend(Text) function CustomText() {
  .fontColor(getRandomColor()).fontSize(18).textAlign(TextAlign.Center)
  .maxLines(5).textOverflow({ overflow: TextOverflow.Ellipsis })
  .margin(5).padding(5)
  .height('50%').width('30%')
  .border({width:2,color:getRandomColor()})
}
@Entry
@Component
struct Index {
  str: string = 'Flex(弹性伸缩布局)组件当容器的宽或者高超出父容器时会默认进行压缩显示。Row相当于Flex中的主轴,Column相当于Flex中的交叉轴。'
  build() {
      Flex({wrap:FlexWrap.Wrap}){
        Text(this.str).CustomText()
        Text(this.str).CustomText()
        Text(this.str).CustomText()
        Text(this.str).CustomText()
        Text(this.str).CustomText()
        Text(this.str).CustomText()
      }.height('100%').width('100%')
  }
}

  效果图:

  三、Stack(层叠布局组件)

  Stack布局是一种可以将多个组件按照一定顺序叠放的布局。在Stack布局中,后添加的组件会自动覆盖前面添加的组件,可以通过设置zIndex控制层级。

  ① 层叠效果:组件需要有堆叠效果时优先考虑此布局,层叠布局的堆叠效果不会占用或影响其他同容器内子组件的布局空间。
  ② zIndex控制:通过设置子组件的zIndex可以控制层级,zIndex越大越在上层。
  ③ 动画支持:Stack布局还支持添加动画,通过动画可以实现组件的平移、旋转等动态效果。

  Stack主要的布局属性:alignContent:Alignment.Bottom / ToStart / Top / TopEnd / Start / End / Center / BottomSatrt /Bottom / BottomEnd 共有9种样式

  测试代码:

function getRandomColor() {
    const letters :string= '0123456789ABCDEF';
    let color:string = '#';
    for (let i = 0; i < 6; i++) {
      let Itemp:number=Math.floor(Math.random() * 16)
      color += letters.substr(Itemp,1);
    }
    return color;
}
@Extend(Button) function CustomText(iW:number,iH:number,iZ:number) {
  .fontColor(Color.White).fontSize(18)
  .margin(5).padding(5)
  .height(iH).width(iW)
  .backgroundColor(getRandomColor())
  .align(Alignment.Start)
  .border({width:1,color:getRandomColor()})
  .zIndex(iZ)
}
@Entry
@Component
struct Index {
  @State zIndexValue:number[]=[1,2,3,4,5,6]
  build() {
      Stack({alignContent:Alignment.Bottom}){
        Button('1').CustomText(300,50,this.zIndexValue[0]).onClick(()=>{
          this.zIndexValue[0]=-this.zIndexValue[0]
        })
        Button('2').CustomText(250,100,this.zIndexValue[1]).onClick(()=>{
          this.zIndexValue[1]=-this.zIndexValue[1]
        })
        Button('3').CustomText(200,200,this.zIndexValue[2]).onClick(()=>{
          this.zIndexValue[2]=-this.zIndexValue[2]
        })
        Button('4').CustomText(150,300,this.zIndexValue[3]).onClick(()=>{
          this.zIndexValue[3]=-this.zIndexValue[3]
        })
        Button('5').CustomText(100,400,this.zIndexValue[4]).onClick(()=>{
          this.zIndexValue[4]=-this.zIndexValue[4]
        })
        Button('6').CustomText(50,500,this.zIndexValue[5]).onClick(()=>{
          this.zIndexValue[5]=-this.zIndexValue[5]
        })
      }.height('100%').width('100%').backgroundColor(Color.Pink)
  }
}

  效果图:

  点击按钮可以更改按钮的叠放次序。

  四、Grid(层叠布局组件)

  Grid组件用于控制网格的布局和样式。
  常用的属性:
  ① columnsTemplate:设置网格布局的列数及每列的宽度比例。例如,'1fr 1fr 1fr'表示将容器分为三列,每列占据相同的宽度。
  ② rowsTemplate:设置网格布局的行数及每行的高度比例。例如,'1fr 1fr'表示将容器分为两行,每行占据相同的高度。
  ③ columnsGap:设置列与列之间的间距。
  ④ rowsGap:设置行与行之间的间距。
  ⑤ width:设置Grid组件的宽度。
  ⑥ height:设置Grid组件的高度。
  ⑦ backgroundColor:设置Grid组件的背景颜色。
  ⑧ scroller:可滚动组件的控制器,用于与可滚动组件进行绑定(可选)。

  GridItem是Grid的子组件,用于在网格中定义具体的项目(即单元格的内容)。GridItem组件支持多种属性,用于控制项目的布局和样式。
  常用属性:
  ① rowStart、rowEnd:指定当前GridItem元素的起始行号和终点行号。
  ② columnStart、columnEnd:指定当前GridItem元素的起始列号和终点列号。

  测试代码:

function getRandomColor() {
    const letters :string= '0123456789ABCDEF';
    let color:string = '#';
    for (let i = 0; i < 6; i++) {
      let Itemp:number=Math.floor(Math.random() * 16)
      color += letters.substr(Itemp,1);
    }
    return color;
}
@Entry
@Component
struct Index {
  @State numbers: string[] = ['1', '2', '3', '4','5','6'];

  build() {
    Column() {
      Grid() {
        ForEach(this.numbers, (item: string, index: number) => {
          GridItem() {
                Text(item)
                  .fontSize(16)
                  .backgroundColor(getRandomColor())
                  .width('50%')
                  .height('50%')
                  .textAlign(TextAlign.Center)
                  .padding(20)
                  .margin(20)
          }
          .backgroundColor(getRandomColor())
        })
      }.columnsTemplate('1fr 1fr').rowsTemplate('1fr 1fr 1fr')
    }
  }
}

  效果图:


  实际在使用布局组件中,常常多种容器组件结合起来使用。
 

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

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

相关文章

简单介绍一下mvvm mvc mvp以及区别、历史

MVC&#xff08;Model - View - Controller&#xff09; 因MVC架构的灵活性&#xff0c;架构图形式很多&#xff0c;仅供参考 历史&#xff1a; MVC 是最早出现的软件架构模式之一&#xff0c;其历史可以追溯到 20 世纪 70 年代&#xff0c;最初被用于 Smalltalk - 80 环境。…

黑马程序员linux学习【持续更新】

Linux基础 一、Linux简介 1.分类 不同领域的主流操作系统&#xff0c;主要分为下 几类&#xff1a;桌面操作系统、服务器操作系统、移动设备操作系统、嵌入式操作系统。 桌面操作系统 操作系统特点Windows用户数量最多MacOS操作体验好&#xff0c;办公人士首选Linux用户数…

Vert.x,应用监控 - 全链路跟踪,基于Zipkin

关于Zipkin Zipkin是一款开源的分布式实时数据追踪系统(Distributed Tracking System)&#xff0c;能够收集服务间调用的时序数据&#xff0c;提供调用链路的追踪。Zipkin每一个调用链路通过一个trace id来串联起来&#xff0c;通过trace id&#xff0c;就能够直接定位到这次调…

ENSP作业——园区网

题目 根据上图&#xff0c;可得需求为&#xff1a; 1.配置交换机上的VLAN及IP地址。 2.设置SW1为VLAN 2/3的主根桥&#xff0c;设置SW2为VLAN 20/30的主根桥&#xff0c;且两台交换机互为主备。 3.可以使用super vlan。 4.上层通过静态路由协议完成数据通信过程。 5.AR1作为企…

从壹开始解读Yolov11【源码研读系列】——Data.dataset.py:模型训练数据预处理/YOLO官方数据集类——YOLODataset

【前情回顾】在上一篇文章记录了YOLO源码data目录下的 base.py 文件&#xff0c;其中定义了一个可灵活修改的数据加载处理基类——Class BaseDataset 灵活基类博文地址&#xff1a;https://blog.csdn.net/qq_58718853/article/details/143249295 【实验代码】所有实验代码上传至…

HFSS 3D Layout中Design setting各个选项的解释

从HFSS 3D LAYOUT菜单中&#xff0c;选择Design Settings打开窗口&#xff0c;会有六个选项&#xff1a;DC Extrapolation, Nexxim Options, Export S Parameters, Lossy Dielectrics, HFSS Meshing Method, and HFSS Adaptive Mesh. DC Extrapolation 直流外推 直流外推分为标…

【板栗糖GIS】——如果安装的vscode版本落后了,如何无障碍更新

【板栗糖GIS】——如果安装的vscode版本落后了&#xff0c;如何无障碍更新 今天想安装新扩展插件时发现vscode版本有点旧&#xff0c;于是在不影响插件的情况下更新。 打开vscode软件&#xff0c;点击设置检查更新&#xff0c;如果有需要更新的直接安装到原目录&#xff0c;如…

数字化转型必看!华为数字化最全合集(192页PDF限免下载 )

今天给大家整理了6份关于华为数字化的资料&#xff0c;共计192页&#xff0c;干货满满&#xff01; 资料已经全部打包&#xff0c;划到文末添加大师兄即可免费下载&#x1f447;&#x1f447;&#x1f447; 一、华为实施数字化转型方法论与实践的业务解读 这份报告是华为实施数…

【数据集】【YOLO】【目标检测】道路结冰数据集 1527 张,YOLO目标检测实战训练教程!

数据集介绍 【数据集】道路结冰数据集 1527 张&#xff0c;目标检测&#xff0c;包含YOLO/VOC格式标注。数据集中包含2种分类&#xff1a;“clear_road, ice_road”。数据集来自国内外图片网站和视频截图&#xff0c;部分数据经过数据增强处理。检测范围监控视角检测、无人机视…

创建线程时传递参数给线程

在C中&#xff0c;可以使用 std::thread 来创建和管理线程&#xff0c;同时可以通过几种方式将参数传递给线程函数。这些方法包括使用值传递、引用传递和指针传递。下面将对这些方法进行详细讲解并给出相应的代码示例。 1. 值传递参数 当你创建线程并希望传递参数时&#xff…

集智书童 | DuoDiff: 提升浅层 Transformer 性能的扩散模型, 双 Backbone 件扩散模型在图像处理中的应用 !

本文来源公众号“集智书童”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;DuoDiff: 提升浅层 Transformer 性能的扩散模型&#xff0c; 双 Backbone 件扩散模型在图像处理中的应用 &#xff01; 扩散模型在图像生成方面取得了前所…

linux perf 环境部署和基本测试(基于Ubuntu20.04)

1,linux 安装perf sudo apt-ge install linux-tools-common sudo apt-get install linux-tools-$(uname -r) linux-tools-generic -y 2 补充安装 sudo apt-get install python3-q-text-as-data 3&#xff0c;perf常用命令 larkubuntu:~$ perf usage: perf [--version] [--hel…

PHP露营地管理平台小程序系统源码

⛺️【露营新风尚】露营地管理平台系统全攻略⛺️ &#x1f3d5;️一、露营热潮下的管理难题&#xff1a;如何高效运营露营地&#xff1f;&#x1f914; 随着露营文化的兴起&#xff0c;越来越多的人选择在大自然中享受宁静与自由。然而&#xff0c;露营地的管理却面临着诸多…

信息安全工程师(83)Windows操作系统安全分析与防护

一、Windows操作系统安全分析 系统漏洞&#xff1a; Windows操作系统由于其复杂性和广泛使用&#xff0c;可能存在一些已知或未知的漏洞。这些漏洞可能会被黑客利用&#xff0c;进行恶意攻击。微软会定期发布系统更新和补丁&#xff0c;以修复这些漏洞&#xff0c;提高系统的安…

软件测试—功能测试详解

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、测试项目启动与研读需求文档 &#xff08;一&#xff09; 组建测试团队 1、测试团队中的角色 2、测试团队的基本责任 尽早地发现软件程序、系统或产…

【1个月速成Java】基于Android平台开发个人记账app学习日记——第7天,申请阿里云SMS短信服务SDK

系列专栏链接如下&#xff0c;方便跟进&#xff1a; https://blog.csdn.net/weixin_62588253/category_12821860.html?fromshareblogcolumn&sharetypeblogcolumn&sharerId12821860&sharereferPC&sharesourceweixin_62588253&sharefromfrom_link 同时篇幅…

安装和运行开发微信小程序

下载HBuilder uniapp官网 uni-app官网 微信开发者工具 安装 微信小程序 微信小程序 官网 微信小程序 配置 运行 注意&#xff1a;运行前需要开启服务端口 如果运行看不到效果&#xff0c;设置下基础库选别的版本 配置

如何用pycharm连接sagemath?

#世纪难题在我逃避刷CTF的这两天解决了# 1. 在本地linux上部署最新版的sagemath 推荐WSLdocker直接pull sagemath 2. pycharm中创建jupyter脚本&#xff0c;远程连接jupyter服务器 3. 运行cell并配置kernel 缺点&#xff1a;pycharm用自带的python编译器预处理代码&#xff0…

JNPF V5.1版本震撼上线,更多功能等你解锁!

亲爱的用户们&#xff1a; 随着季节的更迭&#xff0c;引迈也在不断进步和创新。经过数月的精心打磨和无数次的测试&#xff0c;我们非常兴奋地宣布&#xff0c;JNPF快速开发平台迎来了激动人心的V5.1版本更新&#xff01;这次更新不仅带来了全新的功能和改进&#xff0c;还进…

Dependency: androidx.webkit:webkit:1.11.0-alpha02. 问题

android studio 打包后出现这个问题 1.步骤更新topOn sdk 添加 //Admob api “com.anythink.sdk:adapter-admob:6.4.18” api “com.google.android.gms:play-services-ads:23.4.0” api "com.google.android.gms:play-services-ads:23.4.0"sdk 中会出现打包编译报错…