四、多个组件的布局原创

亚鲁鲁666

发布于 2024-12-10 21:36

3175浏览

0收藏

线性布局

线性布局 ( LiearLayout ) 通过线性容器Row( )和Colnum( )构建

1.1 间距

在布局容器内，可以通过 space 属性设置布局主方向方向上子元素的间距，使各子元素在布局主方向上有等间距效果。

1.2主轴对齐方式

那个轴是主轴, 根据组件判断. Row( )横轴是主轴, Colnum( )纵轴是主轴. 组件的主轴方向可以是任意方向

属性：justifyContent()

参数：枚举FlexAlign

属性	描述
Start	首端对齐
Center	居中对齐
End	尾部对齐
Spacebetween	两端对齐子元素之间间距相等
SpaceAround	子元素两侧间距相等第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半
SpaceEvenly	相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样

四、多个组件的布局-鸿蒙开发者社区

import { colorSpaceManager } from '@kit.ArkGraphics2D';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column() {

        Row() {
          Text('组件1')
            .width(100)
            .backgroundColor(Color.Green)
            .border({ width: 1 })
          Text('组件2')
            .width(100)
            .backgroundColor(Color.Green)
            .border({ width: 1 })
          Text('组件3')
            .width(100)
            .backgroundColor(Color.Green)
            .border({ width: 1 })
        }.margin({top:10})
        .width('100%')
        .justifyContent(FlexAlign.Start)//左端对齐,默认
        .justifyContent(FlexAlign.Center)//中心对齐
        .justifyContent(FlexAlign.End)//右端对齐
        .justifyContent(FlexAlign.SpaceBetween)//两端对齐
        .justifyContent(FlexAlign.SpaceAround)//环绕对齐
        .justifyContent(FlexAlign.SpaceEvenly)//均匀对齐
      }
      .height('100%')
      .width('100%')
      .backgroundColor('#eee')
    }
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.

1.3交叉轴对齐方式

属性:alignItems

参数: 枚举类型VerticalAlign

注意:布局容器在交叉轴要有足够的空间, 否则无法生效.

Row组件默认在交叉轴子元素居中效果

