关于openharmony:CircleIndicator组件使指示器风格更加多样化

83次阅读

共计 4681 个字符，预计需要花费 12 分钟才能阅读完成。

UI 界面是应用程序可视化必不可少的局部。设计粗劣的 UI 界面能够使得整个可视化应用程序给用户留下粗浅的印象，是改善用户界面体验最间接的形式。
ArkUI 开发框架为开发者提供了丰盛的 UI 原生组件，如 Navigation（Page 页面的根容器）、ScrollBar（滚动条组件）、Swiper（滑动容器）及 Tabs（通过页签进行内容视图切换的容器组件）等。其中，Swiper 组件和 Tabs 组件在利用程序开发中对于指示器的应用引入较多，然而间接应用原生的 Swiper 组件和 Tabs 组件不适用于体现简单的 UI 指示器交互变动。因而，咱们针对 Swiper 组件和 Tabs 组件在指示器利用方向做了一个简略的封装，以 CiecleIndicator 三方组件的模式提供应用程序依赖应用，从而晋升了 ArkUI 开发框架的 UI 界面之指示器格调多样化的能力。

CircleIndicator 组件 UI 成果展现
圆形指示器：

长条指示器：

横幅指示器：

三角指示器：

图标指示器：

携带地方视图的 Tabs 指示器：

固定地位 Tabs 指示器：

固定地位 Tabs 指示器（胶囊格调）

固定地位 Tabs 指示器（携带角标）:

可滑动 Tabs 指示器：

可滑动 Tabs 指示器(水滴滑块)：

可滑动 Tabs 指示器(首列固定)：

titles 指示器：

什么是 CircleIndicator？
CircleIndicator 顾名思义，它指的是圆形指示器。不过在咱们 OpenHarmony 三方组件中的 CircleIndicator 组件不再是广义的圆形指示器，而是将多种表现形式的指示器会集为一体的归一化指示器合集组件。
CircleIndicator 的源码实现
这里咱们以 CircleIndicator 组件源码中的 TriangularIndicator.ets 文件为源码解析样例对象开展剖析。首先创立 TriangularIndicator.ets 文件，应用命名空间建设 TriangularIndicator 初始化模型：

namespace TriangularIndicator {
  export class Model {
// 设置指示器高度
    mHeight: number = 18
// 设置指示器宽度
    mWidth: number = lpx2px(720)
// 设置指示器背景色
    mBackgroundColor: string
// 字段过多，此处进行省略
// 各字段 set 与 get 办法，此处只以 height 字段为例
    public getHeight(): number {return this.mHeight}
    public setHeight(height: number): Model {
      this.mHeight = height
      return this
    }
    // 触摸事件拦挡
    onPageTouch: (event: TouchEvent, currentIndicator: number) => void
    public notifyTouch(event: TouchEvent, currentIndex: number) {this.onPageTouch(event, currentIndex)
    }
    // 设置结构器
    private tabsController: TabsController
        (tabsController: TabsController) {this.tabsController = tabsController}
    // 页面切换监听
    indexChange: (itemIndex: number) => void
    public setChangeListener(callback: (index: number) => void): Model{
      this.indexChange = callback
      return this
    }
}

将 TriangularIndicator 利用组件化：

@Component
struct TriangularIndicator {
// 获取 TriangularIndicator 实例
  @State model: TriangularIndicator.Model = new TriangularIndicator.Model(null)
// 初始化指示器以后 index
  @Link @Watch("itemIndexChange") itemIndex: number
// 设置指示器总条数
  @State count: number = 0
// 再别离实现 itemIndexChange、aboutToAppear、onTouch、getOffset 办法，此处实现不做展现
// 再在 build 办法外面形容 UI 构造
    build() {Column() {Rect({ width: this.model.mWidth, height:     this.model.mLineHeight}).fill(this.model.mLineColor)
        Polygon()
          .points(this.model.mReverse ?
        [[px2vp(this.model.mWidth) / (this.count * 2) - this.model.mTriangleWidth / 2, this.model.mLineHeight - this.model.mYOffset],
        [px2vp(this.model.mWidth) / (this.count * 2), this.model.mLineHeight + this.model.mTriangleHeight - this.model.mYOffset],
        [px2vp(this.model.mWidth) / (this.count * 2) + this.model.mTriangleWidth / 2, this.model.mLineHeight - this.model.mYOffset]] :
        [[px2vp(this.model.mWidth) / (this.count * 2) - this.model.mTriangleWidth / 2, -this.model.mYOffset],
  [px2vp(this.model.mWidth) / (this.count * 2), -this.model.mTriangleHeight - this.model.mYOffset],
        [px2vp(this.model.mWidth) / (this.count * 2) + this.model.mTriangleWidth / 2, -this.model.mYOffset]])
          .offset(this.model.mStartInterpolator ?
            {x: px2vp(this.model.mWidth) / this.count * (this.itemIndex -     this.model.mStartInterpolator.interpolate(Math.abs(this.model.offs    et / this.model.mWidth)) * Math.sign(this.model.offset)),
              y: 0 } :
            {x: px2vp(this.model.mWidth) / this.count * (this.itemIndex - this.model.offset / this.model.mWidth),
              y: 0 })
          .fill(this.model.mLineColor)
          .height(this.model.mHeight)
          .width(this.model.mWidth)
      }.width('100%').height(this.model.mHeight)
      .backgroundColor(this.model.mBackgroundColor)
    }
}

最初将 TriangularIndicator 裸露进去供内部援用：

export default TriangularIndicator

