HarmonyOS 鸿蒙Next原生分割线有不一致的效果并且修改border后会消失

HarmonyOS 鸿蒙Next原生分割线有不一致的效果并且修改border后会消失 【问题描述】：使用鸿蒙原生分割线时发现，在添加了背景色和按压的状态下在真机上面线条有明显的不一致效果并且，将border中的bottom改成0.5后有的线条就会消失。使用的测试机是mate60，尝试使用noval14机型没有复现此问题，这是bug还是因为机型不同导致屏幕高度不同导致的？？

cke_2941.png cke_3689.jpeg


更多关于HarmonyOS 鸿蒙Next原生分割线有不一致的效果并且修改border后会消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

开发者您好，这边使用mate 60并没有出现该问题，使用的api20的版本，这边是否可以提供下可复现的demo和api版本呢？
使用代码如下：

@Entry
@Component
struct Index {
  @State list: number[] = [1, 2, 3, 4, 5]
  @Styles normalStyle() {
    .backgroundColor(Color.White)
  }

  @Styles pressedStyle() {
    .backgroundColor(Color.Red)
  }
  
  build() {
    Column() {
      List() {
        ForEach(this.list, (value: number, index: number) => {
          ListItem() {
            Column() {
              Text(value + '').stateStyles({
                normal: this.normalStyle,
                pressed: this.pressedStyle,
              })
                .height(40)
                .width('100%')
                .border({
                  width: {
                    bottom: 0.5
                  }
                })
                .backgroundColor(Color.Yellow)
            }
          }
        })
      }
    }
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next原生分割线有不一致的效果并且修改border后会消失的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


api是23

1、开发者你好，同样的代码不同设备显示效果，是因为设备像素密度不一样导致的。
2、https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-pixelroundforcomponent#常见问题
特定设备上出现像素取整异常的，需要增加border，修改 bottom: 1 即可正常显示边框

你好，一个原因可能是mate60系统版本过低， 建议升级到 6.0 以上。

Divider 分割线组件，如果出现分割线粗细不一或者消失的问题，请参考组件级像素取整常见问题。

或者增大分割线宽度。

cke_1745.png

其他参考：如何解决List组件部分分割线不显示的问题

会不会你mate60设置智能分辨率问题，试一下关闭试试

HarmonyOS 鸿蒙Next原生分割线效果不一致，源于不同组件（如Divider、List分割线）默认样式受主题、API版本影响。修改border后消失，是因为原生分割线本质为组件内置属性（如List的divider属性）或通过Canvas绘制，并非通过CSS border实现；直接修改border会覆盖或冲突导致渲染失效。请使用官方divider属性或自定义绘制。

这大概率是屏幕像素密度（dpi）与子像素渲染机制差异导致的渲染问题，并不是代码逻辑的 Bug。

核心原因如下：

  1. 0.5px 的物理适配问题：在 Mate 60 上，如果屏幕的 densityPixels（屏幕密度） 不是严格偶数倍，设置 0.5vp 或 0.5px 时，底层渲染引擎会进行取整。如果边框宽度经过换算后小于 1 个物理像素，线条就会因为跨像素显示失效而“消失”。Nova 14 复现不了，是因为两款机型的屏幕物理像素排列或缩放因子不同。

  2. 不一致效果：系统原生分割线默认往往采用极细的填充色块或哈发像素渲染（如 0.33px 蓝绿色偏移）。当你添加背景色或按压态时，改变了图层的合成方式，容易导致半透明像素与背景叠加计算出现偏差，视觉上产生粗细不均匀。

给你一个保证跨机型一致性的修复方案： 直接弃用 border 做分割线，改用 1px 高度（或 1vp 宽度）的组件来实现，并降低透明度来模拟“细线”效果。

// 通用分割线组件：规避 0.5px 跨机型渲染丢失
@Component
struct DividerLine {
  @Prop color: string = '#33182431' // 使用低透明度实现视觉效果
  build() {
    Row()
      .width('100%')
      .height(1) // 固定整数像素
      .backgroundColor(this.color)
  }
}

如果想保持原生分割线，必须放弃 0.5 这种浮点值，统一使用 1 (vp/px)，通过透明度来调整视觉粗细。

回到顶部