鸿蒙5：其他布局容器

发布于：2025-06-29 ⋅ 阅读:(24) ⋅ 点赞:(0)

注意：博主有个鸿蒙专栏，里面从上到下有关于鸿蒙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
  @Component
  struct 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
  @Component
  struct 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
  @Component
  struct 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
  @Component
  struct 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
  @Component
  struct 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
  @Component
  struct 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
  @Component
  struct 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
  @Component
  struct 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
  @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)
          .edgeEffect(EdgeEffect.Spring) // 设置滑动效果

        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)
    }
  }

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

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)
  }
}

在arkUI中，我们的内容如果超过了屏幕显示，则不会显示滚动条，需要使用Scroll来包裹

该组件滚动的前提：

1.设置了滚动方向

2.子组件大于容器Scroll大小，否则不能滚动

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布