                                          创立我的项目

如图所示，在 DevEco Studio 中新建 CircleIndicator_Test 我的项目，我的项目类型抉择 Application，语言选择 eTS，点击 Finish 实现创立。

创立工程
增加依赖
胜利创立我的项目后，接下来就是将 CircleIndicator 组件下载至我的项目中。请在增加依赖之前参考如何装置 OpenHarmony npm 包（https://gitee.com/openharmony…）实现 OpenHarmony npm 环境配置。实现 OpenHarmony npm 环境配置之后，在 DevEco Studio 的底部导航栏，点击“Terminal”（快捷键 Alt+F12），键入命令：npm install @ohos/circle-indicator –save 并回车，此时 CircleIndicator 组件会主动下载至我的项目中。下载实现后工程根目录下会生成 node_modules/@ohos/CircleIndicator 目录。
编写逻辑代码
提供多种 Indicator，应用办法相似，以 TriangularIndicator 为例

初始化：实例化 TabsController 和对应的 Indicator.Model 对象, 并增加 number 类型成员以记录当前页下标

private controller: TabsController = new TabsController()
@State model: TriangularIndicator.Model = new TriangularIndicator.Model(this.controller)
@State itemIndex: number = 0

属性设置：通过 Model 类对象设置 UI 属性来自定义所需格调，也能够增加所需的回调

aboutToAppear() {
  this.model
    .setReverse(true)
    .setLineHeight(4)
    .setTriangleHeight(10)
    .setLineColor("#e94220")
    .setBackgroundColor("#eeeeee")
    .setChangeListener((itemIndex) => {console.info("change page to" + this.data[itemIndex])
    })
}

界面绘制：在 Tabs 组件旁搁置 Indicator 组件，留神须要敞开原生的 bar。并监听 Tabs 组件的 touch 事件，告诉给 Model 类，以对立解决滑动逻辑

build() {Column() {TriangularIndicator({ itemIndex: $itemIndex, count: this.data.length, model: this.model})
    Tabs({index: this.itemIndex, controller: this.controller}) {……}
    .barWidth(0)
    .onTouch((event: TouchEvent) => {this.model.notifyTouch(event, this.itemIndex)
    })
  }.padding({top: 40})
  .backgroundColor("#eeeeee")
}

本期基于 OpenHarmony API8 的 CircleIndicator 组件 1.0.3（https://gitee.com/openharmony…）就为大家介绍到这，欢送大家积极参与奉献。理解更多三方组件动静，请关注三方组件资源汇总（https://gitee.com/openharmony…），更多优良的组件等你来发现！

正文完