【鸿蒙南向开发】OpenHarmony ETS UI 组件封装之环形进度条

概述

本文介绍的是如何使用 TS 的容器组件 Stack 和绘制组件 Shape、Circle 封装一个环形进度条。进度条主要由灰色背景环、蓝色进度环、 进度文字三部分组成。

●更多鸿蒙最新技术知识点，请移步前往小编：https://gitee.com/

基础组件介绍

1.Stack

堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。

Stack(value:{alignContent?: Alignment})

alignContent：设置子组件在容器内的对齐方式

Alignment枚举说明

名称	描述
TopStart	顶部起始端。
Top	顶部横向居中。
TopEnd	顶部尾端。
Start	起始端纵向居中。
Center	横向和纵向居中。
End	尾端纵向居中。
BottomStart	底部起始端。
Bottom	底部横向居中。
BottomEnd	底部尾端。

2.Shape

绘制组件的父组件，父组件中会描述所有绘制组件均支持的通用属性。绘制组件使用Shape作为父组件，实现类似SVG的效果。

属性：

参数名称	参数类型	默认值	必填	参数描述
viewPort	{ x: Length, y: Length, width: Length, height: L