harmony开发之image组件的使用

news2024/11/23 15:32:50

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"
            ]
          }
        ]
      }
    ]
  }
}

使用模拟器进行测试：