HarmonyOS第四章：样式操作及渲染页面

🎉 博客主页：【剑九_六千里-优快云博客】【剑九_六千里-掘金社区】
🎨 上一篇文章：【HarmonyOS第三章：初识ArkTs/ArkUI，常用组件二】
🎠 系列专栏：【HarmonyOS系列】
💖 感谢大家点赞👍收藏⭐评论✍

引言：
ArkTS，作为ArkUI框架的一个重要组成部分，提供了一套强大且灵活的工具集，旨在帮助开发者构建高性能且美观的应用程序。无论是新手还是经验丰富的开发者，掌握ArkTS中的样式操作和渲染技术都是必不可少的技能。本文将深入探讨如何利用ArkTS中的样式设置、适配单位、样式复用、多态样式以及条件渲染和循环渲染等功能，帮助您更高效地构建美观、响应迅速的应用界面。让我们一同探索这些强大的工具和技术，开启您的ArkTS之旅吧！

1. 样式操作

1.1. 样式语法

ArkTS采用声明式方法来组合和扩展组件，从而构建应用程序的用户界面。此外，它还提供了一系列基础属性、事件处理能力和子组件的配置选项，以支持开发者设计和实现应用程序的交互逻辑。

1.1.1. 样式属性

• 属性方法可以通过点（.）进行链式调用来配置系统组件的样式和其他属性。
• 为了提高代码的可读性，建议将每个属性方法分别写在单独的一行上。

@Entry
@Component
struct StylePage {
   
  build() {
   
    Row() {
   
      Text("测试链式调用")
        .width(100)
        .height(100)
        .backgroundColor("#f40")
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

测试：

1.1.2. 枚举值

ArkUI为系统组件的属性提供了预定义的枚举类型，以简化配置过程。

@Entry
@Component
struct StylePage {
   
  build() {
   
    Row() {
   
      Text("测试样式枚举值")
        .width(200)
        .height(100)
        .backgroundColor(Color.Gray)
        .textAlign(TextAlign.Center)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Blue)
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

测试：

注意：

• 样式相关的属性应该使用链式函数进行设置。
• 当属性类型为枚举时，应该通过传入相应枚举值来设定。

1.2. 像素单位

Harmony为开发者提供4种像素单位，框架采用 vp 为基准数据单位。

名称	描述
px	屏幕物理像素单位。
vp	屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，当数值不带单位时，默认单位vp。在实际宽度为1440物理像素的屏幕上，1vp约等于3px。
fp	字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。
lpx	视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度（通过designWidth配置）的比值，designWidth默认值为720。当designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。

1.2.1. "vp" 是指 “虚拟像素”（virtual pixel）

在设置样式时，如果使用的是 px 作为单位，它直接对应于物理像素，即屏幕的分辨率。由于不同手机的屏幕分辨率密度各异，用 px 表示的值难以适应所有屏幕密度，因此使用 vp（虚拟像素）作为单位可以自动根据手机的屏幕密度进行适配。这样，vp 提供了一种灵活的方法来确保不同屏幕密度下的显示效果保持一致。

例如，设计图如果是按照1080px宽度设计的，那么在编写样式时，可以将这个尺寸换算成360vp来适配不同的屏幕。

1.2.2. 像素单位转换

其他单位与px单位互相转换的方法。

接口	描述
vp2px(value : number) : number	将vp单位的数值转换为以px为单位的数值。从API version 9开始，该接口支持在ArkTS卡片中使用。
px2vp(value : number) : number	将px单位的数值转换为以vp为单位的数值。从API version 9开始，该接口支持在ArkTS卡片中使用。
fp2px(value : number) : number	将fp单位的数值转换为以px为单位的数值。从API version 9开始，该接口支持在ArkTS卡片中使用。
px2fp(value : number) : number	将px单位的数值转换为以fp为单位的数值。从API version 9开始，该接口支持在ArkTS卡片中使用。
lpx2px(value : number) : number	将lpx单位的数值转换为以px为单位的数值。从API version 9开始，该接口支持在ArkTS卡片中使用。
px2lpx(value : number) : number	将px单位的数值转换为以lpx为单位的数值。从API version 9开始，该接口支持在ArkTS卡片中使用。

示例：

@Entry
@Component
struct VPPage {
   
  @State pageSize: string = "";
  build() {
   
    Column() {
   
      // 预览器宽度：360vp
      Text(`屏幕宽度是${
     this.pageSize}vp`)
      // vp和px之间的转换比例是1：3
      Text(`1080px可以转换成${
     px2vp(1080)}vp`) // 将px转换成vp
      Text(`360vp可以转换成${
     vp2px(360)}px`) // 将vp转换成px
    }
    .width('100%')
    .height('100%')
    .onAreaChange((oldValue, newValue) => {
   
      // 视口发生变化时触发
      this.pageSize = newValue.width.toString();
    })
  }
}

测试：

1.2.3. 也可以采用伸缩布局（layoutWeight）、网格系统和栅格系统来进行布局适配。

在伸缩布局中，layoutWeight(flex: number)可以用来指定组件占据剩余空间的比例，类似于CSS中的 flex: 1 属性。这意味着组件可以根据指定的权重来分配剩余空间，以实现灵活的布局。

@Entry
@Component
struct LayoutWeight {
   
  build() {
   
    Row() {
   
      Text('left')
        .width(100)
        .height(100)
        .backgroundColor(Color.Pink)
      Text('right')
        .width(100)
        .hei