HarmonyOS Developer之开发准备--入门学习

优点小懒

已于 2023-12-08 22:42:32 修改

阅读量536

点赞数 9

文章标签： harmonyos 学习华为

于 2023-12-08 22:38:19 首次发布

本文链接：https://blog.csdn.net/weixin_47988426/article/details/134886379

版权

创建项目

点击Create Project创建一个新项目

在这里插入图片描述

选择Empty Ability->Next

在这里插入图片描述

配置项目信息->Finish

注意：一、Bundle name:需要保证唯一性，以后应用上架的唯一标识；二、Bundle name格式为域名格式反写；三、Save location对应的路径需要是空文件夹；四、点击Finish后需要一定时间下载组件
在这里插入图片描述

点击右侧Previewer，出现Hello World，表示项目创建成功

在这里插入图片描述

代码解构讲解

在这里插入图片描述

Image图片显示组件

使用方法：

Image(src: string | PixelMap | Respirce)
string: 通常用来价值网络图片，需要申请网络访问权限：
Image(“http://www.baidu.com/xxxx.png”)
权限在module.json5配置文件中声明。

{
  "module" : {
    // ...
    "requestPermissions":[
      {
        "name" : "ohos.permission.INTERNET",
        }
      }
    ]
  }
}

PixelMap: 可以用来加载像素图，图片编辑使用居多
Image(pixelMapObject)
Resource: 加载本地图片（推荐使用）
Image($r(“app.media.app_icon”)) # 不需要带后缀,路径为entry/src/main/resources/base/media/
Image($rawfile(“app_icon.png”)) # 需要加后缀,路径为entry/src/main/resources/rawfile/

给图片添加属性

Image($rawfile("app_icon.png"))
    .width('100%')  # 设置宽度，用百分比需要用字符串格式，也可以使用.width(240)
    .height(120)
    .borderRadius(5) # 给图片设置圆角
    .interpolation(ImageInterpolation.High) # 给图片设置差值，图片特有，消除低像素图片的锯齿

ImageInterpolation.High
在这里插入图片描述
ImageInterpolation.Low

使用Image加载网络图片

注：前文说到，使用网络地址需要配置权限，但此处是预览模式，不需要配置。使用虚拟机或这是手机连接，需要配置权限才能获取到图片。虚拟机对设备要求较高，初学者可以使用预览模式即可。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Row(){
          Image("https://img1.baidu.com/it/u=4133577019,194740137&fm=253&fmt=auto&app=120&f=PNG?w=254&h=284")
            .width('100%')
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}