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

创建项目

点击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",
        }
      }
    ]
  }
}
1
2
3
4
5
6
7
8
9
10
11

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) # 给图片设置差值，图片特有，消除低像素图片的锯齿
1
2
3
4
5

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%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

忘记命令，查看帮助文档

如果忘记Image的某个属性，可以将鼠标放在Image单词上，会出现一个弹框，点击Show in API Reference,会出现一个API文档窗口，与官网文档一模一样。查找需要的属性即可。