当前位置： 首页 > article >正文

四、鸿蒙开发-常用布局(线性布局、层叠布局、弹性布局、网格布局、列表布局)

article 2024/10/30 23:23:11

提示：本文根据b站尚硅谷2024最新鸿蒙开发HarmonyOS4.0+鸿蒙NEXT星河版零基础教程课整理

链接指引 => 尚硅谷2024最新鸿蒙开发HarmonyOS4.0+鸿蒙NEXT星河版零基础教程

文章目录

  • 一、布局基础
    • 1.1 盒子模型
  • 二、线性布局（Column/Row）
    • 2.1 概述
    • 2.2 参数
    • 2.3 常用属性
      • 2.3.1 子元素沿主轴方向的排列方式
      • 2.3.2 子元素沿交叉轴方向的对齐方式
    • 2.4 实用技巧
      • 2.4.1 Blank组件的使用
      • 2.4.2 layoutWeight属性的使用
  • 三、层叠布局（Stack）
    • 3.1 概述
    • 3.2 参数
    • 3.3 实用技巧
      • 3.3.1 子组件Z轴控制
      • 3.3.2 子组件精确定位
  • 四、弹性布局（Flex）
    • 4.1 概述
    • 4.2 参数
      • 4.2.1 布局方向（dirction）
      • 4.2.2 主轴排列方式（justifyContent）
      • 4.2.3 交叉轴对齐方式（alignItems）
      • 4.2.4 布局换行（列）（wrap）
      • 4.2.5 交叉轴多行排列方式（alignContent）
    • 4.3 子组件常用属性
      • 4.3.1 交叉轴对齐（alignSelf）
      • 4.3.2 自适应伸缩
  • 五、网格布局（Grid）
    • 5.1 概述
    • 5.2 常用属性
      • 5.2.1 划分网格
      • 5.2.2 子组件所占行列数
      • 5.2.3 行列间距
  • 六、列表布局（List）
    • 6.1 概述
    • 6.2 参数
      • 6.2.1 列表项间距
      • 6.2.2 列表滚动控制器
    • 6.3 常用属性
      • 6.3.1 主轴方向
      • 6.3.2 交叉轴对齐方式
      • 6.3.3 元素分割线
      • 6.3.4 滚动条样式
      • 6.3.5 其余功能

一、布局基础

1.1 盒子模型

在鸿蒙应用中，页面上的每个组件都可以看做是一个矩形的盒子，这个盒子包含了内容区域（content）、边框（border）、内边距（padding）和外边距（margin），各部分内容如下图所示

盒模型

  • margin

    margin(value: { top?:Length, right?:Length, bottom?:Length, left?:Length } |  Length )

    说明：
    Length=string | number | Resource
    当参数类型为Length时，四个方向的边距同时生效

  • padding

    padding(value: { top?:Length, right?:Length, bottom?:Length, left?:Length } |  Length )

  • border

    border(value: {width?:Length, color?:ResourceColor, radius?:Length, style?:BorderStyle })

    各属性含义如下

    • width
      width属性表示边框宽度

    • color
      color属性表示边框颜色

    • radius
      radius属性表示边框圆角半径

    • style
      style属性表示边框样式，可通过BorderStyle这一枚举类型进行设置，可选的枚举值有

      名称描述效果
      BorderStyle.Dotted显示为一系列圆点dot
      BorderStyle.Dashed显示为一系列短的方形虚线122
      BorderStyle.Solid显示为一条实线da

二、线性布局（Column/Row）

2.1 概述

线性布局（LinearLayout）是开发中最常用的布局，可通过容器组件Column和Row构建，其子组件会在垂直或者水平方向上进行线性排列，具体效果如下图所示
1212

说明
Column和Row容器均有两个轴线，分别是主轴和交叉轴
- 主轴：线性布局容器在布局方向上的轴线，Row容器主轴为横向，Column容器主轴为纵向。
- 交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为纵向，Column容器交叉轴为横向。

2.2 参数

Column和Row容器的参数类型为{space?: string | number}，开发者可通过space属性调整子元素在主轴方向上的间距，效果如下
csc

2.3 常用属性

2.3.1 子元素沿主轴方向的排列方式

子元素沿主轴方向的排列方式可以通过justifyContent()方法进行设置，其参数类型为枚举类型FlexAlign，可选的枚举值有

