二、ArkUI界面设计1（组件-样式-基础）

240922

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

build 函数中只能有一个根节点，并且这个根节点必须是一个容器组件（里面可以放其他组件，例如Column）。

1. ArkUI基本语法

方舟开发框架（ArkUI），是一套构建HarmonyOS应用界面的框架。

构建页面的最小单位就是组件。

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

2. 常用系统组件

2.1 系统组件

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

例：小说简介

示例代码

@Entry
@Component
struct Index {
  build() {
    // 先布局，考虑垂直水平等
    // 再放内容，考虑所需组件
    // 最后美化样式，考虑属性方法
    Column(){
      Text('小说简介')
      Row(){
        Text('都市')
        Text('生活')
        Text('情感')
        Text('男频')
      }
    }
  }
}

2.2 通用属性

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

将2.1所列例子添加属性方法

示例代码

@Entry
@Component
struct Index {
  build() {
    // 先布局，考虑垂直水平等
    // 再放内容，考虑所需组件
    // 最后美化样式，考虑属性方法
    Column(){
      Text('小说简介')
        //宽度100%后，内容居左对齐
        .width('100%')
        .height(40)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      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)
      }
        .width('100%')
    }
  }
}

2.3 尺寸单位

2.3.1 px

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

问题：如果使用px作为宽度和高度的单位，但又希望在不同显示能力的设备上保证视觉效果一致，就需要针对每个设备单独进行编码和设置尺寸，非常麻烦。

那么，是否存在一种单位，能够自动根据设备的显示能力来转换大小，从而保证在多设备上视觉效果的一致性呢？

2.3.2 vp

vp：viewport pixel 视口像素

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

1080px - 360vp

对比效果示例代码

@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('vp测试')
        .width(100)
        .height(100)
        .backgroundColor(Color.Gray)
        .fontWeight(FontWeight.Bold)
      Text('px测试')
        .width('100px')
        .height('100px')
        .backgroundColor(Color.Pink)
        .fontWeight(FontWeight.Bold)
    }
  }
}

---

240923

3. 文本属性

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

3.1 字体大小 fontSize

默认字体大小为16，单位fp（字体像素）。

@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('字体大小test，默认')
      Text('字体大小test，20fp')
        .fontSize(20)
    }
  }
}

3.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。rgba在文字颜色中较少应用，多在背景颜色backgroundColor中应用。

@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('字体颜色test，枚举')
        .fontColor(Color.Red)
      Text('字体颜色test，十六进制#')
        .fontColor('#ff0000')
      Text('字体颜色test，rgb')
        .fontColor('rgb(255,0,0)')
      Text('字体颜色test，rgba，a=0')
        .fontColor('rgba(255,0,0,0)')
      Text('字体颜色test，rgba，a=0.5')
        .fontColor('rgba(255,0,0,0.5)')
      Text('字体颜色test，rgba，a=1')
        .fontColor('rgba(255,0,0,1)')
    }
  }
}

3.3 字体样式 fontStyle

参数：枚举FontStyle，Normal正常字体，Italic斜体。

@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('字体样式test，默认')
      Text('字体样式test，斜体')
        .fontStyle(FontStyle.Italic)
    }
  }
}

3.4 字体粗细 fontWeight

参数：[100，900]，取值越大，字体越粗，默认值为400。（取值只能为几百）

           枚举FontWeight（Lighter、Normal默认、Regular、Medium、Bold、Bolder）

@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('字体粗细test，默认400')
      Text('字体粗细test，数值500')
        .fontWeight(500)
      Text('字体粗细test，枚举Lighter')
        .fontWeight(FontWeight.Lighter)
      Text('字体粗细test，枚举Normal(默认)')
        .fontWeight(FontWeight.Normal)
      Text('字体粗细test，枚举Regular')
        .fontWeight(FontWeight.Regular)
      Text('字体粗细test，枚举Medium')
        .fontWeight(FontWeight.Medium)
      Text('字体粗细test，枚举Bold')
        .fontWeight(FontWeight.Bold)
      Text('字体粗细test，枚举Bolder')
        .fontWeight(FontWeight.Bolder)
    }
  }
}

3.5 文本行高 lineHeight

用于设置文本行间距

@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('文本行高test，默认')
        .backgroundColor(Color.Pink)
      Text('文本行高test，设为50')
        .lineHeight(50)
        .backgroundColor(Color.Green)
    }
  }
}

3.6 文本修饰 decoration

设置文本修饰线样式及其颜色

参数：{}

• type：修实现类型，TextDecorationType（枚举）。None无、Underline下划线、LineThrough删除线、Overline顶划线。
• color：修饰线颜色，可选，默认为黑色。

