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

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

3 回复

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

参考如下demo:

@Entry
@Component
struct Indexdfgdgfh {
  @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中对于网格布局如何实现自定义的分割线？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，可以通过GridContainer组件实现网格布局。要自定义分割线，可以使用GridContainer的divider属性，设置分割线的样式、颜色和宽度。例如，通过divider属性指定Line组件，并设置其strokeWidth和color属性来定义分割线的粗细和颜色。具体实现代码示例如下：

GridContainer({ columns: 3, divider: { strokeWidth: 2, color: Color.Black } }) {
  // 网格内容
}

通过这种方式，可以灵活地自定义网格布局的分割线样式。

在HarmonyOS Next中实现网格布局自定义分割线，可以通过以下方式实现：

  1. 使用Grid容器结合Divider组件：
Grid() {
  // 网格内容项...
}
.columnsGap(10) // 列间距
.rowsGap(10)    // 行间距
.divider({
  strokeWidth: 2,
  color: Color.Blue,
  startMargin: 10,
  endMargin: 10
})
  1. 完全自定义实现：
  • 通过Grid的rowsTemplate和columnsTemplate定义网格结构
  • 在适当位置添加单独的分割线View：
Grid() {
  // 内容单元格
  ForEach(this.data, (item) => {
    GridItem() {
      // 内容
    }
  })
  
  // 自定义分割线
  this.buildDividers()
}
.columnsTemplate("1fr 1px 1fr") // 示例：中间1px作为分割线
.rowsTemplate("1fr 1px 1fr")
  1. 样式自定义参数：
  • strokeWidth：线宽
  • color：颜色
  • startMargin/endMargin：起始/结束边距
  • vertical/horizontal：方向控制

注意：HarmonyOS Next的分割线样式支持通过链式调用进行灵活配置，开发者可以根据实际需求选择内置Divider或完全自定义实现方式。

回到顶部