名称StartCenterEndSpaceBetweenSpaceAroundSpaceEvenly
描述头部对齐居中对齐尾部对齐均匀分布，首尾两项两端对齐，中间元素等间距分布均匀分布，所有子元素两侧都留有相同的空间均匀分布，所有子元素之间以及首尾两元素到两端的距离都相等
效果 (以Column容器为例)112233445566

2.3.2 子元素沿交叉轴方向的对齐方式

子元素沿交叉轴方向的对齐方式可以通过alignItems()方法进行设置，其参数类型，对于Column容器来讲是HorizontalAlign，对于Row容器来讲是VerticalAlign，两者都是枚举类型，可选择枚举值也都相同，具体内容如下

名称startCenterEnd
描述头部对齐居中对齐尾部对齐
效果(以Column容器为例)headcenterend

2.4 实用技巧

2.4.1 Blank组件的使用

Blank可作为Column和Row容器的子组件，该组件不显示任何内容，并且会始终充满容器主轴方向上的剩余空间，效果如下：
css

2.4.2 layoutWeight属性的使用

layoutWeight属性可用于Column和Row容器的子组件，其作用是配置子组件在主轴方向上的尺寸权重。配置该属性后，子组件沿主轴方向的尺寸设置（width或height）将失效，具体尺寸根据权重进行计算，计算规则如下图所示：
layout

三、层叠布局（Stack）

3.1 概述

层叠布局是指将多个组件沿垂直于屏幕的方向堆叠在一起，类似于图层的叠加。以下效果都可以通过层叠布局实现
stack
层叠布局可通过Stack容器组件实现，其子元素会按照其添加顺序依次叠加在一起，后添加的子元素位于先添加的子元素之上。具体效果如下

Stack() {
  Row()
    .width(250)
    .height(250)
    .backgroundColor('#107B02') //绿色
    .shadow({radius:50})
  Row()
    .width(200)
    .height(200)
    .backgroundColor('#E66826') //橙色
    .shadow({radius:50})
  Row()
    .width(150)
    .height(150)
    .backgroundColor('#255FA7') //蓝色
    .shadow({radius:50})
}
.width(300)
.height(300)
.backgroundColor('#E5E5E5') //灰色

asc

3.2 参数

Stack组件的参数类型为{ alignContent?: Alignment }，alignContent用于设置子组件的对齐方式，该属性可通过枚举类型Alignment进行设置，可选的枚举值及其效果如下图所示
css

3.3 实用技巧

3.3.1 子组件Z轴控制

Stack容器中子组件的层级除了可按照添加顺序决定，还能通过zIndex()进行手动的设置，zIndex的值越大，层级越高。

Stack() {
  Row()
    .width(150)
    .height(150)
    .backgroundColor('#255FA7') //蓝色
    .shadow({ radius: 50 })
    .zIndex(3)

  Row()
    .width(200)
    .height(200)
    .backgroundColor('#E66826') //橙色
    .shadow({ radius: 50 })
    .zIndex(2)
  
  Row()
    .width(250)
    .height(250)
    .backgroundColor('#107B02') //绿色
    .shadow({ radius: 50 })
    .zIndex(1)

}.width(300)
.height(300)
.backgroundColor('#E5E5E5') //灰色

czxczxczxc

3.3.2 子组件精确定位

Stack容器的子组件可使用position()方法进行更精确的定位，该方法可设置子组件左上角相对于Stack容器左上角的偏移量，具体效果如下

Stack() {
  Image($r('app.media.img_avatar'))
    .width('100%')
    .height('100%')
  Image($r('app.media.icon_v'))
    .width(60)
    .height(60)
    .position({ x: 140, y: 140 })
}
.width(200)
.height(200)

vcvxcvcxv

四、弹性布局（Flex）

4.1 概述

弹性布局（Flex）的效果类似于线性布局（Column/Row），也会使子元素呈线性排列，但是弹性布局在子元素的排列、对齐和剩余空间的分配等方面更加灵活。

4.2 参数

Flex组件的参数定义如下，下面逐一介绍每个属性

Flex(value?: { direction?: FlexDirection, justifyContent?: FlexAlign, alignItems?: ItemAlign, wrap?: FlexWrap, alignContent?: FlexAlign })

4.2.1 布局方向（dirction）

dirction用于设置Flex容器的布局方向，即子元素的排列方向，其类型FlexDirection为枚举类型，可选的枚举值如下

