HarmonyOS鸿蒙Next中如何实现.9图效果

HarmonyOS鸿蒙Next中如何实现.9图效果 有个布局，加了背景，然后背景需要红框的临底部一部分做拉伸，看了下，好像不支持.9图，我代码设置了下，好像不起作用，姿势估计不对，伙伴们帮忙看看，怎么样才对，显示图片，下面是我的代码

cke_302.png

布局代码：

xDivs: Array<number> = [0, DimensionUtil.getVp(1053)]
yDivs: Array<number> = [DimensionUtil.getVp(550), DimensionUtil.getVp(600)]

Column(){//数据
  Text('0').width('50%').height(DimensionUtil.getVp(250)).backgroundColor(Color.Blue)
  Text('1').width('50%').height(DimensionUtil.getVp(250)).backgroundColor(Color.Red)
  Text('2').width('50%').height(DimensionUtil.getVp(250)).backgroundColor(Color.Gray)
 Text('3').width('50%').height(DimensionUtil.getVp(250)).backgroundColor(Color.Yellow)
 Text('4').width('50%').height(DimensionUtil.getVp(250)).backgroundColor(Color.Orange)
}
.width('100%')
.constraintSize({minHeight:DimensionUtil.getVp(420)})
.height('auto')
.alignRules({
  top: { anchor: '__container__', align: VerticalAlign.Top }
})
.margin({ top: DimensionUtil.getVp(28) })
.backgroundImage($r('app.media.bg_todya_data_2')) // 背景图
.backgroundImageSize({ width: '100%', height: '100%' }) // 背景图铺满
.backgroundImageResizable({
  lattice: drawing.Lattice.createImageLattice(this.xDivs, this.yDivs, 2, 2)
})
.id('column')

更多关于HarmonyOS鸿蒙Next中如何实现.9图效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

分两步，一是图片为9png，二是规格比例适配。

更多关于HarmonyOS鸿蒙Next中如何实现.9图效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，.9图效果通过PixelMap的ninePatch接口实现。首先将图片资源转换为PixelMap对象，然后调用createNinePatch方法，设置拉伸区域和内容区域。拉伸区域定义图片缩放时的伸缩部分，内容区域指定放置内容的范围。系统会自动处理缩放和渲染，确保在不同设备上显示一致。

在HarmonyOS Next中，.9图效果可以通过ImageLattice实现。从你的代码看，问题可能在于xDivs和yDivs的划分方式。

当前设置：

  • xDivs: [0, 1053vp] - 将图片水平分为左右两部分
  • yDivs: [550vp, 600vp] - 将图片垂直分为上中下三部分

要实现底部拉伸效果，需要调整yDivs的划分。建议改为：

yDivs: [0, DimensionUtil.getVp(550), DimensionUtil.getVp(600)]

这样划分：

  • 0-550vp：顶部固定区域
  • 550-600vp：中间可拉伸区域
  • 600vp以上：底部固定区域

同时确保背景图片的实际尺寸与设置的划分值匹配。如果图片高度不是600vp，需要相应调整yDivs的值。

另外检查图片资源路径是否正确，以及createImageLattice的行列数参数（2,2）是否与划分区域数量一致。

回到顶部