鸿蒙框架应用启动过程（华为鸿蒙应用程序开发）

1 学习组件Image的用法

Image是图片组件，用来渲染展示图片。

除支持通用属性外，还支持如下属性：

启动DevEco Studio，新建一个项目或者打开之前的项目。这里我们以之前创建的项目Components为例。在项目窗口中右键单击pages目录，新建一个JS Page，取名imagepage

将一张图片复制到 entry > src > main > js > default > common > images 目录下，例如下图所示（可以直接把图片拖拽过来）

在电脑上快速定位到images目录并打开的方法是，右键单击images目录，选择 打开于 > Explorer。

1 创建Image组件

<!-- imagepage.hml --> <div class="container"> <image src="common/images/bird.jpg"></image> </div>

/* imagepage.css */ .container { flex-direction: column; justify-content: center; align-items: center; }

2 设置Image样式

Image组件除支持通用样式外，还支持如下属性：

object-fit 类型说明

使用svg图片资源时：

• 建议设置image组件的长宽，否则在父组件的长或宽为无穷大的场景下，svg资源将不会绘制；
• 如果svg描述中未指定相应的长宽，则svg将会填满image组件区域；

• 如果svg描述中指定了相应的长宽，和image组件本身的长宽效果如下：

1. 如果image组件本身的长宽小于svg中的长宽，svg会被裁切，仅显示左上角部分；
2. 如果image组件本身的长宽大于svg中的长宽，svg会被放置在image组件的左上角，image组件其他部分显示空白。

通过设置width、height和object-fit属性定义图片的宽、高和缩放样式。

/* imagepage.css */ .container { flex-direction: column; justify-content: center; align-items: center; } image { width: 80%; height: 500px; border: 3px dotted red; border-radius: 30px; object-fit: contain; match-text-direction: true; }

3 显示多张图片

定义for循环展示多张图片，同时定义select选择图片的展示方式。

<!-- imagepage.hml --> <div class="container"> <list> <list-item for="{{ url }}"> <image src="{{ $item }}" style="object-fit: {{ fit }};"></image> </list-item> </list> <select @change="setFit"> <option for="{{ fitList }}" value="{{ $item }}">{{ $item }}</option> </select> </div>

/* imagepage.css */ .container { flex-direction: column; align-items: center; justify-content: center; } list-item { justify-content: center; border: 2px solid blue; } image { width: 300px; height: 220px; padding: 5px; margin: 5px; border: 2px solid orange; } select { font-size: 40px; width: 300px; height: 160px; border: 2px solid red; margin-bottom: 20px; } option { font-size: 36px; }

// imagepage.js export default { data: { url: ['common/images/bird.jpg', 'common/images/fish.jpg'], fit: 'cover', fitList: ['cover', 'contain', 'fill', 'none', 'scale-down'] }, setFit(e) { this.fit = e.newValue; } }

4 组件Image事件

除支持通用事件外，还支持如下事件：

下面来看看加载图片的实例。本实例图片成功加载时触发complete事件，返回加载的图源尺寸。加载失败则触发error事件，打印图片加载失败。

<!-- imagepage.hml --> <div class="container"> <image src="common/images/bird.jpg" @complete="imageComplete(1)" @error="imageError(1)"> </image> <image src="common/images/bird1.jpg" @complete="imageComplete(2)" @error="imageError(2)"> </image> </div>

/* imagepage.css */ .container { flex-direction: column; align-items: center; justify-content: center; } image { width: 80%; height: 200px; align-items: center; margin: 5px; }

// imagepage.js import prompt from '@system.prompt'; export default { imageComplete(i, e) { prompt.showToast({ message: '图片' i '的宽度为' e.width '，图片' i '的高度为' e.height, duration: 3000 }); }, imageError(i, e) { setTimeout(() => { prompt.showToast({ message: '图片加载失败' i, duration: 3000 }); }, 3000); } }

至此，Image组件的基本用法已经介绍完了。

最后，老规矩，敲黑板：多动手，多思考！代码一定要亲自动手敲出来！[呲牙][比心]