HarmonyOS 鸿蒙Next border的width属性小于0.3就不显示，我需要width：0.15请问怎么解决

发布于 1周前 作者 htzhanglong 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next border的width属性小于0.3就不显示，我需要width：0.15请问怎么解决

@Entry
@Component
struct Index {
@State message: string = ‘Hello World’;


build() {
Row() {
Column() {
Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)
}.height(‘50%’).width(‘50%’).border({ color: “#eaeaea”, width: 0.3 })
}.width(‘100%’).alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center).height(‘100%’)
}
}

上面的代码要咋修改

Harmonyos Next教程
3 回复
可以使用相对布局制作一个比目标组件稍大的背景，并将目标组件叠加在背景上，实现类边框效果。

参考代码：

[@Entry](/user/Entry)
[@Component](/user/Component)
struct BorderExample3 {
  [@State](/user/State) textWidth: Length = 0;
  [@State](/user/State) textHeight: Length = 0;
  private textBorderWidth: number = 0.15
  build() {
    RelativeContainer() {
      // 背景
      Text('')
        .width(this.textBorderWidth * 2 + (this.textWidth as number))
        .height(this.textBorderWidth * 2 + (this.textHeight as number))
        .backgroundColor(Color.Black)
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Top },
          left: { anchor: '__container__', align: HorizontalAlign.Start }
        })
        .id("back1")
      // 文本
      Text('一二三一二三一二三一二三一二三一二三一二三一二三')
        .fontSize(30)
        .onAreaChange((oldValue: Area, newValue: Area) => {
          this.textWidth = newValue.width
          this.textHeight = newValue.height
        })
        .margin({ top: this.textBorderWidth, left: this.textBorderWidth })
        .width(200)
        .backgroundColor(Color.White)
        .alignRules({
          top: { anchor: "back1", align: VerticalAlign.Top },
          left: { anchor: "back1", align: HorizontalAlign.Start },
        })
        .id("text1")
    }
    .width('100%').height('100%')
    .margin({ left: 50 })
  }
}
有显示啊，换个红色试试？

在HarmonyOS开发中，遇到border的width属性小于0.3就不显示的问题，这通常是由于系统或框架对边框宽度的最小渲染单位有所限制。为了处理这种情况，你可以尝试以下几种方法：

  1. 调整单位：尝试使用不同的单位来定义边框宽度，比如使用px（像素）代替你当前可能使用的dp或sp单位，因为px单位在屏幕上具有更精确的表示。

  2. 使用伪元素：如果直接设置边框不可行，可以考虑使用CSS伪元素（如::before或::after）来模拟边框效果，并通过调整这些伪元素的尺寸和样式来达到所需的视觉效果。

  3. 图形替代：对于极细的边框需求，如果上述方法都无法满足，可以考虑使用SVG图形或其他图像资源来模拟边框，通过调整图像资源的尺寸和透明度来达到目标效果。

  4. 系统限制确认：确认这是否是HarmonyOS系统的固有限制，如果是，可能需要等待系统更新或寻找官方提供的解决方案。

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

回到顶部