HarmonyOS鸿蒙Next中button添加背景图在圆角的情况下，怎么保持拉伸正常？

HarmonyOS鸿蒙Next中button添加背景图在圆角的情况下，怎么保持拉伸正常？ 我想在按钮上添加一个背景是白色，有灰色边框的背景图

导入这样子的图片：

cke_8101.png

实现这样子效果：

cke_216.png

但是我写了之后，会导致旁边的边没有了，只剩下直线，请问这个应该怎么能实现图上的效果呢？

Button() {
  Stack() {
  }
}
.backgroundColor(Color.White)
.type(ButtonType.ROUNDED_RECTANGLE)
.width(380)
.height(68)
.backgroundImage($r("app.media.image1"))
.backgroundImageSize({ width: 380, height: 68 })
.backgroundImageResizable({slice: {left: 5, right: 5, top: 5, bottom: 5}})

现在效果是这样子：

cke_3598.jpeg


更多关于HarmonyOS鸿蒙Next中button添加背景图在圆角的情况下，怎么保持拉伸正常？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

你要不要参考一下这个：

如何解决Text组件无法根据内容自动拉伸背景图片的问题

把里面的文本换成button组件就行了应该

更多关于HarmonyOS鸿蒙Next中button添加背景图在圆角的情况下，怎么保持拉伸正常？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


Image组件提供与点九图相同功能的API设置，通过设置resizable属性来配置ResizableOptions，即图像拉伸时的大小调整选项。ResizableOptions的参数slice包含top、left、bottom和right四个属性，分别表示图片在上下左右四个方向拉伸时保持不变的距离。

https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs/faqs-arkui-208

@Entry
@Component
struct NineMapPrinciple {
  build() {
    Row() {
      Image($r('app.media.startIcon'))
        .resizable({ slice: { top: 10, left: 10, bottom: 50, right: 50 } })
    }
    .height('50%')
  }
}

cke_507.png

按照这样子设置的，但是圆角的部分不见了…，

你要不要试试把stack放在外面，button和image放在stack里面，然后限制stack的宽高，button和image都是100%填充？

尝试了，但是效果与之前相同，

在HarmonyOS Next中，为Button设置圆角背景图时，需使用ohos:padding和ohos:corner_radius属性配合。将背景图资源放入graphic文件夹，创建XML背景文件，定义corner_radius与Button圆角一致。使用background_element引用该文件，确保图片缩放模式为stretch，避免使用clip或center等模式。系统会自动处理拉伸，保持圆角区域不变形。

在HarmonyOS Next中，使用圆角按钮添加背景图时，需要正确设置九宫格拉伸参数来保持边框完整。从你的代码看，问题在于backgroundImageResizable的slice值设置不当。

建议调整slice值为图片实际边框宽度。根据你提供的图片，边框较细，可以尝试：

.backgroundImageResizable({slice: {left: 2, right: 2, top: 2, bottom: 2}})

同时确保：

  1. 背景图尺寸与按钮尺寸匹配
  2. 图片本身包含完整的圆角和边框
  3. 九宫格参数要小于图片圆角半径

如果仍有问题，可以微调slice值或检查图片资源是否包含完整的边框设计。

回到顶部