HarmonyOS GridItem之间有一条竖线

目前Grid没有专门的一个分割线设置。可以通过给GridItem设置边框来实现分割效果或者尝试使用Divider分隔器组件来设置。

1.Divider分隔器组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-divider-V5

2.添加border

@Entry
@Component
struct ChangeGridHeight {
  build() {
    Column() {
      Grid() {
        ForEach([1, 2, 3, 4, 5], (item: number, index: number) => {
          GridItem() {
            Column() {
              Text(item.toString())
                .width('100%')
                .height('25%')
                .backgroundColor('#ccc')
                .borderColor(Color.Black)
                .borderWidth('2px')
            }
          }.border({
            width: {
              bottom: 5,
            },
            color: {
              bottom: Color.Red,
            },
            style: {
              bottom: BorderStyle.Solid,
            }
          })
          .width('100%')
        })
      }
      .columnsTemplate('1fr')
    }.height('100%')
    .width('100%')
  }
}