一、博客摘要

在鸿蒙 ArkTS 页面开发中，Image是展示本地 / 网络图片的基础组件，搭配Stack层叠容器可以轻松实现图片水印、图文卡片、浮标标签等常见 UI 效果。 本文结合两份完整实操代码：

1. 6.12ImagesDemo.ets：纯 Image 图片基础用法，包含尺寸、圆角、填充模式、阴影美化；
2. 6.12ImageStackDemo.ets：Stack 层叠图片卡片，结合 Radio 单选框完成图文表单页面； 同时讲解配套 Button 按钮美化、Column 垂直布局，适合零基础入门学习图片与层叠布局。

二、前置基础知识点

1. Image 图片核心语法

typescript

运行

Image($r('app.media.图片资源名'))

• $r('app.media.xxx')：读取entry/src/main/resources/base/media下本地图片资源
• 常用修饰方法：

  表格

  API	作用
  .width() / .height()	设置图片宽高，支持百分比 / 固定数值
  .borderRadius()	圆角裁剪，实现圆角图、圆形头像
  .objectFit(ImageFit.Cover)	图片填充模式：Cover 等比铺满裁剪、Contain 完整显示留白
  .shadow()	阴影美化，参数：模糊半径、颜色、XY 偏移量

2. Stack 层叠布局

• 特性：内部组件自上而下层层堆叠，后写的组件覆盖在上层；
• alignContent：统一设置内部所有子组件对齐方式，默认居中；
• 业务场景：图片上加文字标签、水印、悬浮按钮、角标。

3. Column 垂直布局

页面主体排版容器，子组件从上至下排列，{space:数值}快速设置内部统一间距。

三、Demo1：Image 图片基础美化（6.12ImagesDemo.ets）

完整可运行源码

四、Demo2：Stack 层叠图片卡片 + Radio 单选表单（6.12ImageStackDemo.ets）

完整可运行源码