HarmonyOS鸿蒙Next中带凸起的边框该怎么实现

HarmonyOS鸿蒙Next中带凸起的边框该怎么实现

像下面这种文本，边框顶上有一个小三角的凸起效果该怎么实现：

cke_1280.png

20250516补充：

已按照采纳答案中的代码实现效果：

cke_4185.png


更多关于HarmonyOS鸿蒙Next中带凸起的边框该怎么实现的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

可以理解为凸起的那部分是一个容器覆盖到底部容器，通过背景来处理border。

@ComponentV2
export struct A{
  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Column() {
      }
      .width(200)
      .height(100)
      .borderWidth(1)
      .borderRadius(10)

      Column() {
      }
      .width(10)
      .height(10)
      .borderWidth({ left: 1, top: 1 })
      .backgroundColor(Color.White)
      .margin({ top: -5, left: 20 })
      .rotate({
        x: 0,
        y: 0,
        z: 1,
        centerX: '50%',
        centerY: '50%',
        angle: 45
      })
    }
  }
}

更多关于HarmonyOS鸿蒙Next中带凸起的边框该怎么实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


非常感谢，已实现，

是不是这个。

气泡提示（Popup）-使用弹窗-UI开发 (ArkTS声明式开发范式)-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

组件shadow属性，

示例

<div class="shadow-example">
    <p>这是一个带有阴影效果的元素。</p>
</div>

样式

.shadow-example {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 20px;
    background-color: #fff;
}

边框阴影啊，

暗色代码主题

  • 基本信息

  • 名称: 示例名称

  • 版本: v1.0.0

  • 日期: 2023-04-01

  • 描述: 这是一个示例描述，用于展示如何将HTML转换为Markdown。

在HarmonyOS鸿蒙Next中，实现带凸起的边框可以通过使用ShapeElement和ElevationEffect组件。ShapeElement用于定义边框的形状，而ElevationEffect可以为边框添加凸起效果。通过设置ElevationEffect的elevation属性，可以调整凸起的高度。具体实现时，将ShapeElement作为背景，并应用ElevationEffect即可实现带凸起的边框效果。

在HarmonyOS Next中实现带凸起的边框效果，可以通过自定义Shape组件结合Path绘制实现。以下是简洁的实现方案：

  1. 使用Shape组件作为容器：
Shape() {
  Path()
    .width(300)
    .height(100)
    .commands('M0 20 L15 0 L300 0 L300 100 L0 100 Z')
    .fill(Color.White)
    .stroke(Color.Gray)
}
  1. 关键点说明：
  • commands中使用SVG路径语法绘制
  • M0 20：移动到起始点(0,20)
  • L15 0：画线到三角顶点(15,0)
  • L300 0：画线到右上角
  • L300 100：画线到右下角
  • L0 100 Z：闭合路径
  1. 调整参数：
  • 修改L15 0中的15可调整三角凸起宽度
  • 修改起始点M0 20的Y值可调整三角高度
  1. 添加内容：
Shape() {
  // 同上Path代码
}.overlay(
  Text('内容文本')
    .padding(10)
)

这种方法性能较好，且支持动态调整凸起大小和位置。

回到顶部