四、多个组件的布局-鸿蒙开发者社区

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {

      Column() {
        Row() {
        Text('文本1')
          .backgroundColor(Color.Green)
        Text('文本1')
          .backgroundColor(Color.Grey)
        Text('文本1')
          .backgroundColor(Color.Pink)
      }
      .alignItems(VerticalAlign.Top)//交叉轴顶部对齐
      .alignItems(VerticalAlign.Center)//交叉轴中心对齐
      .alignItems(VerticalAlign.Bottom)//交叉轴底部对齐
      .justifyContent(FlexAlign.Center)
      .width('60%')
      .height('100%')
      .backgroundColor('#eee')
    }
    .height('100%')
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

1.4单个子元素交叉轴对齐方式

属性: alignSelf

参数: 枚举ItemAlign(Stretch拉伸,交叉轴拉伸效果)

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {

      Column() {
        Row() {
        Text('文本1')
          .backgroundColor(Color.Green)
        Text('文本1')
          .backgroundColor(Color.Grey)
          .alignSelf(ItemAlign.Auto)    //自适应
          .alignSelf(ItemAlign.Start)   //顶部对齐
          .alignSelf(ItemAlign.Center)  //居中对齐
          .alignSelf(ItemAlign.End)     //居低对齐
          .alignSelf(ItemAlign.Baseline)//基准线对齐
          .alignSelf(ItemAlign.Stretch) //拉伸满
        Text('文本1')
          .backgroundColor(Color.Pink)
      }
      .alignItems(VerticalAlign.Top)
      .alignItems(VerticalAlign.Center)
      .alignItems(VerticalAlign.Bottom)
      .justifyContent(FlexAlign.Center)
      .width('60%')
      .height('100%')
      .backgroundColor('#eee')
    }
    .height('100%')
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

1.5自适应缩放

用法: 设置layoutWeight属性的** 子元素** 与 兄弟元素, 会 按照权重 进行分主轴的空间,

语法: .layoutWeight(数字)

注意: 设置layoutWeight时要记得给父组件设置主轴空间大小, 因为父组件的主轴没有设置空间大小, 添加layoutWeight后会将父组件的主轴撑到最大, 常导致自己的兄弟组件被挤到屏幕外面去

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {

    Column() {
      Row() {
        Text('文本1')
          .backgroundColor(Color.Green)
        Text('文本1')
          .backgroundColor(Color.Grey)
          .layoutWeight(1)//剩余空间权重为1
        Text('文本1')
          .backgroundColor(Color.Blue)
          .layoutWeight(1)//
        Text('文本1')
          .backgroundColor(Color.Pink)
      }
      .width('100%')
      .height('50%')
      .backgroundColor('#eee')
    }
    .height('100%')
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

弹性布局( Flex )

Flex只提供弹性布局, 不提供滚动

Flex布局默认水平排列

调整主轴 direction: FlecDirection.xxx

对齐 Row 和 Column: 对齐方式是通过属性的方法 .justifyContent

Flex通过参数进行调整

Flex的渲染性能没有Row()和Column高

换行

参数: wrap记住这是参数

值: 枚举FlexWrap

Flex的参数wrap控制换行, 添加wrap后当Flex控制的子元素主轴尺寸之和大于容器的主轴尺寸时, 子元素进行换行

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    //FlexWrap.Wrap换行
    Flex({wrap:FlexWrap.Wrap}){
      Text('文本1')
        .backgroundColor(Color.Green)
      Text('文本1')
        .backgroundColor(Color.Grey)
      Text('文本1')
        .backgroundColor(Color.Blue)
      Text('文本1')
        .backgroundColor(Color.Red)
      Text('文本1')
        .backgroundColor(Color.Green)
      Text('文本1')
        .backgroundColor(Color.Grey)
      Text('文本1')
        .backgroundColor(Color.Blue)
      Text('文本1')
        .backgroundColor(Color.Red)
      Text('文本1')
        .backgroundColor(Color.Green)
      Text('文本1')
        .backgroundColor(Color.Grey)
      Text('文本1')
        .backgroundColor(Color.Blue)
      Text('文本1')
        .backgroundColor(Color.Red)
    }.width('100%')
    .height(80)
    .backgroundColor(Color.Pink)
    .margin({top:50})
    .padding(5)
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.

案例-微店商品

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column(){

       Flex({wrap:FlexWrap.Wrap}){
         Column({space:10}){
           Image($r('app.media.top1'))
             .width('100%')
           Text('[ 程序员必备 ] 最高版本-格子衫')
             .maxLines(1)
             .textOverflow({overflow:TextOverflow.Ellipsis})
             .fontSize(14)
           Row({space:10}){
             Text('¥666')
               .fontColor('#e7416f')
               .fontWeight(700)
               .fontSize(14)
             Text('销量666')
               .fontColor(Color.Grey)
               .fontSize(10)
           }.width('100%')
           .padding({left:3})
         }.margin('1.5%')
         .width('47%')

         Column({space:10}){
           Image($r('app.media.top1'))
             .width('100%')
           Text('[ 程序员必备 ] 最高版本-格子衫')
             .maxLines(1)
             .textOverflow({overflow:TextOverflow.Ellipsis})
             .fontSize(14)
           Row({space:10}){
             Text('¥666')
               .fontColor('#e7416f')
               .fontWeight(700)
               .fontSize(14)
             Text('销量666')
               .fontColor(Color.Grey)
               .fontSize(10)
           }.width('100%')
           .padding({left:3})
         }.margin('1.5%')
         .width('47%')


         Column({space:10}){
           Image($r('app.media.top1'))
             .width('100%')
           Text('[ 程序员必备 ] 最高版本-格子衫')
             .maxLines(1)
             .textOverflow({overflow:TextOverflow.Ellipsis})
             .fontSize(14)
           Row({space:10}){
             Text('¥666')
               .fontColor('#e7416f')
               .fontWeight(700)
               .fontSize(14)
             Text('销量666')
               .fontColor(Color.Grey)
               .fontSize(10)
           }.width('100%')
           .padding({left:3})
         }.margin('1.5%')
         .width('47%')


         Column({space:10}){
           Image($r('app.media.top1'))
             .width('100%')
           Text('[ 程序员必备 ] 最高版本-格子衫')
             .maxLines(1)
             .textOverflow({overflow:TextOverflow.Ellipsis})
             .fontSize(14)
           Row({space:10}){
             Text('¥666')
               .fontColor('#e7416f')
               .fontWeight(700)
               .fontSize(14)
             Text('销量666')
               .fontColor(Color.Grey)
               .fontSize(10)
           }.width('100%')
           .padding({left:3})
         }.margin('1.5%')
         .width('47%')


         Column({space:10}){
           Image($r('app.media.top1'))
             .width('100%')
           Text('[ 程序员必备 ] 最高版本-格子衫')
             .maxLines(1)
             .textOverflow({overflow:TextOverflow.Ellipsis})
             .fontSize(14)
           Row({space:10}){
             Text('¥666')
               .fontColor('#e7416f')
               .fontWeight(700)
               .fontSize(14)
             Text('销量666')
               .fontColor(Color.Grey)
               .fontSize(10)
           }.width('100%')
           .padding({left:3})
         }.margin('1.5%')
         .width('47%')


         Column({space:10}){
           Image($r('app.media.top1'))
             .width('100%')
           Text('[ 程序员必备 ] 最高版本-格子衫')
             .maxLines(1)
             .textOverflow({overflow:TextOverflow.Ellipsis})
             .fontSize(14)
           Row({space:10}){
             Text('¥666')
               .fontColor('#e7416f')
               .fontWeight(700)
               .fontSize(14)
             Text('销量666')
               .fontColor(Color.Grey)
               .fontSize(10)
           }.width('100%')
           .padding({left:3})
         }.margin('1.5%')
         .width('47%')

       }.width('100%')
        .height(260)

    }.width('100%')
    .height('100%')
    .padding({top:10,bottom:10})
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.

列表布局( List )

列表是一种容器，当列表项超过List容器组件大小时，可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集，例如图片和文本。

使用列表可以结构化显示、可滚动的信息。通过调整在 List 组件中listDirection属性, 可使子组件按垂直或者水平方向线性排列，默认是垂直方向。

垂直滚动列表

四、多个组件的布局-鸿蒙开发者社区

水平布局

四、多个组件的布局-鸿蒙开发者社区

List 表示列表容器，ListItem表示单个列表项，只能有一个子组件。

List列表布局基本语法

@Entry
@Component
struct Index {
  build() {
    Column() {
      //List()列表组件关键字
      List() {
        //表示单个列表项
        ListItem() {
          //ListItem内部只能包含一个子组件, 可以包含Row/Column
          Text('文字')
            .width(100)
            .height(40)
            .backgroundColor(Color.Pink)
                    Text('文字')
            .width(100)
            .height(40)
            .backgroundColor(Color.Pink)
        }.lanes(2,2)//属性lanes里面第一个属性是有几排或是几列, 
                    //第二个属性是在主轴方向上列表项间的间距
      }
        .width('100%')
        .height(200)
        .backgroundColor('#ccc')
    }
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

开发布局

3.2.1设置主轴方向

List组件主轴默认是垂直方向。

若是水平滚动列表场景，将 List 的 listDirection 属性设置为 Axis.Horizontal 即可实现。listDirection 默认为 Axis.Vertical，即主轴默认是垂直方向。

属性：listDirection()

参数：枚举 Axis

Vertical：垂直方向，默认值
Horizontal：水平方向

List() {
  listItem()
  ......
}
	.listDirection(Axis.Horizontal)1.
2.
3.
4.
5.

3.2.2设置交叉轴布局 - 列模式，列对齐方式

列模式

属性：lanes()

参数：

参数1：交叉轴方向列数
参数2：交叉轴方向列间距

List() {
  listItem()
  ......
} .lanes(3, 10)// 参数1：交叉轴方向列数，参数2： 交叉轴方向列间距。1.
2.
3.
4.

列对齐方式

List交叉轴方向宽度大于ListItem交叉轴宽度 *列数时，ListItem在List交叉轴方向的布局方式，默认为首部对齐。

属性：alignListItem()

参数：枚举 ListItemAlign

Start：首部对齐（默认）
Center：居中对齐
End：尾部对齐

List() {
  listItem()
  ......
}
	.alignListItem(ListItemAlign.Center)1.
2.
3.
4.
5.

自定义列表样式

3.3.1滚动条状态

属性：scrollBar()

参数：枚举 BarState

Off：不显示
On：常驻显示
Auto：按需显示（触摸时显示，2s 后消失）

List() {
  listItem()
  ......
}
	.scrollBar(BarState.Off)1.
2.
3.
4.
5.

3.3.2分割线样式

列表默认没有分割线

属性：divider()

参数：{ strokeWidth: 数字， color?: 'color', startMargin?: 数字, endMargin?: 数字 }

List() {
  listItem()
  ......
}
	.divider({
    strokeWidth: 1,
    color: Color.Orange,
    startMargin: 10,
    endMargin: 10
  })1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

List分组ListItemGroup

参数:

属性:divder

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  @Builder
  headerBuilder(){
    Text('我是头部')
  }

  @Builder
  footerBuilder(){
    Text('我是尾部')
  }

  build() {
    Column(){
      List(){
        ListItemGroup({
          header:this.headerBuilder(),
          footer:this.footerBuilder()
        }){
          ListItem(){
            Text('我是内容')
          }
          ListItem(){
            Text('我是内容')
          }
        }.divider({
          strokeWidth:2,
          color:Color.Pink,
          startMargin:10,
          endMargin:10
        })
      }
    }
    .height('100%')
    .width('100%')
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.

ListItemGroup的粘贴性标题

通过List组件的sticky属性，即可实现粘性标题

四、多个组件的布局-鸿蒙开发者社区

| sticky | StickyStyle | 配合ListItemGroup组件使用，设置ListItemGroup中header和footer是否要吸顶或吸底。
默认值：StickyStyle.None
该接口支持在ArkTS卡片中使用。
说明：
sticky属性可以设置为 StickyStyle.Header | StickyStyle.Footer 以同时支持header吸顶和footer吸底。

List(){
  
}
  // .sticky(StickyStyle.None) // 不吸附 默认值
  // .sticky(StickyStyle.Header) // 头部吸附
  // .sticky(StickyStyle. Footer) //  底部吸附，如果有的话1.
2.
3.
4.
5.
6.

代码控制List和ListItemGroup滚动

场景

实现步骤

关键步骤

创建控制器(ListScroller)对象
将控制器对象设置给List组件
调用控制器对象的方法, 实现滚动

参考代码

// 1. 创建控制器(ListScroller)对象
listScroller: ListScroller = new ListScroller()
// 2. 设置给 List 组件
List({ space: 20, scroller: this.listScroller }) {
  // ...
}


Button() {
  // ...
}
.onClick(() => {
  // 3. 调用控制器对象的方法，实现滚动
  this.listScroller.scrollToIndex(0)
})1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

参数

参数名	参数类型	必填	参数描述
index	number	是	要滑动到的目标元素所在的ListItemGroup在当前容器中的索引值。
smooth	boolean	否	设置滑动到列表项在列表中的索引值时是否有动效，true表示有动效，false表示没有动效。默认值：false。
align	ScrollAlign	否	指定滑动到的元素与当前容器的对齐方式。默认值：ScrollAlign.START。

事件-onScrollIndex

功能描述:

有子组件划入或画出List显示区域时触发, 可以获取子组件的下标

编程中的事件是指在程序运行过程中，‌某个特定的操作或状态发生时所触发的一段代码或函数。‌

名称	功能描述
onScrollIndex(event: (start: number, end: number, center10+: number) => void)	有子组件划入或划出List显示区域时触发。从API version 10开始，List显示区域中间位置子组件变化时也会触发。计算索引值时，ListItemGroup作为一个整体占一个索引值，不计算ListItemGroup内部ListItem的索引值。 - start: List显示区域内第一个子组件的索引值。 - end: List显示区域内最后一个子组件的索引值。 - center: List显示区域内中间位置子组件的索引值。

核心代码:

List(){
      // ...
    }
    .onScrollIndex((index: number) => {
      console.log('index:', index)
    })1.
2.
3.
4.
5.
6.

网格布局( Grid/GridItem )

Grid网格布局

如果布局是由多行和多列所组成、行列可能需要合并、滚动，适合采用网格布局来实现。

每一个Griditem中只能有一个子组件

四、多个组件的布局-鸿蒙开发者社区

例如:

四、多个组件的布局-鸿蒙开发者社区

固定行列

Grid() {
  GridItem(){
    // 展示的内容放在这里, 一个GridItem只能有一个子元素
  }
  GridItem(){
    // 展示的内容放在这里
  }
}.columnTemplate1.
2.
3.
4.
5.
6.
7.
8.

说明

:::info

Grid的子组件必须是GridItem组件，需要展示的内容设置在 GridItem 内部既可
GridItem 只能有一个子组件
宽高分为 2 种情况：

Grid组件设置了宽高属性，则其尺寸为设置值。
Grid组件没有设置宽高属性，Grid组件的尺寸默认适应其父组件的尺寸。

:::

常用属性

属性	值	描述
columnsTemplate	string	设置当前网格布局列的数量或最小列宽值例如：'1fr 1fr 2fr'
rowsTemplate	string	设置当前网格布局行的数量或最小行高值例如：'1fr 1fr 2fr'
columnsGap	长度	列间距
rowsGap	长度	行间距

@Entry
@Component
struct Index {
  build() {
    Column() {
      //Grid布局的基本使用:  规则的行列布局中非常常见,  3行4列
      Grid() {
        //ForEach渲染控制
        ForEach([1,2,3,4,5,6,7,8,9,10,11,12],()=>{
          GridItem() {
            Column(){

            }.width('100%').height('100%')
            .backgroundColor(Color.Green)
            .border({width:1})
          }
        })
      }.columnsTemplate('1fr 1fr 1fr 1fr')//有多少列,每一行占的权重是多少
      .rowsTemplate('1fr 1fr 1fr 1fr')//有多少行,每一行占的权重是多少
      .columnsGap(5)//列间距
      .rowsGap(5)//行间距
      .width('100%')
      .height(500)
      .backgroundColor(Color.Pink)

    }
    .width('100%')
    .height('100%')
    .backgroundColor('#eee')
    .padding({top:15,right:15,left:15})
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.

合并行列

四、多个组件的布局-鸿蒙开发者社区

如果要实现这个效果通过 GridItem 的如下属性即可:

属性	描述
rowStart	指定当前元素起始行号
rowEnd	指定当前元素终点行号
columnStart	指定当前元素起始列号
columnEnd	指定当前元素终点列号

import { ifaa } from '@kit.OnlineAuthenticationKit'

//合并行或列分两步
//1.先找到要合并的起始GridItem
//2.再对起始GridItem的添加要合并的起始行/列,终点行/列

@Entry
@Component
struct GridPage03 {
  // 生成 12 个元素的数组
  //根据对象快速生成一个包含12个元素的数字类型未定义(也就是未初始化)的数组
  //{length:12}是一个对象,  Array.from()是根据对象生成数组的语句
  nums: number[] = Array.from({ length: 12 })

  build() {
    Grid() {
      ForEach(this.nums, (item: number, index: number) => {
        if(index == 2){
          GridItem() {
            Text(index + '')
              .fontColor(Color.White)
              .fontSize(30)
          }
          .backgroundColor('#9dc3e6')
          .columnStart(3)
          .columnEnd(4)
        }else if (index == 3){
          GridItem() {
            Text(index + '')
              .fontColor(Color.White)
              .fontSize(30)
          }
          .backgroundColor('#9dc3e6')
          .rowStart(2)
          .rowEnd(3)
        }else if(index == 7){
          GridItem() {
            Text(index + '')
              .fontColor(Color.White)
              .fontSize(30)
          }
          .backgroundColor('#9dc3e6')
          .columnStart(2)
          .columnEnd(4)

        }else{
          GridItem() {
            Text(index + '')
              .fontColor(Color.White)
              .fontSize(30)
          }
          .backgroundColor('#9dc3e6')
        }
      })
    }
    .columnsTemplate('1fr 1fr 1fr 1fr')
    .rowsTemplate('1fr 1fr 1fr')
    .width('100%')
    .height(260)
    .rowsGap(10)
    .columnsGap(10)
    .padding(10)
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.

@Entry
@Component
struct Index {
  nums: number[] = Array.from({length: 12})
  build() {
    Grid() {
      ForEach(this.nums, (item: number, index: number) => {
        if (index == 1) {
          GridItem() {
            Text(`${index}`)
          }
          .backgroundColor(Color.Pink)
          .rowStart(1)
          .rowEnd(2)
        } else if (index == 6) {
          GridItem() {
            Text(`${index}`)
          }
          .backgroundColor(Color.Pink)
          .columnStart(6)
          .columnEnd(7)
        } else {
          GridItem() {
            Text(`${index}`)
          }
          .backgroundColor(Color.Pink)
        }
      })
    }
      .rowsTemplate('1fr 1fr 1fr 1fr')
      .columnsTemplate('1fr 1fr 1fr')
      .rowsGap(10)
      .columnsGap(10)
      .width('100%')
      .height(300)
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.

设置滚动

使用属性控制滚动

水平滚动：设置的是rowsTemplate，Grid的滚动方向为水平方向。
垂直滚动：设置的是columnsTemplate，Grid的滚动方向为垂直方向

@Entry
@Component
struct Index {
  nums: number[] = Array.from({length: 20})
  build() {
    Grid() {
      ForEach(this.nums, (item:number, index:number) => {
        GridItem() {
          Text(`${index}`)
            .width('100%')
            .height('100%')
            .backgroundColor(Color.Pink)
        }
        .width('25%')
        .height('30%')
      })
    }
      .width('100%')
      .height(300)
      .columnsGap(10)
      .rowsGap(10)
      // .columnsTemplate('1fr 1fr 1fr')
      .rowsTemplate('1fr 2fr 1fr')
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

使用代码控制滚动

核心步骤：

创建 Scroller 对象
设置给 Grid
调用 Scroller 对象的 scrollPage 方法

// 创建 Scroller 对象
scroller: Scroller = new Scroller()

// 设置给 Grid
 Grid(this.scroller) {
   // ...
 }

// 通过代码控制
this.scroller.scrollPage({
  next:true // 下一页
  next:false // 上一页
})1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

自定义滚动条

定义有两种方法：

使用提供的属性调整（可调整属性有限）
使用 ScrollBar 组件自定义（可定制性高）

使用属性调整

属性名	类型	说明
scrollBar	BarState	设置滚动条状态。默认值：BarState.auto BarState.off 关闭 BarState.on 常驻 BarState.auto 按需显示
scrollBarColor	string	number
scrollBarWidth	string	number

使用ScrollBar组件自定义

核心步骤:

和 Grid 共用同一个 Scroller
创建 ScrollBar 组件并设置属性

参数名	参数类型	必填	参数描述
scroller	Scroller	是	可滚动组件的控制器。用于与可滚动组件进行绑定。
direction	ScrollBarDirection	否	滚动条的方向，控制可滚动组件对应方向的滚动。默认值：ScrollBarDirection.Vertical
state	BarState	否	滚动条状态。默认值：BarState.Auto

// 和 Grid 共用同一个 Scroller
scroller: Scroller = new Scroller()

// 和 Grid 共用同一个 Scroller
Grid(this.scroller){
  // 略
}

// 和 Grid 共用同一个 Scroller
// 创建 ScrollBar 组件并设置属性
ScrollBar({
  scroller: this.scroller,
  direction: ScrollBarDirection.Horizontal // 方向
}) {
  // 滚动内容 设置外观即可
  Text()
}
// 设置外观1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

@Entry
@Component
struct GridDemo5 {
  nums: number[] = Array.from({ length: 200 })

  sc:Scroller = new Scroller()

  build() {
    Column() {

      Grid(this.sc) {
        ForEach(this.nums, (item: number, index: number) => {
          GridItem() {
            Text(index + 1 + '')
          }
          .backgroundColor('#0094ff')
          .width('25%')
        })
      }
      .padding(10)
      .height(450)
      .rowsGap(10)
      .columnsGap(10)
      .rowsTemplate('1fr 1fr 1fr 1fr')//水平滚动
      //1.先把默认的滚动条关掉
      .scrollBar(BarState.Off)
      //2.再给滚动条添加样式
      ScrollBar({
        //2.1 精准定位要更改的滚动条样式
        scroller:this.sc,
        //2.2 设置自定义滚动条方向
        direction: ScrollBarDirection.Horizontal
      }){
        //2.3给滚动条添加样式
        Text('')
          .width(20)
          .height(5)
          .backgroundColor(Color.Red)
      }.backgroundColor(Color.Grey)

      Row() {
        Button('上一页')
          .width(100)

          .onClick(() => {
            this.sc.scrollPage({
              next:false
            })
          })
        Button('下一页')
          .width(100)
          .onClick(() => {
            this.sc.scrollPage({
              next:true
            })
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)
    }
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.

分类

标签

已于2024-12-12 22:47:01修改

51CTO

51CTO博客

51CTO学堂

四、多个组件的布局 原创

线性布局

1.1 间距

1.2主轴对齐方式

1.3交叉轴对齐方式

1.4单个子元素交叉轴对齐方式

1.5自适应缩放

弹性布局( Flex )

换行

案例-微店商品

列表布局( List )

List列表布局基本语法

开发布局

3.2.1设置主轴方向

3.2.2设置交叉轴布局 - 列模式，列对齐方式

列模式

列对齐方式

自定义列表样式

3.3.1滚动条状态

3.3.2分割线样式

List分组ListItemGroup

ListItemGroup的粘贴性标题

代码控制List和ListItemGroup滚动

场景

实现步骤

参数

事件-onScrollIndex

网格布局( Grid/GridItem )

Grid网格布局

固定行列

合并行列

设置滚动

使用属性控制滚动

使用代码控制滚动

自定义滚动条

使用属性调整

使用ScrollBar组件自定义

目录

订阅鸿蒙技术特刊，精选内容抢先看

四、多个组件的布局原创