# ResizableImage

**Repository Path**: harmonyos_samples/resizable-image

## Basic Information

- **Project Name**: ResizableImage
- **Description**: 本示例基于Image组件的resizable属性，分别通过设置slice和lattice实现了聊天消息气泡和可拉伸占位图。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2025-12-19
- **Last Updated**: 2026-01-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于resizable实现图片拉伸效果

## 项目简介

本示例基于Image组件的[resizable](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-image#resizable11)属性，分别通过设置slice和lattice实现了聊天消息气泡和可拉伸占位图。其中聊天消息气泡拉伸效果为四周圆角固定不变，中间内容区域可拉伸；可拉伸占位实现的效果是中间的内容不可拉伸，四周可以拉伸。

## 效果预览

| 聊天消息气泡                           | 可拉伸占位图                                  |   
|----------------------------------|-----------------------------------------|
| ![](screenshots/device/chat.png) | ![](screenshots/device/placeholder.png) |   

## 使用说明

1. 安装运行应用之后分别点击按钮“聊天消息气泡”和“可拉伸占位图”跳转到聊天页面和可拉伸占位图页面。
2. 在聊天页面，可以看到不同内容长度的气泡消息，气泡背景图片自适应不同的宽度和高度的聊天内容。
3. 在可拉伸占位图页面，点击图片右下角的操作按钮，图片会进行拉伸或收缩。

## 目录结构

```
├──entry/src/main/ets/
│  ├──common
│  │  └──Constants.ets                    // 常量类
│  ├──entryability
│  │  └──EntryAbility.ets                 // 程序入口类
│  ├──entrybackupability
│  │  └──EntryBackupAbility.ets           // 数据备份恢复类
│  ├──pages
│  │  └──Index.ets                        // 应用首页
│  └──view
│     ├──ChatMessageView.ets              // 聊天消息页面
│     └──PlaceholderImgView.ets           // 可拉伸占位图页面
└──entry/src/main/resources               // 应用静态资源目录
```

## 具体实现

* 使用Image组件resizable属性的slice参数，实现聊天信息气泡效果。
* 使用Image组件resizable属性的lattice参数实现可拉伸占位图。

## 相关权限

不涉及。


## 约束与限制

1. 本示例仅支持标准系统上运行，支持设备：华为手机。
2. HarmonyOS系统：HarmonyOS 6.0.1 Release及以上。
3. DevEco Studio版本：DevEco Studio 6.0.1 Release及以上。
4. HarmonyOS SDK版本：HarmonyOS 6.0.1 Release SDK及以上。