ArkUI 基本语法

方舟开发框架（简称：ArkUI），是一套 构建HarmonyOS应用 界面 的框架。
构建页面的最小单位就是 “组件”。
组件名(参数) {
内容
}
.属性1()
.属性2()
.属性N()
系统组件
Text 显示文本
Image 显示图片
Column 列，内容垂直排列
Row 行，内容水平排列
Button 按钮

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('小说简介')
      Row() {
        Text('都市')
        Text('生活')
        Text('情感')
        Text('男频')
      }
    }
  }
}

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

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('小说简介')
        .width('100%')
        .height(40)
      Row() {
        Text('都市')
          .width(50)
          .height(30)
          .backgroundColor(Color.Orange)
        Text('生活')
          .width(50)
          .height(30)
          .backgroundColor(Color.Pink)
        Text('情感')
          .width(50)
          .height(30)
          .backgroundColor(Color.Yellow)
        Text('男频')
          .width(50)
          .height(30)
          .backgroundColor(Color.Gray)
      }
      // 宽度100%后， 内容居左对齐
      .width('100%')
    }
  }
}

尺寸单位

1. px ：物理像素，也叫设备像素，设备实际拥有的像素点（出场设置、分辨率单位）
   问题：如果用 px 作为宽高单位，又想保证不同显示能力的设备，视觉效果一样大，
   就需要针对每个设备单独编码，设置尺寸，非常麻烦。
   能不能有个单位，帮我们自动根据显示能力，来进行转换大小，保证多设备视觉效果一致呢？
2. vp ：virtual pixel 虚拟像素 【推荐使用】
   ● 会根据不同设备的显示能力，自动进行转换成对应 px 物理像素，保证不同设备视觉一致
   ● 当数值不带单位时，默认单位 vp
   ● 基于目前预览器和常规手机的显示能力，vp 和 px 的对应关系，大约为 3 倍，1vp ≈ 3px （超清屏手机）

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

字体颜色
属性：fontColor(颜色色值)
色值：
● 颜色枚举值：Color.xx，例如：Color.Pink
● 十六进制（HEX）颜色，例如：'#ffffff’或“#fff”
● rgb() 或 rgba()颜色
○ rgb(r, g, b)， 取值为 0 ~ 255
○ rgba(r, g, b, a)，a 为透明度，取值范围 0 ~ 1
字体样式
作用：设置字体是否倾斜
属性：fontStyle()
参数：枚举FontStyle
● Normal：正常字体（不倾斜）
● Italic：斜体

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('HarmonyOS 是新一代的智能终端操作系统，为不同设备的智能化、互联与协同提供了统一的语言。带来简洁，流畅，连续，安全可靠的全场景交互体验。')
        .fontSize(14)
        .textIndent(28)
    }
  }
}

@Entry
@Component
struct Index {
build() {
Column() {
Text(‘HarmonyOS 是新一代的智能终端操作系统，为不同设备的智能化、互联与协同提供了统一的语言。带来简洁，流畅，连续，安全可靠的全场景交互体验。’)
.fontSize(14)
.textIndent(28)
.maxLines(2)
// 超长文本使用省略号代替
.textOverflow({overflow: TextOverflow.Ellipsis})
// 裁剪超长文本
.textOverflow({overflow: TextOverflow.Clip})
// 超长文本滚动显示
.textOverflow({overflow: TextOverflow.MARQUEE})
}
}
}