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

鸿蒙5：其他布局容器

news 来源：原创 2025/6/29 11:54:26

注意：博主有个鸿蒙专栏，里面从上到下有关于鸿蒙next的教学文档，大家感兴趣可以学习下

如果大家觉得博主文章写的好的话，可以点下关注，博主会一直更新鸿蒙next相关知识

专栏地址: https://blog.csdn.net/qq_56760790/category_12794123.html

文章所属类目（HarmonyOS 语言-ArkTS）

1.布局容器

1.1弹性布局Flex

1.1.1 基本介绍

1.1.2 布局方向

1.1.3 布局换行

1.1.4 弹性布局-练习题

1.2 网格布局

1.2.1 基本介绍

1.2.2 代码案例

1.3 相对布局

1.3.1 基本介绍

1.3.2 代码示例

1.4 滚动条说明

1.4.1 基本介绍

1.4.2 代码示例

1.4.3 滚动设置

1.布局容器

1.1弹性布局Flex

参考地址

文档中心

1.1.1 基本介绍

弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。

容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。

1.1.2 布局方向

在弹性布局中，容器的子元素可以按照任意方向排列。通过设置参数direction，可以决定主轴的方向，从而控制子元素的排列方向。

FlexDirection.Row（默认值）：主轴为水平方向，子元素从起始端沿着水平方向开始排布。

FlexDirection.RowReverse：主轴为水平方向，子元素从终点端沿着FlexDirection. Row相反的方向开始排布。

FlexDirection.Column：主轴为垂直方向，子元素从起始端沿着垂直方向开始排布。

FlexDirection.ColumnReverse：主轴为垂直方向，子元素从终点端沿着FlexDirection. Column相反的方向开始排布。

@Entry@Componentstruct FlexDemo {build() {Column() {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)}.height('100%').width('100%')}}

1.1.3 布局换行

弹性布局分为单行布局和多行布局。默认情况下，Flex容器中的子元素都排在一条线（又称“轴线”）上。wrap属性控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex是单行布局还是多行布局。在多行布局时，通过交叉轴方向，确认新行排列方向。

FlexWrap. NoWrap（默认值）：不换行。如果子元素的宽度总和大于父元素的宽度，则子元素会被压缩宽度。

@Entry@Componentstruct FlexDemo2 {build() {Column() {Flex({ wrap: FlexWrap.NoWrap }) {Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)Text('2').width('50%').height(50).backgroundColor(0xD2B48C)Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)}.width('90%').padding(10).backgroundColor(0xAFEEEE)}.height('100%').width('100%')}}

FlexWrap. Wrap：换行，每一行子元素按照主轴方向排列。

@Entry@Componentstruct FlexDemo2 {build() {Column() {Flex({ wrap: FlexWrap.Wrap }) {Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)Text('2').width('50%').height(50).backgroundColor(0xD2B48C)Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)}.width('90%').padding(10).backgroundColor(0xAFEEEE)}.height('100%').width('100%')}}

FlexWrap. WrapReverse：换行，每一行子元素按照主轴反方向排列。

@Entry@Componentstruct FlexDemo2 {build() {Column() {Flex({ wrap: FlexWrap.WrapReverse }) {Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)Text('2').width('50%').height(50).backgroundColor(0xD2B48C)Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)}.width('90%').padding(10).backgroundColor(0xAFEEEE)}.height('100%').width('100%')}}

主轴和交叉轴对齐方式和线性布局类似

1.1.4 弹性布局-练习题

