如何实现类似.9 图的功能

.9图是一种特殊格式的图片,这种图片,具有自适应调节大小的能力,不会失真。想了解HarmonyOS上如何实现类似的效果。

HarmonyOS
2024-05-23 23:17:29
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
davis_li

在HarmonyOS上没有.9图的概念,HarmonyOS上可以通过Image的resizable属性,设置图像拉伸时可调整大小的图像选项。通过设置不被拉伸的区域,实现类似.9图的效果。

参考链接:

Image-基础组件-基于ArkTS的声明式开发范式-ArkTS组件-ArkUI API参考-开发 | 华为开发者联盟 (huawei.com)

参考代码:

@Entry 
@Component 
struct ImageExample2 { 
  @State show:Boolean = true 
  @State top:number = 0 
  @State bottom:number = 0 
  @State left:number = 0 
  @State right:number = 0 
  @State fit:ImageFit = ImageFit.Contain 
  @State w:number = 300 
  @State h:number = 300 
  build() { 
    Column({ space: 10 }) { 
      if (this.show) { 
        Image($r("app.media.c0ca0336b4640b770813665d881e1cb8"))// 具体的图片 
          .width(this.w) 
          .height(this.h) 
          .borderRadius(4) 
          .padding(10) 
          .resizable({ 
            slice:{ 
              top:this.top, 
              bottom:this.bottom, 
              left:this.left, 
              right:this.right 
            } 
          }) 
          .objectFit(this.fit) 
          .backgroundColor(Color.Orange) 
      } 
      Row() { 
        Button("add top to "+this.top).fontSize(10) 
          .onClick(()=>{ 
            this.top+=2 
          }) 
        Button("add bottom "+this.bottom).fontSize(10) 
          .onClick(()=>{ 
            this.bottom+=2 
          }) 
        Button("add left "+this.left).fontSize(10) 
          .onClick(()=>{ 
            this.left+=2 
          }) 
        Button("add right "+this.right).fontSize(10) 
          .onClick(()=>{ 
            this.right+=2 
          }) 
      } 
      Row() { 
        Button("reduce top to "+this.top).fontSize(10) 
          .onClick(()=>{ 
            this.top-=2 
          }) 
        Button("reduce bottom "+this.bottom).fontSize(10) 
          .onClick(()=>{ 
            this.bottom-=2 
          }) 
        Button("reduce left "+this.left).fontSize(10) 
          .onClick(()=>{ 
            this.left-=2 
          }) 
        Button("reduce right "+this.right).fontSize(10) 
          .onClick(()=>{ 
            this.right-=2 
          }) 
      } 
      Row(){ 
        Button("add w").fontSize(10) 
          .onClick(()=>{ 
            this.w += 2 
          }) 
        Button("add h").fontSize(10) 
          .onClick(()=>{ 
            this.h += 2 
          }) 
      } 
  
    }.width("100%").height("100%").backgroundColor(Color.Pink) 
    .onClick(()=>{ 
      this.show = !this.show 
    }) 
  } 
}

主要事项:

只有当bottom和right同时大于0时,该属性生效。

分享
微博
QQ
微信
回复
2024-05-24 23:10:09
相关问题
如何实现类似插槽功能
683浏览 • 1回复 待解决
鸿蒙-如何实现类似于HOME键功能
9516浏览 • 2回复 待解决
如何实现图片预览效果
530浏览 • 1回复 待解决
Arkts开发 api9 中怎么实现扫码功能
1410浏览 • 1回复 待解决
如何实现类似keyframes效果
794浏览 • 1回复 待解决
如何实现一个GIF显示指定次数
812浏览 • 1回复 待解决
鸿蒙可以实现矢量
9947浏览 • 2回复 待解决
如何实现向用户申请授权功能
653浏览 • 1回复 待解决
HarmonyOS有没有适配点9方案
669浏览 • 1回复 待解决
grid如何怎么实现拖拽功能
372浏览 • 1回复 待解决
鸿蒙如何实现分享功能
16235浏览 • 2回复 待解决
定时提醒功能如何实现?
3544浏览 • 1回复 待解决
Grid如何实现拖拽功能
1071浏览 • 1回复 待解决