HarmonyOS鸿蒙Next中如何拉伸图片

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

4 回复

【问题背景】

  • Text组件中的背景图片如何自适应？

【解决方案】

  • 使用 backgroundImageSize 属性
Text("BackgroundBrightness")
  .width('100%')
  .height('100%')
  .backgroundImage($r('app.media.image'))
  .backgroundImageSize(ImageSize.Cover)
  • 使用 .9图片
    • 在API 11+，可以通过设置Image组件的resizable属性达到图片拉伸的效果。
      通过设置图片组件的resizable属性实现图片的安全拉伸。
@Builder
function BubbleBackground() {
  // .9图地址
  Image($r('app.media.imageresizable_border'))
    .objectFit(ImageFit.Fill)
    .resizable({
      slice: {
        top: 3,
        bottom: 3,
        left: 5,
        right: 5
      }
    })
    .width('100%')
    .height('100%')
}

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        Text('200减30券')
          .fontColor(Color.Red)
      }
      .padding(3)
      .background(BubbleBackground)
    }
    .height('100%')
  }
}

.9图片核心定义

  • 后缀为.9.png，本质是带 1px 透明边框的 PNG 图片，仅 Android 系统识别解析。
  • 核心目的：解决普通图片拉伸后失真、模糊的问题，适配不同屏幕尺寸或控件大小。

关键特性

  1. 拉伸区域控制：1px 边框的左右（水平拉伸区）、上下（垂直拉伸区）用黑线标记，仅标记区域会被拉伸，未标记区域保持原始比例。
  2. 内容区域控制：边框内部用黑线框定 “内容显示区”，明确文字、子视图等内容的摆放范围，避免被拉伸区域覆盖。
  3. 无损自适应：拉伸时仅指定区域重复或拉伸，圆角、阴影、纹理等关键细节不变形，适配多尺寸 UI 场景。

backgroundImageSize参数说明

参数名 类型 必填 说明
backgroundImageSize SizeOptions | ImageSize 是 设置背景图像的高度和宽度。默认保持原图的比例不变。
width和height取值范围： [0, +∞)
说明：
width和height均设置为小于或等于0的值时，按值为0显示。当width和height中只有一个值未设置或者设置为小于等于0的值时，另一个会根据图片原始宽高比进行调整。

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


可以参考 HarmonyOS 如何解决Text组件无法根据内容自动拉伸背景图片的问题 （API12）

如何解决Text组件无法根据内容自动拉伸背景图片的问题-行业常见问题-购物比价类行业实践

在HarmonyOS Next中，使用Image组件加载图片时，可通过设置objectFit属性实现拉伸。例如，将objectFit设置为ImageFit.Fill，图片会完全填充容器，可能造成比例失真；若需保持比例，可使用ImageFit.Cover或ImageFit.Contain。具体在ArkTS中通过属性赋值调整，如objectFit: ImageFit.Fill。

在HarmonyOS Next中，可以通过以下方式实现Text组件根据内容自动拉伸背景图片：

  1. 使用Stack布局：将Image和Text组件放入Stack容器，通过alignContent设置对齐方式，使图片作为背景自适应文本内容。

  2. 设置图片缩放属性：对Image组件使用objectFit属性，设置为Contain或Cover，配合aspectRatio保持宽高比，确保图片随文本区域伸缩。

  3. 动态计算尺寸：通过Text组件的onAreaChange事件监听内容区域变化，动态调整Image背景的宽高，使用layoutWeight或百分比布局实现拉伸。

示例代码：

Stack({ alignContent: Alignment.TopStart }) {
  Image($r('app.media.bg'))
    .objectFit(ImageFit.Contain)
    .aspectRatio(1.5)
  Text('动态文本内容')
    .onAreaChange((oldVal, newVal) => {
      // 根据newVal.width/height调整背景图
    })
}
.width('100%')
.height('auto')

注意调整布局约束和图片缩放模式，避免失真。若需精确控制，可结合Flex布局与尺寸设置。

回到顶部