名称RowRowReverseColumnColumnReverse
描述水平方向，元素从左到右排列水平方向，元素从右到左排列垂直方向，元素从上到下排列垂直方向，元素从下到上排列
效果111223344

Flex容器中也有主轴和交叉轴两个概念，其中主轴方向与direction一致，交叉轴与主轴垂直，具体方向如下

directionRowRowReverseColumnColumnReverse
主轴和交叉轴11111222333444

4.2.2 主轴排列方式（justifyContent）

justifyContent参数的作用同Column/Row容器的justifyContent()完全相同，也是用于设置子元素在主轴方向的排列方式，其类型同样为FlexAlign，可选的枚举值如下

名称描述效果（以direction=Row为例）
Start分布在起始端dsdsd
Center居中cccc
End分布在结束端cxzccx
SpaceBetween均匀分布，首尾两项两端对齐，中间元素等间距分布vssdsd
SpaceAround均匀分布，所有子元素两侧都留有相同的空间adadd
SpaceEvenly均匀分布，所有子元素之间以及首尾两元素到两端的距离都相等vvvvsssd

4.2.3 交叉轴对齐方式（alignItems）

alignItems参数的作用同Column/Row容器的alignItems()相同，也是用于设置子元素在交叉轴的对齐方式。但该参数的类型与Column/Row容器的alignItems()方法不同，为ItemAlign，可选的枚举值有

名称描述效果（以direction=Row为例）
Start启始端对齐cc
Center居中对齐bb
End结束端对齐ee
Stretch拉伸到容器尺寸nm
BaseLine沿文本基线对齐（限于Text文本组件）me

4.2.4 布局换行（列）（wrap）

默认情况下，Flex容器的子组件，都排在一条线（主轴）上。当子组件在主轴方向的尺寸之和大于Flex容器时，为适应容器尺寸，所有子组件的尺寸都会自动收缩。如果需要保持子组件的尺寸不收缩，也可选择令子组件换行（列）显示。
wrap属性的作用就是控制如何换行，该属性的类型FlexWrap为枚举类型，可选的枚举值如下

名称描述效果（以direction=Row为例）
NoWrap不换行cv
Wrap换行，每一行子组件按照主轴方向排列bb
WrapReverse换行，每一行子元素按照主轴反方向排列nn

4.2.5 交叉轴多行排列方式（alignContent）

当Flex容器中包含多行（列）时，可使用alignContent设置多行在交叉轴的排列方式，该属性的类型为FlexAlign，可选的枚举值如下

名称StartCenterEndSpaceBetweenSpaceAroundSpaceEvenly
描述分布在起始端居中分布在终点端均匀分布，首尾两项两端对齐，中间元素等间距分布均匀分布，所有子元素两侧都留有相同的空间均匀分布，所有子元素之间以及首尾两元素到两端的距离都相等
效果(以direction=Row为例)cbrennf444bbbaaaaa

4.3 子组件常用属性

4.3.1 交叉轴对齐（alignSelf）

Flex容器的子组件可以使用alignSelf()方法单独设置自己的交叉轴对齐方式，并且其优先级高于Flex容器alignItems。具体效果如下

说明：
alignSelf()的参数类型和alignItems()相同，均为ItemAlign枚举类型，且各枚举值的含义也完全相同。

Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start }) {
  Text('1')
    .width(100)
    .height(100)
    .itemTextStyle()
  Text('2')
    .width(100)
    .height(200)
    .itemTextStyle()
  Text('3')
    .width(100)
    .height(150)
    .itemTextStyle()
    .alignSelf(ItemAlign.End) //单独设置交叉轴对齐方式
}.height(300)
.width('95%')
.flexStyle()

sdasda

4.3.2 自适应伸缩

弹性布局的显著特点之一是子组件沿主轴方向的尺寸具有弹性，即子组件的大小能够随着Flex容器尺寸的变化而自动伸缩。这种弹性特性使得Flex布局能够使子组件更灵活地适应不同的屏幕尺寸和设备。和自适应伸缩的相关的属性有flexShrink、flexGrow和flexBasis，下面逐一介绍

  • flexShrink
    flexShrink用于设置父容器空间不足时，子组件的压缩比例，尺寸的具体计算逻辑如下
    //Flex容器主轴尺寸为240，子组件主轴尺寸之和为100*3=300
