HarmonyOS 鸿蒙Next GridItem组件使用ColumnSplit/RowSplit添加边框线时，会出现灰色竖线，然后消失

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

HarmonyOS 鸿蒙Next GridItem组件使用ColumnSplit/RowSplit添加边框线时，会出现灰色竖线，然后消失

GridItem组件使用ColumnSplit()/RowSplit()添加边框线时，会出现灰色竖线，然后消失。使用Previewer，模拟器，还有真机，都是这种情况。请教一下，这是什么情况？

cke_143.png

代码如下：

深色代码主题
复制
@Component
struct GridItemView {
build() {
Grid() {
ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item: number) => {
GridItem() {
RowSplit() {
Text()
.width(40)
.height(40)
}
.border({ width: 1, color: ‘#F1F3F5’ })
}
})
}
.columnsTemplate(‘1fr 1fr 1fr’)
.width(120)
.height(120)
.borderWidth(2)
}
}


更多关于HarmonyOS 鸿蒙Next GridItem组件使用ColumnSplit/RowSplit添加边框线时，会出现灰色竖线，然后消失的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
4 回复

明白了，这样的话也可以通过设置.scrollBar的值为Barstatus.off来关闭滚动条。谢谢你！

更多关于HarmonyOS 鸿蒙Next GridItem组件使用ColumnSplit/RowSplit添加边框线时，会出现灰色竖线，然后消失的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


不客气，问题解决了的话帮忙点个已采纳吧，感谢！

这个是滚动条，你把鼠标或者手势移动上去进行滑动这个滚动条会出现。出现滚动条的原因是 border 的宽度也是算做内容的宽度的，所以要把 Text 的 width 和 height 都修改为 38 才不会出现滚动条。代码如下：

深色代码主题
复制
@Component
struct GridItemView {
  build() {
    Grid() {
      ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item: number) => {
        GridItem() {
          RowSplit() {
            Text()
              .width(38)
              .height(38)
          }

      .<span class="hljs-title function_">border</span>({ <span class="hljs-attr">width</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">color</span>: <span class="hljs-string">'#F1F3F5'</span> })
    }

  })
}
.<span class="hljs-title function_">columnsTemplate</span>(<span class="hljs-string">'1fr 1fr 1fr'</span>)
.<span class="hljs-title function_">width</span>(<span class="hljs-number">120</span>)
.<span class="hljs-title function_">height</span>(<span class="hljs-number">120</span>)
.<span class="hljs-title function_">borderWidth</span>(<span class="hljs-number">2</span>)

}
}

在HarmonyOS鸿蒙系统中，使用Next GridItem组件时，若通过ColumnSplit或RowSplit属性尝试添加边框线，遇到灰色竖线短暂出现后消失的问题，通常是因为渲染机制或属性设置不当导致的。

具体原因可能包括：

  1. 渲染时序问题：GridItem组件在布局和渲染时，如果ColumnSplit或RowSplit属性的处理与组件的其他渲染逻辑存在时序冲突，可能导致边框线（灰色竖线）的短暂显示和消失。

  2. 属性覆盖：检查是否有其他样式或属性（如背景色、边距等）覆盖了ColumnSplit或RowSplit的边框效果。

  3. 版本问题：使用的HarmonyOS SDK版本可能存在bug，导致特定属性的表现异常。

解决方法可以尝试：

  • 确保属性设置正确：仔细核对ColumnSplit和RowSplit属性的设置，确保无误。
  • 更新SDK：检查并更新到最新的HarmonyOS SDK版本，看是否有修复相关问题的更新。
  • 调整布局逻辑：尝试调整GridItem的布局逻辑，看是否能避免边框线的异常显示。

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

回到顶部