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%')
  }
}
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.