import { resourceManager } from '@kit.LocalizationKit'

@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('文本修饰test，默认')
      Text('文本修饰test，下划线；颜色默认')
        .decoration({
          type:TextDecorationType.Underline
        })
      Text('文本修饰test，删除线；删除线颜色红色')
        .decoration({
          type:TextDecorationType.LineThrough,
          color:'#ff0000'
        })
      Text('文本修饰test，顶划线；文本颜色红色；行高30；背景色粉色')
        .decoration({
          type:TextDecorationType.Overline
        })
        .fontColor(Color.Red)
        .lineHeight(30)
        .backgroundColor(Color.Pink)
    }
  }
}

3.7 文本水平对齐方式 textAlign

参数：枚举TextAlign

• Start：左对齐，默认值
• Center：居中，常用
• End：右对齐

@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('文本水平对齐方式test，默认')
        .width(300)
        .backgroundColor(Color.Pink)
      Text('文本水平对齐方式test，左对齐')
        .width(300)
        .backgroundColor(Color.Red)
        .textAlign(TextAlign.Start)
      Text('文本水平对齐方式test，居中')
        .width(300)
        .backgroundColor(Color.Gray)
        .textAlign(TextAlign.Center)
      Text('文本水平对齐方式test，右对齐')
        .width(300)
        .backgroundColor(Color.Yellow)
        .textAlign(TextAlign.End)
    }
  }
}

3.8 文本垂直对齐方式 align

Text组件内容默认垂直居中，可使用align属性调整Text组件垂直对齐方式。

参数：枚举Alignment，Top顶对齐，Center垂直居中（默认），Bottom底对齐。

@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('文本垂直对齐方式test，默认')
        .width(300)
        .height(50)
        .backgroundColor(Color.Gray)
      Text('文本垂直对齐方式test，顶对齐')
        .width(300)
        .height(50)
        .backgroundColor(Color.Orange)
        .align(Alignment.Top)
      Text('文本垂直对齐方式test，居中（默认）')
        .width(300)
        .height(50)
        .backgroundColor(Color.Grey)
        .align(Alignment.Center)
      Text('文本垂直对齐方式test，底对齐')
        .width(300)
        .height(50)
        .backgroundColor(Color.Yellow)
        .align(Alignment.Bottom)
    }
  }
}

3.9 文本首行缩进 textIndent

@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('文本首行缩进test，字体大小默认时。文本首行缩进test，字体大小默认时。文本首行缩进test，字体大小默认时。')
        .textIndent(32)
      Text('文本首行缩进test，字体大小18fp时。文本首行缩进test，字体大小18fp时。文本首行缩进test，字体大小18fp时。')
        .fontSize(18)
        .textIndent(36)
    }
  }
}

3.10 文本溢出 textOverflow

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

3.10.1 文本超长显示方式 textOverflow

参数：{overflow：TextOverflow}，TextOverflow为枚举类型。

• None：文本超长时裁剪显示
• Clip：文本超长时进行裁剪显示
• Ellipsis：文本超长时显示不下的文本用省略号代替（常用）
• MARQUEE：文本超长时以跑马灯的方式展示（滚动显示）

3.10.2 最大行数 maxLines

两属性配合使用，文本溢出效果如下。

@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('文本超长显示方式test，设maxLines无textOverflow。文本超长显示方式test，设maxLines无textOverflow。文本超长显示方式test，设maxLines无textOverflow。')
        .maxLines(2)
        .height(60)
        .backgroundColor(Color.Orange)
      Text('文本超长显示方式test，溢出显示None。文本超长显示方式test，溢出显示None。文本超长显示方式test，溢出显示None。')
        .maxLines(2)
        .textOverflow({overflow:TextOverflow.None})
        .height(60)
        .backgroundColor(Color.Grey)
      Text('文本超长显示方式test，溢出显示Clip。文本超长显示方式test，溢出显示Clip。文本超长显示方式test，溢出显示Clip。')
        .maxLines(2)
        .textOverflow({overflow:TextOverflow.Clip})
        .height(60)
        .backgroundColor(Color.Pink)
      Text('文本超长显示方式test，溢出显示Ellipsis。文本超长显示方式test，溢出显示Ellipsis。文本超长显示方式test，溢出显示Ellipsis。')
        .maxLines(2)
        .textOverflow({overflow:TextOverflow.Ellipsis})
        .height(60)
        .backgroundColor(Color.Yellow)
      Text('文本超长显示方式test，溢出显示MARQUEE。文本超长显示方式test，溢出显示MARQUEE。文本超长显示方式test，溢出显示MARQUEE。')
        .textOverflow({overflow:TextOverflow.MARQUEE})
        .height(60)
        .backgroundColor(Color.Gray)
    }
  }
}

