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

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

HarmonyOS

椰椰蓉螈

2024-05-23 23:17:29

浏览

回答 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 
    }) 
  } 
}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.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.

主要事项：

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

2024-05-24 23:10:09

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

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

订阅鸿蒙技术特刊，精选内容抢先看