【鸿蒙实战开发】HarmonyOS各种组件样式的基础应用

1. 基础入门

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

2. ArkUI 基本语法

方舟开发框架（简称：ArkUI），是一套 构建HarmonyOS应用 界面 的框架。
构建页面的最小单位就是 “组件”。

码组件名(参数) { 
  内容 
  } 
  .属性1() 
  .属性2() 
  .属性N()

3. 常用系统组件

3.1. 系统组件

结果图

代码如下：

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

3.2. 通用属性

实现图：

代码如下：

@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%') 
    } 
  } 
}

3.3. 尺寸单位

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

   问题：如果用 px 作为宽高单位，又想保证不同显示能力的设备，视觉效果一样大，
   就需要针对每个设备单独编码，设置尺寸，非常麻烦。
   能不能有个单位，帮我们自动根据显示能力，来进行转换大小，保证多设备视觉效果一致呢？

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

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

实现图：

代码如下：

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

通常设计图，按照 1080px 设计，换算成 360 进行测量，写 vp 单位尺寸

4. 文本属性

使用：.属性(参数)

4.1. 字体大小

属性：fontSize(数字)
提示：默认字体大小为 16，单位 fp（字体像素）

4.2. 字体颜色

属性：fontColor(颜色色值)
色值：
●颜色枚举值：Color.xx，例如：Color.Pink
●十六进制（HEX）颜色，例如：'#ffffff’或“#fff”
●rgb() 或 rgba()颜色

○ rgb(r, g, b)， 取值为 0 ~ 255

○ rgba(r, g, b, a)，a 为透明度，取值范围 0 ~ 1

4.3. 字体样式

作用：设置字体是否倾斜
属性：fontStyle()
参数：枚举FontStyle
●Normal：正常字体（不倾斜）
●Italic：斜体

4.4. 字体粗细

作用：设置文字粗细
属性：fontWeight()
参数：
● [100, 900]，取值越大，字体越粗，默认值为 400
● 枚举 FontWeight

○ Lighter：字体较细

○ Normal：字体粗细正常，默认值

○ Regular：字体粗细正常

○ Medium：字体粗细适中

○ Bold：字体较粗

○ Bolder：字体非常粗

4.5. 文本行高

作用：设置文本行间距
属性：lineHeight()

4.6. 文本修饰

作用：设置文本装饰线样式及其颜色
属性：decoration()
参数：{}
● type：修饰线类型，TextDecorationType（枚举）

○ None：无

○ Underline：下划线

○ LineThrough：删除线

○ Overline：顶划线

● color：修饰线颜色，可选，默认为黑色

4.7. 文本水平对齐方式

作用：设置文本在水平方向的对齐方式
属性：textAlign
参数：枚举 TextAlign
● Start：左对齐，默认值
● Center：居中
● End：右对齐

4.8. 文本垂直对齐方式

Text 组件内容默认垂直居中

可使用align属性调整Text组件垂直对齐方式。

4.9. 文本首行缩进

属性：textIndent
参数：数值

4.10. 文本溢出

使用 textOverflow 配合 maxLines 实现文本溢出显示省略号效果

4.10.1. 文本超长显示方式

属性：textOverflow
参数：{overflow: TextOverflow}，TextOverflow 为枚举类型
● None：文本超长时裁剪显示
● Clip：文本超长时进行裁剪显示
● Ellipsis：文本超长时显示不下的文本用省略号代替
● MARQUEE：文本超长时以跑马灯的方式展示（滚动显示）

4.10.2. 最大行数

属性：maxLines
参数：数字

5. 显示图片

作用：在应用中显示图片，支持png、jpg、bmp、svg和gif类型的图片格式。
组件：Image(‘图片的数据源’)，支持本地图片资源和网络图片资源。

5.1. 图片数据源

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

@Entry 
@Component 
struct Index { 
  build() { 
    Column() { 
      // 本地图片
      Image($r('app.media.cat'))
        .width(200)
      // 网络图片
      Image('https://www.itheima.com/images/logo.png')
        .width(200)
      } 
    } 
  }

6. 案例-百度-小说简介

涵盖知识：Text 组件、Image组件、文本属性等
实现图：

代码如下：

@Entry 
@Component 
struct Index { 
  build() { 
    Column() { 
      Image($r('app.media.story'))
        .width(120)
      Text('帝师县令')
        .lineHeight(60)
        .fontSize(30)
        .fontColor('#1d1c21')
        .fontWeight(600)
      Text('202万字')
        .lineHeight(24)
        .fontSize(14)
        .fontColor('#999')
      Text('兵荒马乱的世道，赵康一朝穿越成乾国九品县令。胸无大志的他并不想争霸天下，只想当个混吃等死，为非作歹的土皇帝。于是，在元江县出现了许多奇奇怪怪的东西，老八洗浴城、二狗麻将馆、张三养生店.....直到有一天女帝微服私访 元江县.....')
        .lineHeight(30)
        .fontSize(18)
        .textIndent(36)
        .maxLines(4)
        .textOverflow({overflow: TextOverflow.Ellipsis})
        .fontColor('#777')
      } 
    } 
  }

7. Image组件属性

添加backgroundColor属性添加背景色，方便观察组件尺寸范围

7.1. 尺寸控制

● width：组件宽度，取值数字或百分比
● height：组件高度，取值数字或百分比
● aspectRatio：组件宽高比，宽度/高度

7.2. 占位图 alt

作用：加载时显示的占位图片
属性：alt

7.3. 图片填充 objectFit

属性：objectFit
参数类型：枚举 ImageFit
● Contain：图片宽或高缩放到与组件尺寸相同则停止缩放，可能导致组件有空白（等比缩放）
● Cover：默认效果，图片缩放到完全覆盖组件范围，可能导致图片显示不完整（等比缩放）
● Fill：图片缩放至充满组件（不等比缩放）

8. 案例-QQ音乐-卡片

布局思路：Column > Text + Text + Image + Text

实现图（图片随便放一个就行）：

代码如下：

@Entry
@Component
struct Index {
  build() {
    Column() {
      Column() {
        Text('我的年度歌手榜')
          .lineHeight(40)
          .fontSize(14)
          .fontColor('#bdbdbd')
        Text('周杰伦')
          .lineHeight(50)
          .fontSize(24)
          .fontWeight(700)
        Image($r('app.media.zhoujielun'))
          .width(60)
        Text('真爱就是循环一千遍')
          .lineHeight(40)
          .fontSize(14)
          .fontColor('#999')
      }
        .width(200)
        .height(200)
        .backgroundColor('#fff')
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f5f7f8')
  }
}

写在最后

有很多小伙伴不知道该从哪里开始学习鸿蒙开发技术？也不知道鸿蒙开发的知识点重点掌握的又有哪些？自学时频繁踩坑，导致浪费大量时间。结果还是一知半解。所以有一份实用的鸿蒙（HarmonyOS NEXT）全栈开发资料用来跟着学习是非常有必要的。

获取完整版高清学习资料，请点击→鸿蒙全栈开发学习资料（安全链接，请放心点击）

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了

最新鸿蒙全栈开发学习线路

鸿蒙HarmonyOS开发教学视频

大厂面试真题

鸿蒙OpenHarmony源码剖析

这份资料能帮住各位小伙伴理清自己的学习思路，更加快捷有效的掌握鸿蒙开发的各种知识。有需要的小伙伴自行领取，，先到先得~无套路领取！！

获取这份完整版高清学习资料，请点击→鸿蒙全栈开发学习资料（安全链接，请放心点击）