Flex() {
  //尺寸=100
  Text('1')
    .width(100)
    .height(100)
    .flexShrink(0) //不压缩

  //主轴尺寸=100-(300-240)*(1/3)=80
  Text('2')
    .width(100)
    .height(100)
    .flexShrink(1) //压缩比例为1

  //主轴尺寸=100-(300-240)*(2/3)=60
  Text('3')
    .width(100)
    .height(100)
    .flexShrink(2) //压缩比例为2
  
}.height(150)
.width(240)
    xczxc
  • flexGrow
    flexGrow用于设置父容器空间充足时，组件瓜分剩余空间的比例，尺寸的具体计算逻辑如下
    Flex() {
  //尺寸=100
  Text('1')
    .width(100)
    .height(100)
    .flexGrow(0) //不拉伸

  //主轴尺寸=100+(360-300)*(1/3)=120
  Text('2')
    .width(100)
    .height(100)
    .flexGrow(1) //拉伸比例为1

  //主轴尺寸=100+(360-300)*(2/3)=140
  Text('3')
    .width(100)
    .height(100)
    .flexGrow(2) //拉伸比例为2

}.height(150)
.width(360)
    basdasd
  • flexBasis
    flexBasis用于设置子组件沿主轴方向的尺寸，相当于width或者height的作用。若设置了flexBasis，则以flexBasis为准，否则以widht或者height为准。

五、网格布局（Grid）

5.1 概述

网格布局（Grid）是一种强大的布局方案，它将页面划分为行和列组成的网格，然后将页面内容在二维网格中进行自由的定位，以下效果都可通过网格布局实现

网格布局的容器组件为 Grid，子组件为 GridItem，具体语法如下

Grid() {
  GridItem() {
    Text('GridItem')   
  }
  GridItem() {
    Text('GridItem')   
  }
  GridItem() {
    Text('GridItem')   
  }
  GridItem() {
    Text('GridItem')   
  }
  ......
}

xczxc

5.2 常用属性

5.2.1 划分网格

Grid组件支持自定义行数和列数以及每行和每列的尺寸大小，上述内容需要使用rowsTemplate()方法和columnsTemplate()方法进行设置，具体用法如下

Grid() {
  ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => {
    GridItem() {
      Text(item.toString())
        .itemTextStyle()
    }
  })
}
.width(320)
.height(240)
.rowsTemplate('1fr 1fr 1fr')
.columnsTemplate('1fr 2fr 1fr')
.gridStyle()

vv

说明：
fr为 fraction(比例、分数) 的缩写。fr的个数表示网格布局的行数或列数，fr前面的数值大小，表示该行或列的尺寸占比。

5.2.2 子组件所占行列数

GridItem组件支持横跨几行或者几列，如下图所示
xczxc
可以使用columnStart()、columnEnd()、rowStart()和rowEnd()方法设置 GridItem 组件所占的单元格，其中rowStart和rowEnd属性表示当前子组件的起始行号和终点行号，columnStart和columnEnd属性表示指定当前子组件的起始列号和终点列号。

说明：
Grid容器中的行号和列号均从0开始。

Grid() {
  GridItem() {
    Text('1')
      .itemTextStyle()
  }.rowStart(0).rowEnd(1).columnStart(0).columnEnd(1)

  GridItem() {
    Text('2')
      .itemTextStyle()
  }

  GridItem() {
    Text('3')
      .itemTextStyle()
  }

  GridItem() {
    Text('4')
      .itemTextStyle()
  }
  GridItem() {
    Text('5')
      .itemTextStyle()
  }.columnStart(1).columnEnd(2)
}
.width(320)
.height(240)
.rowsTemplate('1fr 1fr 1fr')
.columnsTemplate('1fr 2fr 1fr')
.gridStyle()

czxczxcxc

5.2.3 行列间距

使用rowsGap()和columnsGap()属性，可以控制行列间距，具体用法如下

Grid() {
  ......
}
.columnsGap(20)
.rowsGap(20)

sfdsfsdf

六、列表布局（List）

6.1 概述

