HarmonyOS 鸿蒙Next中对于网格布局Grid如何实现自定义的分割线？

HarmonyOS 鸿蒙Next中对于网格布局Grid如何实现自定义的分割线？

3 回复

在griditem中添加自定义的分隔符。

参考如下demo:

@Entry
@Component
struct Index {
  @State data: string[][] = []
  @State colNum: number = 2

  getData() {
    this.data = []
    let arr: string[] = []
    for (let index = 0; index < 20; index++) {
      arr.push(`第${index}项`)
    }

    let arr2: string[] = []
    arr.forEach((item, index) => {
      arr2.push(item)
      if (index % this.colNum == this.colNum - 1) {
        this.data.push(arr2)
        arr2 = []
      }
    })
  }

  aboutToAppear(): void {
    this.getData()
  }

  build() {
    Column() {
      Column() {
        ForEach(this.data, (item: string[], strArrIndex) => {
          Row() {
            ForEach(item, (str: string, strIndex) => {
              Column() {
                Text(str)
              }
              .alignItems(HorizontalAlign.Center)
              .justifyContent(FlexAlign.Center)
              .layoutWeight(1)
              if (strIndex < item.length - 1) {
                Divider()
                  .vertical(true)
                  .padding({
                    top: 10,
                    bottom: 10
                  })
              }
            })
          }
          .width("100%")
          .height(40)
          .border({
            width: {
              bottom: strArrIndex + 1 === this.data.length ? 0 : 1
            }
          })
        })
      }
      .width("100%")
      .borderRadius(5)
      .backgroundColor(Color.Pink)
      .padding({
        left: 20,
        right: 20
      })

      Button('变成3列').onClick((event: ClickEvent) => {
        this.colNum = 3
        this.getData()
      })
    }
    .height("100%")
    .width("100%")
    .padding({
      left: '10%',
      right: '10%'
    })
  }
}

更多关于HarmonyOS 鸿蒙Next中对于网格布局Grid如何实现自定义的分割线？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中实现Grid自定义分割线，需使用GridContainer组件。通过gridShown属性控制分割线显示，使用divider参数配置样式。示例代码：

GridContainer({ columnsTemplate: "1fr 1fr", rowsTemplate: "1fr 1fr" })
  .divider({
    strokeWidth: 2,
    color: Color.Blue,
    startMargin: 10,
    endMargin: 10
  })

其中strokeWidth控制线宽，color设置颜色，startMargin/endMargin调整边距。网格行列间距通过columnsGap/rowsGap属性单独配置。

在HarmonyOS Next中，可以通过Grid组件的自定义样式来实现网格分割线。以下是两种常用方法：

  1. 使用Grid的rowGap和columnGap属性结合背景色：
Grid() {
  // 网格内容...
}
.rowGap(10) // 行间距
.columnGap(10) // 列间距
.backgroundColor('#ccc') // 作为分割线颜色
  1. 更灵活的方式是使用GridItem的border属性：
Grid() {
  ForEach(this.data, (item) => {
    GridItem() {
      // 内容...
    }
    .border({
      right: { width: 1, color: '#ddd' },
      bottom: { width: 1, color: '#ddd' }
    })
  })
}

注意：Grid组件本身不直接提供分割线属性，需要通过上述方式间接实现。如需更复杂的分割线效果，建议结合Stack布局进行叠加实现。

回到顶部