一. 基础入门

在 build里面写代码，预览器看效果

二. ArkUI 基本语法

方舟开发框架ArkUI，是一套 构建HarmonyOS应用界面的框架。构建页面的最小单位就是 "组件"。

三. 常用系统组件

1. 系统组件

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

2. 通用属性

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

3. 尺寸单位

（1）px ：物理像素，也叫设备像素

设备实际拥有的像素点（出场设置、分辨率单位）

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

根据不同设备的显示能力，自动进行转换成对应 px 物理像素，当数值不带单位时，默认单位 vp

4. 文本属性

fontSize(数字)	字体大小，默认为16
fontColor	字体颜色
fontStyle()	字体是否倾斜，枚举FontStyle
fontWeight()	字体粗细，取值100-900，默认为400
decoration	文本修饰线及颜色
textAlign	水平方向Text对齐方式
textIndent	文本首行缩进
textOverflow	设置文本超长时的显示方式
maxLines	设置文本的最大行数

例如:

textIndent()首行缩进

textOverflow()和maxLines()

5. 显示图片

 图片数据源

图片数据源即图片存储位置，通常存储在resources/base/media，图片名称组成: 字母 数字 下划线 但是不能数字开头

 Image组件属性

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

尺寸控制

width：组件宽度，取值数字或百分比

height：组件高度，取值数字或百分比

aspectRatio：组件宽高比，宽度/高度

四.练习

参考源码：

@Entry
@Component
struct Index {
  build() {
    Column() {
      Column() {
        Text('我的年度歌手榜')
          .lineHeight(40)
          .fontSize(14)
          .fontColor('#bdbdbd')
        Text('许嵩')
          .lineHeight(50)
          .fontSize(26)
          .fontWeight(700)
        Image($r('app.media.xs'))
          .width(80)
          .aspectRatio(1)
        Text('雅俗共赏')
          .lineHeight(40)
          .fontSize(14)
          .fontColor('#999')
      }
      .width(300)
      .height(300)
      .backgroundColor('#fff')
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ccc')
    .justifyContent(FlexAlign.Center)
  }
}