【HarmonyOS 4.0】基础组件

1. Text - 文本组件

1. textAlign 设置文本段落在水平方向的对齐方式。默认值：TextAlign.Start。
2. 前提条件必须设定 width 时，textAlign 属性值才生效。

Text(`手机号码   ${this.person.phone}`)
  .height(42)
  .width('100%')
  .textAlign(TextAlign.Start)

Text('hello word')
  .textAlign(TextAlign.Center)
  .fontSize(14)
  .fontColor('#B088FF')
  .textOverflow({ overflow: TextOverflow.Ellipsis })// 设置文本溢出方式为省略号
  .maxLines(1)// 设置最大行数为1
  .border({ width: 1 })
  .lineHeight(15)// 设置行高为20
  .padding(10)

2. TextInput - 单行文本输入框组件

// TextInput组件的自定义样式扩展
@Extend(TextInput)
function inputStyle() {
  .placeholderColor($r('app.color.placeholder_color'))
  .height($r('app.float.login_input_height'))
  .fontSize($r('app.float.text_input_size'))
  .backgroundColor($r('app.color.text_input_background'))
  .width(CommonConstants.FULL_PARENT)
  .padding({
    left: CommonConstants.INPUT_PADDING_LEFT
  })
  .margin({ top: $r('app.float.input_margin_top') })
}

TextInput({ text: this.account, placeholder: $r('app.string.account') })
  .inputStyle()
  .type(InputType.Number)
  .maxLength(CommonConstants.INPUT_ACCOUNT_LENGTH)
  .onChange((value: string) => {
    this.account = value
  })

3. Button - 按钮组件

1. 通用属性：禁用控制 enabled，值为true表示组件可交互，响应点击等操作；值为false表示组件不可交互，不响应点击等操作。默认值：true

4. Image - 图片组件

1. 可使用 offset 方法设置图片偏移量。
2. 可使用 .alignSelf(ItemAlign.End) 方法对齐自己，设置Image子组件沿Column容器交叉轴的对齐方式

build() {
  Stack() {
    Button(this.item)
      .optionButtonStyle({
        bg: this.getBgColor(),
        fc: this.optionStatus === OptionStatus.Default ? Color.Black : Color.White
      })
    if (this.optionStatus === OptionStatus.Right) {
      Image($r('app.media.app_icon')).imageStyle()
    } else if (this.optionStatus === OptionStatus.Wrong) {
      Image($r('app.media.startIcon')).imageStyle()
    }
  }.
  alignContent(Alignment.Start)
}

@Extend(Image)
function imageStyle() {
  .width(22).height(22)
  .offset({x:10,y:0})
}

4.1 Image 组件参数

1. Image 组件的参数类型为 string | Resource | media.PixelMap ，支持png、jpg、bmp、svg、gif 类型的图片格式。

4.1.1 string 类型的参数用于通过路径的方式引用图片，包括本地图片和网络图片。

1. 引用本地图片，需要将图片置于 ets 目录下，并且需要为 Image 组件提供图片相对于 ets 目录的路径。

Image('pages/components/image/images/icon.png')

2. 引用网络图片，真机中运行的鸿蒙应用，访问网络图片需要配置网络访问权限，不过在预览器和模拟器中测试时不受限制。

Image('https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d')

4.1.2 Resource 类型的参数用于引入 resources 目录下的图片。

1. resources 目录用于统一存放应用所需的各种资源，包括图片，音频，视频，文本等。
2. resources 目录下，用于存放资源的子目录（element、media、profile）和 rawfile。
3. element、media、profile 可存在多种版本，用于适配不同的环境。例如语言环境（zh_CN、en_US）、系统主题（dark、light）、设备类型（phone、tablet）等。我们可以为上述每种环境各自准备一套资源文件，每种环境对应 resources 下的一个目录。
   3.1 media 存放媒体资源，包括图片，音频，视频等文件。
   media 目录下不能创建子目录。
   $r() 的返回值即为 Resource 类型

Image($r('app.media.icon_default'))

3.2 element 存放用于描述页面元素的尺寸，颜色，样式等的各种类型的值，每种类型的值都定义在一个相应的 JSON 文件中。
3.3 profile 存放自定义配置文件。
4. rawfile 用于存储任意格式的原始文件，需要注意的是 rawfile 不会根据设备所处的环境去匹配不同的资源。
文件的路径为相对于 rawfile 的路径。
rawfile 目录支持创建子目录。
$rawfile() 的返回值即为 Resource 类型

Image($rawfile('icon_default.png'))

4.1.3 media.PixelMap

1. PixelMap 指的是图片的像素位图，其通常是一个二维数组，数组中的每个元素对应着图片中的一个像素，包含了该像素的颜色等信息。
2. 像素位图主要用于图片编辑的场景。

4.1.4 代码示例如下：

// 引入项目本地 resources/base/media/ic_default.jpeg 路径下的图片
Image($r('app.media.ic_default'))

// @Builder 自定义构建函数时，用 :Resource 表示资源引用类型
@Builder function CreateIcon (icon: Resource): void {
  Column() {
    Image(icon).width(28).height(28).objectFit(ImageFit.Contain).margin(10)
  }
}

4.2 常用属性

4.2.1 width、height

1. 可接收的参数类型均为 string｜number｜Resource。

// string
.width('100%') 或 .width('150px') 或 .width('150vp')
// number 默认以 vp 作为单位
.width(150)
// Resource
.width($r('app.float.login_width'))

5. Divider - 分隔器组件

1. divider() 属性可设置列表元素分割线样式。

6. LoadingProgress - 加载动效组件

LoadingProgress()
  .color($r('app.color.loading_color'))
  .width($r('app.float.login_progress_size'))
  .height($r('app.float.login_progress_size'))
  .margin({
    top: $r('app.float.login_progress_margin_top')
  })

7. Progress - 进度条组件

Progress({ 
  value: this.answeredCount, 
  total: this.totalCount, 
  type: ProgressType.Linear 
})
.width(100)
.style({ strokeWidth: 4 })

8. Toggle - 切换按钮组件

1. 该组件提供勾选框样式、状态按钮样式及开关样式。

Toggle({
  type: ToggleType.Switch, 
  isOn: false
})

9. ScrollBar - 滚动条组件

1. 用于配合可滚动组件使用，如 List、Grid、Scroll。
2. ScrollBar() 方法可以设置滚动条状态，该方法的参数类型为枚举类型 BarState。

10. Blank - 空白填充组件

1. 在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row、Column、Flex 时生效。
2. Blank 可作为 Column 和 Row 容器的子组件，该组件不显示任何内容，并且会始终充满容器主轴方向上的剩余空间。

11. TextTimer - 计时器

1. 通过文本显示计时信息并控制其计时器状态的组件。
2. elapsedTime：计时器经过的时间，单位为毫秒。实操在Mac上，这个elapsedTime参数必须*10，才能显示准确的毫秒数。

private textTimerController: TextTimerController = new TextTimerController()

Row() {
  TextTimer({
    // isCountDown:,
    // count:,
    controller: this.textTimerController
  }).onTimer((utc: number, elapsedTime: number) => {
    this.timeUsed = elapsedTime * 10 // windows电脑不需要 * 10
  })
}.width(100).justifyContent(FlexAlign.Center)

this.textTimerController.start()
this.textTimerController.pause()
this.textTimerController.reset()