import { LengthMetrics } from '@kit.ArkUI'@Entry@Componentstruct FlexDemo3 {build() {Column() {Text('阶段选择').fontWeight(600).fontSize(24).width('100%').margin({bottom: 15})Flex({wrap: FlexWrap.Wrap, // 设置换行space: {main: LengthMetrics.vp(10), // 主轴间隙cross: LengthMetrics.vp(10) // 侧轴间隙}}) {Text('ArkUI').padding(10).backgroundColor('#c6c6c6')Text('ArkTS').padding(10).backgroundColor('#c6c6c6')Text('界面开发').padding(10).backgroundColor('#c6c6c6')Text('系统能力').padding(10).backgroundColor('#c6c6c6')Text('权限控制').padding(10).backgroundColor('#c6c6c6')Text('元服务').padding(10).backgroundColor('#c6c6c6')}}.width('100%').height('100%').padding(10)}}

1.2 网格布局

参考地址

文档中心

1.2.1 基本介绍

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

Grid组件为网格容器，其中容器内各条目对应一个GridItem组件，如下图所示。

Grid可以设置columnsTemplate和rowsTemplate

columnsTemplate是设置横向的分配，如果设置 1fr 1fr 表示，等分为两份，如果设置1fr 2fr表示左边一份，右边两份，在设置columnsTemplate不设置rowsTemplate的情况下，如果内容超出容器区域，会自动出现滚动条 columnsGap设置列和列之间的间距，rowsGap设置行和行之间的间距

1.2.2 代码案例

@Entry
@Component
struct GridDemo {build() {Grid() {GridItemCase()GridItemCase()GridItemCase()GridItemCase()GridItemCase()GridItemCase()GridItemCase()GridItemCase()GridItemCase()GridItemCase()GridItemCase()GridItemCase()GridItemCase()GridItemCase()GridItemCase()GridItemCase()GridItemCase()}.width("100%").height("100%").columnsTemplate("1fr 1fr") // 设置几列.columnsGap(10) // 列间距.rowsGap(10) // 行间距.padding(10)}
}@Component
struct GridItemCase {build() {GridItem() {Row() {Column() {Text("内容")}.width('100%')}.height(200).borderRadius(4).backgroundColor(Color.Pink)}}
}

1.3 相对布局

参考地址

文档中心

1.3.1 基本介绍

相对布局组件，用于复杂场景中元素对齐的布局。

需要一个参考布局的容器RelativeContainer和需要排列的若干子组件

注意：容器的id固定为__container__，参与相对布局的容器内组件若被设备锚点，需要设置id，否则不显示

准备一个容器RelativeContainer，内部组件通过alignRules设置对齐方式

垂直方向对齐

- top：设置元素上方对齐位置
- bottom：设置元素下方对齐位置
- center：设置元素垂直中线对齐位置

水平方向对齐

- left：设置元素左侧对齐位置
- right：设置元素右侧对齐位置
- middle：设置元素水平中线对齐位置

1.3.2 代码示例

@Entry@Componentstruct RelativeDemo {build() {RelativeContainer() {Row() {Text('row1')}.justifyContent(FlexAlign.Center).width(100).height(100).backgroundColor('#a3cf62').alignRules({'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start }}).id("row1")Row() {Text('row2')}.justifyContent(FlexAlign.Center).width(100).height(100).backgroundColor('#00ae9d').alignRules({'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },'right': { 'anchor': '__container__', 'align': HorizontalAlign.End }}).id("row2")}.width(300).height(300).margin({ 'left': 20 }).border({ 'width': 2, 'color': '#6699FF' })}}

1.4 滚动条说明

1.4.1 基本介绍

在基本的布局组件 Column/Row/Flex/Stack中不论内容超出与否，皆不会出现滚动条

出现滚动条的组件
Grid
List(列表)
Scroll(滚动条)
Swiper(轮播)
WaterFlow(瀑布流)

出现滚动条的前提条件是- 上述组件中的子组件的内容超出了父容器组件的宽度或者高度

1.4.2 代码示例

使用最基本的Scroll组件出现一个滚动条

@Entry@Componentstruct ScrollDemo {build() {Column() {Row().width('100%').height(50).backgroundColor(Color.Red)Column() {}.width('100%').layoutWeight(1).backgroundColor(Color.Orange)Row().width('100%').height(50).backgroundColor(Color.Blue)}.justifyContent(FlexAlign.SpaceBetween).width('100%').height('100%')}}

@Entry@Componentstruct ScrollDemo {build() {Column() {Row().width('100%').height(50).backgroundColor(Color.Red)Scroll() {Column() {}.width('100%').height(3000).backgroundColor(Color.Orange)}.layoutWeight(1)Row().width('100%').height(50).backgroundColor(Color.Blue)}.width('100%').height('100%')}}

@Entry
@Component
struct ScrollDemo {build() {Column() {Row().width('100%').height(50).backgroundColor(Color.Red)Scroll() {Column() {ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()}.width('100%').backgroundColor(Color.Orange)}.layoutWeight(1)Row().width('100%').height(50).backgroundColor(Color.Blue)}.width('100%').height('100%')}
}@Component
struct ScrollItem {build() {Row() {Text('我是Scroll滚动内容')}.width('100%').margin(20).height(80).justifyContent(FlexAlign.Center).backgroundColor(Color.Pink)}
}

1.4.3 滚动设置

edgeEffect设置边缘滑动效果

@Entry@Componentstruct ScrollDemo {build() {Column() {Row().width('100%').height(50).backgroundColor(Color.Red)Scroll() {Column() {ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()}.width('100%').backgroundColor(Color.Orange)}.layoutWeight(1).edgeEffect(EdgeEffect.Spring) // 设置滑动效果Row().width('100%').height(50).backgroundColor(Color.Blue)}.width('100%').height('100%')}}@Componentstruct ScrollItem {build() {Row() {Text('我是Scroll滚动内容')}.width('100%').margin(20).height(80).justifyContent(FlexAlign.Center).backgroundColor(Color.Pink)}}

横向滚动，要开启滚动，设置一个参数

scrollable(value: ScrollDirection)

直接敲comp，可以创建组件的基本结构

如何控制滚动

Scroll的滚动一般由用户的手指触发

我们也可以使用一个对象来控制滚动条 scroller

@Entry
@Component
struct ScrollDemo {@State message: string = 'Hello World';scroller: Scroller = new Scroller()build() {Row() {Column() {// 有且只有一个组件Scroll(this.scroller) {Row({ space: 20 }) {Actor()Actor()Actor()Actor()Actor()Actor()Actor()Actor()Actor()Actor()Actor()Actor()Actor()Actor()Actor()}}.height(200).scrollable(ScrollDirection.Horizontal).width('100%').backgroundColor(Color.Orange)Row() {Button("滚到左侧").onClick(() => {this.scroller.scrollEdge(Edge.Start)})Button("滚到右侧").onClick(() => {this.scroller.scrollEdge(Edge.End)})}}}.width('100%').height('100%').backgroundColor(Color.Pink)}
}@Component
struct Actor {build() {Row() {Text("哪吒2-饺子").fontColor(Color.White)}.backgroundColor(Color.Red).justifyContent(FlexAlign.Center).width(100).height(180)}
}