鸿蒙| 初学者必看：轻松掌握[鸿蒙]的实用指南（1）鸿蒙| 初学者必看：轻松掌握[鸿蒙]的实用指南（1）既然准备学习鸿

鸿蒙| 初学者必看：轻松掌握[鸿蒙]的实用指南（1）

既然准备学习鸿蒙，在开始应用开发前，需要先完成以下准备工作。

1.注册成为开发者

在华为开发者联盟网站上，注册成为开发者，并完成实名认证，从而享受联盟开放的各类能力和服务。

2.创建应用

在AppGallery Connect（简称AGC）上，参考创建项目和创建应用完成HarmonyOS应用的创建，从而使用各类服务。

3.配置安装DevEco Studio

安装最新版DevEco Studio。具体安装指导请参见安装DevEco Studio。

4.组件

方舟开发框架（简称：ArkUI），是一套构建HarmonyOS应用界面的框架。

构建页面的最小单位就是 "组件"。

4.1.常用系统组件

组件	描述
Text	显示文本
Image	显示图片
Column	列，内容垂直排列
Row	行，内容水平排列
Button	按钮

在聊这些组件之前我们要了解组件的通用属性以及尺寸单位

4.1.1 通用属性

属性	描述
width	宽度
height	高度
backgroundColor	背景色

4.1.2 尺寸

px ：物理像素，也叫设备像素，设备实际拥有的像素点（出场设置、分辨率单位）

问题：如果用 px 作为宽高单位，又想保证不同显示能力的设备，视觉效果一样大，就需要针对每个设备单独编码，设置尺寸，非常麻烦。

能不能有个单位，帮我们自动根据显示能力，来进行转换大小，保证多设备视觉效果一致呢？

vp ：virtual pixel 虚拟像素【推荐使用】

会根据不同设备的显示能力，自动进行转换成对应 px 物理像素，保证不同设备视觉一致
当数值不带单位时，默认单位 vp
基于目前预览器和常规手机的显示能力，vp 和 px 的对应关系，大约为 3 倍，1vp ≈ 3px （超清屏手机）

@Entry
@Component
struct test1 {
  build() {
    Column() {
      Text("vp单位")
        .width(100)
        .height(100)
        .backgroundColor(Color.Orange)
      Text('px单位')
        .width('100px')
        .height('100px')
        .backgroundColor(Color.Pink)
    }
    .width("100%")
    .height("100%")
  }
}

4.2.Text

text是文本组件，用于呈现一段文本信息。

4.2.1文本属性

属性	描述
fontSize	字体大小
fontColor	字体颜色
fontStyle	字体样式
fontWeight	字体粗细
lineHeight	文本行高
decoration	文本修饰线及颜色
textAlign	水平方向Text对齐方式
align	垂直方向对齐方式
textIndent	文本首行缩进
textOverflow	设置文本超长时的显示方式
maxLines	设置文本的最大行数

4.3.图片 image

作用：在应用中显示图片，支持png、jpg、bmp、svg和gif类型的图片格式。

组件：Image('图片的数据源')，支持本地图片资源和网络图片资源。

4.3.1. 图片数据源

图片数据源即图片存储位置，通常存储在resources/base/media

可以使用$r来调用图片

也可以直接引入网络图片

@Entry
@Component
struct test1 {
  build() {
    Column() {
      Image($r("app.media.img")) //直接调用
      Image('http:xxx')
      //引入网络地址

    }
    .width("100%")
    .height("100%")
  }
}

4.3.2 image 组件属性

属性	描述
width	宽度（通用属性）
height	高度（通用属性）
aspectRatio	宽高比（通用属性）
alt	加载时显示的占位图，支持本地图片（png、jpg、bmp、svg和gif类型），不支持网络图片。
objectFit	设置图片的填充效果。默认值：ImageFit.Cover