设置背景图如何让背景图四周不拉伸,中间拉伸

给一个row设置了背景图,但是需要背景图四周不拉伸,只拉伸中间区域。

HarmonyOS
2024-09-23 12:10:17
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
zbw_apple

Image组件新增了resizable属性设置图像拉伸时可调整大小的图像选项。链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-service-widget-basic-image-V5

demo代码如下,可以实现背景图只拉伸中间的效果:

@Entry  
@Component  
struct Index {  
  @State tipsStr: string = 'hello world11111111111111'  
  
  build() {  
    Flex({ direction: FlexDirection.Column }) {  
      Text(this.tipsStr)  
        .fontSize(20)  
        .fontColor(0xdc6e1d)  
        .margin({ top: 10 })  
        .padding({ top: 10, left: 10, right: 10 })  
        .background(this.createBackgroundImg())  
  
      TextInput({ text: $$this.tipsStr }).margin({ top: 20 })  
    }  
  }  
  
  @Builder createBackgroundImg() {  
    Image($r('app.media.text'))  
      .objectFit(ImageFit.Fill)  
      .width("100%")  
      .height("100%")  
      .resizable({ slice: { top: 10, left: 10, bottom: 10, right: 10 } })  
  }  
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
分享
微博
QQ
微信
回复
2024-09-23 17:54:49
相关问题
HarmonyOS 如何背景图居中
680浏览 • 1回复 待解决
HarmonyOS 对于图片或者背景图拉伸
608浏览 • 1回复 待解决
HarmonyOS 设置冷启动的背景图
1274浏览 • 1回复 待解决
HarmonyOS 启动页背景图适配
743浏览 • 1回复 待解决
HarmonyOS 文字背景局部拉伸问题
478浏览 • 1回复 待解决
HarmonyOS 背景图如何填充满组件
1339浏览 • 1回复 待解决
基于ArkUI实现类似.9拉伸能力
1319浏览 • 1回复 待解决