List容器的子组件为ListItem或者ListItemGroup，其中，ListItem表示单个列表项，ListItemGroup用于列表数据的分组展示，其子组件也是ListItem，具体用法如下

  • 列表项

    List() {
  // 列表项
  ListItem() {......}
  ListItem() {......}
  ListItem() {......}
  ListItem() {......}
  ListItem() {......}
  ListItem() {......}
  ListItem() {......}
  ListItem() {......}
  ListItem() {......}
  ListItem() {......}
  ListItem() {......}
  ListItem() {......}
}

    czxczxc

  • 列表组

    List() {
  // 列表组
  ListItemGroup(){
    //列表项
    ListItem(){......}
    ListItem(){......}
  }

  ListItemGroup(){
    ListItem(){......}
    ListItem(){......}
  }
  
  ListItemGroup(){
    ListItem(){......}
    ListItem(){......}
  }
}

    ndsfsdfsdf

6.2 参数

List 组件的参数定义如下，下面逐一介绍每个参数

List(value?:{space?: number | string, scroller?: Scroller})

6.2.1 列表项间距

space参数用于设置列表项的间距

6.2.2 列表滚动控制器

scroller参数用于绑定列表滚动控制器（Scroller），Scroller可以控制列表的滚动，例如令列表返回顶部

6.3 常用属性

6.3.1 主轴方向

使用listDirection()方法可以设置列表的主轴方向（即列表的排列和滚动方向），其参数类型为枚举类型Axis，可选的枚举值如下

名称描述效果
Axis.Vertical纵向ZX
Axis.Horizontal横向baaa

6.3.2 交叉轴对齐方式

使用alignListItem()方法可以设置子组件在交叉轴方向的对齐方式，其参数类型为枚举类型ListItemAlign，可选的枚举值有

名称ListItemAlign.StartListItemAlign.CenterListItemAlign.End
描述交叉轴起始端对齐交叉轴居中对齐交叉轴末端对齐
效果（以listDirection=Axis.Vertical为例）cascasccczxczcxc

6.3.3 元素分割线

使用divider()属性可设置列表元素分割线样式，该方法的参数定义如下

divider(value: {strokeWidth: Length, color?: ResourceColor, startMargin?: Length, endMargin?: Length})

各参数的含义如下

参数含义
strokeWidth分割线线宽
color分割线颜色
startMargin分割线起始端到列表侧边距离（如下图所示）
endMargin分割线末端到列表侧边距离（如下图所示）

6.3.4 滚动条样式

使用scrollBar()方法可以设置滚动条状态，该方法的参数类型为枚举类型BarState，可选的枚举值如下

名称描述
BarState.Off不显示
BarState.On常驻显示
BarState.Auto按需显示(触摸时显示，2s后消失)

6.3.5 其余功能

上述只是List列表布局最为常用的一些功能，其余功能可参考官方文档。


http://www.kler.cn/a/372186.html

相关文章：

  • 微服务分布式事务
  • React核心思维模型（一）
  • 第三十三篇：TCP协议如何避免/减少网络拥塞，TCP系列八
  • 面试经典 150 题.P27. 移除元素（002）
  • 音频重采样（libresample）
  • docker中使用ros2humble的rviz2不显示问题
  • kubeadm部署安装
  • SOLID - 依赖倒置原则（Dependency Inversion Principle）
  • 流媒体协议.之（RTP，RTCP，RTSP，RTMP，HTTP）（二）
  • 如何使用python完成时间序列的数据分析？
  • QTreeWidget使用记录(1)
  • 使用linux+nginx 作为unity webgl的服务器
  • 告别资源荒！哎哟喂啊盘搜及其他良心网盘搜索引擎推荐
  • HTML--浮动布局练习
  • unity3d——单例模式，加载单例模式类问题
  • 力姆泰克伺服电动缸的优势有哪些
  • ML2021Spring-hw1(COVID-19 Cases Prediction)
  • 百度SEO分析实用指南 提升网站搜索排名的有效策略
  • unity游戏开发之赛车游戏
  • WEBRTC教程:局域网怎么调试，http://172.19.18.101:8080 ,无法访问摄像头和麦克风，请检查权限
  • 【数据库知识】oracle进阶-逻辑结构深入理解
  • 「Mac畅玩鸿蒙与硬件8」鸿蒙开发环境配置篇8 - 应用依赖与资源管理
  • QT中采用QCustomPlot 实现将buffer中的数据绘制成折线图，并且图形随着数据更新而更新
  • [LeetCode-455]基于贪心算法的分发饼干问题的求解（C语言版）
  • Jenkins 发布 Java 项目：高效持续集成与部署
  • 2024年优秀的天气预测API