4. 显示图片

在应用中显示图片，支持png、jpg、bmp、svg、gif类型的图片格式。

组件：Image（’图片的数据源‘），支持本地图片资源和网络图片资源。

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

@Entry
@Component
struct Index {
  build() {
    Column(){
      //网络图片显示test
      Image('https://i0.hdslb.com/bfs/archive/c8fd97a40bf79f03e7b76cbc87236f612caef7b2.png')
        .width(300)
        .backgroundColor(Color.Pink)
      //本地图片显示test
      Image($r('app.media.cat'))
        .width(200)
    }
  }
}

5. 案例-百度小说简介

（涵盖知识Text组件、Image组件、文本属性等）

@Entry
@Component
struct Index {
  build() {
    Column(){
      Image($r('app.media.story'))
        .width(120)
      Text('帝师县令')
        .fontSize(30)
        .lineHeight(60)
        .fontColor('#1d1c21')
        .textAlign(TextAlign.Center)
        .fontWeight(FontWeight.Bold)
      Text('202万字')
        .fontSize(14)
        .lineHeight(24)
        .fontColor('#999')
      Text('晋太元中，武陵人捕鱼为业。缘溪行，忘路之远近。忽逢桃花林，夹岸数百步，中无杂树，芳草鲜美，落英缤纷。渔人甚异之，复前行，欲穷其林。')
        .lineHeight(30)
        .fontSize(18)
        .fontColor('#777')
        .maxLines(3)
        .textIndent(32)
        .textOverflow({overflow:TextOverflow.Ellipsis})
    }
    .width('100%')
  }
}

---

240927

6. Image组件属性

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

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

6.1 尺寸控制 aspecRatio

width、height、aspectRatio；

@Entry
@Component
struct Index {
  build() {
    Column(){
      //本地方形图片，宽高比为1
      Image($r('app.media.cat'))
        .width(100)
        .aspectRatio(1)
        .backgroundColor(Color.Pink)
      //本地方形图片，宽高比为0.5，图片被拉长
      Image($r('app.media.cat'))
        .width(100)
        .aspectRatio(0.5)
        .backgroundColor(Color.Pink)
      //网络图片，宽高比默认原图片比例
      Image('https://i0.hdslb.com/bfs/archive/c8fd97a40bf79f03e7b76cbc87236f612caef7b2.png')
        .backgroundColor(Color.Pink)
        .width(100)
      //网络图片，宽高比设为0.5，会造成图片部分丢失
      Image('https://i0.hdslb.com/bfs/archive/c8fd97a40bf79f03e7b76cbc87236f612caef7b2.png')
        .backgroundColor(Color.Blue)
        .width(100)
        .aspectRatio(0.5)
    }
  }
}

6.2 占位图 alt

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

@Entry
@Component
struct Index {
  build() {
    Column(){
      //本地方形图片，宽高比为1
      Image('https://i0.hdslb.com/bfs/archive/c8fd97a40bf79f03e7b76cbc87236f612caef7b2.png')
        .width(100)
        .backgroundColor(Color.Black)
        .alt($r('app.media.icon'))
    }
  }
}

断开网络，可看到占位图如下图所示

6.3 图片填充 obiectFit

参数类型：枚举ImageFit

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

@Entry
@Component
struct Index {
  build() {
    Column(){
      //图片填充test，默认Cover
      Image('https://i0.hdslb.com/bfs/archive/c8fd97a40bf79f03e7b76cbc87236f612caef7b2.png')
        .width(100)
        .height(100)
        .backgroundColor(Color.Black)
      //图片填充test，填充效果Contain，组件出现留白
      Image('https://i0.hdslb.com/bfs/archive/c8fd97a40bf79f03e7b76cbc87236f612caef7b2.png')
        .width(100)
        .height(100)
        .backgroundColor(Color.Blue)
        .objectFit(ImageFit.Contain)
      //图片填充test，填充效果Cover，图片部分丢失
      Image('https://i0.hdslb.com/bfs/archive/c8fd97a40bf79f03e7b76cbc87236f612caef7b2.png')
        .width(100)
        .height(100)
        .backgroundColor(Color.Green)
        .objectFit(ImageFit.Cover)
      //图片填充test，填充效果Fill,图片被拉长，原来比例变化
      Image('https://i0.hdslb.com/bfs/archive/c8fd97a40bf79f03e7b76cbc87236f612caef7b2.png')
        .width(100)
        .height(100)
        .backgroundColor(Color.Orange)
        .objectFit(ImageFit.Fill)
    }
  }
}

7. 案例-QQ音乐卡片

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