HarmonyOS 鸿蒙Next Grid怎么根据item设置分割线

发布于 1周前 作者 bupafengyu 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Grid怎么根据item设置分割线 目前设置方式使用 .columnsGap(1).rowsGap(1) 设置后,用背景色代替分割线后,如果 item 个数没整行铺满会把背景色颜色出来

@Extend(Text)
function itemStyle(size:number) {
  .width('100%')
  //.height(120)
  .fontSize(size)
  .fontColor($r('app.color.scaffold_fg_dark_2'))
  .textAlign(TextAlign.Center)
  //.backgroundColor($r('app.color.color_page_background'))
}

@Entry
@Component
export struct RecordManagePage {
  private itemsText: string[] = [];

  aboutToAppear() {
    for (let i = 1; i < 9; i++) {
      this.itemsText.push(i.toString());
    }
  }

  build() {
    Row() {
      Column() {
        Grid() {
          ForEach(this.itemsText, (item: string, index) => {

            GridItem() {
              Column() {
                Text("item").itemStyle(14)
                Text("item").itemStyle(11)
              }.width('100%')
              .justifyContent(FlexAlign.Center)
              .height(120)
              .backgroundColor(Color.White)
            }
            //.borderColor($r('app.color.scaffold_fg_dark_4')).borderWidth(0.5)
          })
        }
        .columnsTemplate('1fr 1fr 1fr')
        //.padding(1)
        .height(363)
        .columnsGap(1)
        .rowsGap(1)
        .draggable(true)
        .margin({ top:20 })
        .backgroundColor($r('app.color.scaffold_fg_dark_7'))

      }
      .width('100%')
      .height('100%')
      .backgroundColor($r('app.color.color_page_background'))

    }
  }
}

更多关于HarmonyOS 鸿蒙Next Grid怎么根据item设置分割线的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

以Grid的背景色作为分割线,当item个数没整行铺满,剩下的会显示Grid的背景色。解决方案如下:

  1. Grid的背景色和最外层的父组件背景色一致。

  2. 设置Grid的高度铺满整个屏幕,没铺满时背景色和分割线颜色一致。

也可以不设置分割columnsGap()rowsGap(),在每个item的底部和右侧上面添加线条(view等都可),用这个来作为分割线。

更多关于HarmonyOS 鸿蒙Next Grid怎么根据item设置分割线的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS(鸿蒙)系统中,为Next Grid组件的item设置分割线,可以通过自定义Item布局并在其中添加分割线视图(如Divider)来实现。具体步骤如下:

  1. 定义Item布局:在XML布局文件中,为Next Grid的item定义一个自定义布局。在该布局中,除了包含需要展示的内容外,还应添加一个分割线视图(Divider)。

  2. 设置Divider属性:在自定义Item布局中,设置Divider的宽度、高度、颜色等属性,以满足你的需求。Divider通常设置为水平方向,并设置合适的宽度和颜色。

  3. 绑定数据:在Java或Kotlin代码中,将数据源绑定到Next Grid组件,并确保每个item都使用你定义的自定义布局进行渲染。

  4. 调整布局:根据需要,调整Item布局中的内容和Divider的位置,以确保分割线能够正确地显示在item之间。

  5. 运行并测试:运行你的应用,查看Next Grid组件的item是否正确地显示了分割线。

请注意,由于HarmonyOS系统的UI组件和布局方式可能与Android有所不同,因此在实际开发中,需要参考HarmonyOS的官方文档和API指南,以确保正确地实现所需的UI效果。

如果问题依旧没法解决请联系官网客服, 官网地址是 https://www.itying.com/category-93-b0.html

回到顶部