HarmonyOS应用基础阶段- 04、ArkUI框架（一）

海的诗篇_

已于 2025-05-22 21:40:06 修改

阅读量988

点赞数 26

文章标签： harmonyos 华为学习笔记鸿蒙

于 2025-05-21 21:54:04 首次发布

本文链接：https://blog.csdn.net/weixin_60536169/article/details/148125061

版权

#新星杯·14天创作挑战营·第11期#

第二章、ArkUI框架

1、ArkUI框架概述

ArkUI框架是华为鸿蒙系统（HarmonyOS）中用于开发用户界面的核心框架之一。作为鸿蒙系统的UI开发框架，ArkUI以其简洁的UI语法、丰富的UI功能组件、布局和动画能力，为开发者提供了强大的工具，帮助他们构建出高效、美观的用户界面。本文将深入探讨ArkUI的ArkUI框架的基本概念、组件使用、布局管理以及状态管理、使用技巧以及一些实战案例，帮助开发者更好地掌握这一利器。ArkUI框架包括ArkTS（ArkUI TypeScript）和eTS（Extended TypeScript）两种开发语言。其中，ArkTS是基于TypeScript的声明式UI开发语言，它结合了TypeScript的类型系统和ArkUI的组件库，使得开发者能够以更加简洁、高效的方式构建UI。而eTS则提供了更加灵活和强大的编程能力，适用于需要复杂逻辑处理的场景。

2、UI结构的定义

UI结构（User Interface Structure）是指用户界面的整体布局和组织方式，它决定了用户如何与应用程序或网站进行交互。UI结构包括页面或屏幕的布局、导航、控件的位置以及信息的呈现方式。

3、组件样式基础

在ArkUI框架中，组件是构建UI结构的基本单元。ArkUI提供了丰富的组件库，包括文本组件（Text）、按钮组件（Button）、图片组件（Image）等。开发者可以通过组合这些组件来构建出复杂的UI界面。

3.1基础入门

在 build里面写代码，预览器看效果。
在这里插入图片描述

3.2ArkUI 基本语法

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

3.3常用系统组件

在这里插入图片描述

3.3.1基础组件

界面呈现的基础元素：如Text文本、Image图片、Button按钮等。

3.3.2容器组件

控制布局排布：如Row行、Column列等

3.4布局技巧

排版→ 内容→ 美化

3.5语法结构

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

在这里插入图片描述

@Entry  //标记一个组件的入口，这里表示 Index 组件是应用的入口组件
@Component  //用于定义一个自定义组件，这里表示 Index 是一个自定义组件
struct Index {  //定义了一个名为 Index 的结构体
  build() {  //构建UI结构的首页面:组件（放内容）+属性方法（美化内容的外观）
    // 使用 Column 和 Text 等组件来构建界面。
    Column() {
      Text('小说简介')//文本组件
       Row(){
        Text('都市')
         Text('生活')
         Text('情感')
         Text('男频')
       }
    }

  }
}

3.6通用属性

在这里插入图片描述

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

3.7尺寸单位

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

4、文本属性

使用：.属性(参数)
在这里插入图片描述

4.1字体大小

在这里插入图片描述
属性：fontSize(数字)
提示：默认字体大小为 16，单位 fp（字体像素）

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('字体大小')
        .fontSize(30)
    }
  }
}

4.2字体颜色

属性：fontColor(颜色色值)
色值：
● 颜色枚举值：Color.xx，例如：Color.Pink
● 十六进制（HEX）颜色
○ 纯白色：‘#ffffff’或“#fff”
○ 纯黑色：’#000000’ 或 ‘#000’

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('字体颜色1')
        .fontColor(Color.Pink)

      Text('字体颜色2')
        .fontColor('#ff0000')
    }
  }
}

4.3字体样式

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

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('倾斜字体')
        .fontStyle(FontStyle.Italic)
    }
  }
}

4.4字体粗细

作用：设置文字粗细在这里插入图片描述
属性：fontWeight()
参数：
● [100, 900]，取值越大，字体越粗，默认值为 400
● 枚举 FontWeight
○ Lighter：字体较细
○ Normal：字体粗细正常，默认值
○ Regular：字体粗细正常
○ Medium：字体粗细适中
○ Bold：字体较粗
○ Bolder：字体非常粗

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('周杰伦')
        .fontWeight(900)
        .fontSize(30)
      Text('字体粗细')
        .fontWeight(FontWeight.Bolder)
        .fontSize(30)
      Text('字体粗细')
        .fontWeight(FontWeight.Bold)
        .fontSize(30)
    }
  }
}

4.5文本行高

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

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

4.6文本修饰

作用：设置文本装饰线样式及其颜色
在这里插入图片描述
属性：decoration()
参数：{}
● type：修饰线类型，TextDecorationType（枚举）
○ None：无
○ Underline：下划线
○ LineThrough：删除线
○ Overline：顶划线
● color：修饰线颜色，可选，默认为黑色

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('文本修饰线-删除线')
        .decoration({
          type: TextDecorationType.LineThrough,
          color: '#888'
        })
        .fontColor('#999')

      Text('文本修饰线')
        .decoration({
          type: TextDecorationType.Underline
        })

      Text('文本修饰线')
        .decoration({
          type: TextDecorationType.Overline
        })
    }
  }
}

4.7文本水平对齐方式

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

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('已显示最新内容')
        .width(200)
        .height(50)
        .backgroundColor('#d3f2e3')
        .textAlign(TextAlign.Center)

      Text('左对齐')
        .width(200)
        .height(50)
        .backgroundColor(Color.Orange)
        .textAlign(TextAlign.Start)

      Text('右对齐')
        .width(200)
        .height(50)
        .backgroundColor('#d3f2e3')
        .textAlign(TextAlign.End)
    }
  }
}