harmony开发之image组件的使用

HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。

在传统的单设备系统能力基础上，HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念，能够支持手机、平板、智能穿戴、智慧屏、车机、PC、智能音箱、耳机、AR/VR眼镜等多种终端设备，提供全场景（移动办公、运动健康、社交通信、媒体娱乐等）业务能力。

**********************************************************************************************************

image部件的使用

鸿蒙应用开发中常用的Ui组件,包括image、text、button、slider等,并详细讲解了它们的用法和语法。介绍了使用AQI框架开发鸿蒙应用的基本代码，包括页面构成和组件的使用。控制图片大小：通过使用Ul的button组件和rcui中的slider组件，实现了控制图片大小的功
能。加载本地图片：介绍了加载本地图片的三种方式，包括字符串、像素图、http和资源格式，以及对应的语法和使用场景。

图片来源黑马程序员

代码如下：

@Entry   //入口组件
@Component //装饰器
struct Index{@State message: string = 'Hello World'build(){Column({space:20}){//是垂直方向布置的容器控件Row(){//是水平布置的容器Image($r("app.media.icon"))//加载resource里面的图片.width(40).height(40).borderRadius(10)//边框圆角.interpolation(ImageInterpolation.High)//图片插值，变清晰Text(this.message).fontSize(30)//固定大小.fontWeight(FontWeight.Bold).fontColor("#36D").onClick(()=>{//出发点击事件this.message="你好，初次见面"//出发文字改变})}TextInput({placeholder:"用户名"})TextInput({placeholder:"密码"}).type(InputType.Password).showPasswordIcon(true)Button("登录")
//      .onClick()Row(){Checkbox()Text("记住我").fontColor("#36D")}Image("https://img-blog.csdnimg.cn/874e0096778641a7bed24755366a3de9.png")//网路加载
//需要申请网络权限.width(200).height(100).borderRadius(10)//边框圆角.interpolation(ImageInterpolation.High)//图片插值}.width("100%")}
}

其中设置.interpolation(ImageInterpolation.High)//图片插值的方式，可以有效解决图片放大模糊失真的问题。

设置.width有两种方式一种是直接像素值，还有一种是百分比，根据使用场景进行选择使用！

申请网络权限的方式：在module.json5里面的module下面添加下面许可

详情参考：

访问控制授权申请-访问控制-安全-开发 | 华为开发者联盟 (huawei.com)

应用的APL（Ability Privilege Level）等级分为normal、system_basic和system_core三个等级，默认情况下，应用的APL等级都为normal等级。权限类型分为system_grant和user_grant两种类型。应用可申请的权限项参见应用权限列表。应用需要在工程配置文件中，对需要的权限逐个声明，未在配置文件中声明的权限，应用将无法获得授权。

需要注意的是：

需要参数是否为必填选项，并且注意申请的权限类型如果是user_grant那么必填参数会增加，需要说明为什么要使用该权限！

{"module": {"requestPermissions": [{"name":"ohos.permission.INTERNET"}],"name": "entry","type": "entry","description": "$string:module_desc","mainElement": "EntryAbility","deviceTypes": ["phone"],"deliveryWithInstall": true,"installationFree": false,"pages": "$profile:main_pages","abilities": [{"name": "EntryAbility","srcEntrance": "./ets/entryability/EntryAbility.ts","description": "$string:EntryAbility_desc","icon": "$media:icon","label": "$string:EntryAbility_label","startWindowIcon": "$media:icon","startWindowBackground": "$color:start_window_background","visible": true,"skills": [{"entities": ["entity.system.home"],"actions": ["action.system.home"]}]}]}
}

使用模拟器进行测试：