前言

在 Swiper 轮播组件中，指示器是告知用户当前位置的视觉要素。HarmonyOS 提供内置的 DotIndicator 组件，支持自定义圆点大小、颜色、选中态样式。

本文以「猫猫大作战」新手引导页的指示器为锚点，讲解 DotIndicator 的完整配置选项。

提示：本系列不讲 ArkTS 基础语法与环境搭建，假设你已跟完第 1–91 篇。本篇是阶段三第 92 篇。

一、DotIndicator 配置

1.1 基础样式

.indicator(new DotIndicator()
  .itemWidth(8)          // 圆点宽度
  .itemHeight(8)         // 圆点高度
  .selectedItemWidth(24) // 选中态宽度
  .selectedItemHeight(8) // 选中态高度
  .color(Color.Gray)     // 未选中颜色
  .selectedColor(Color.Green) // 选中颜色
)

1.2 属性一览

二、总结

DotIndicator 是 Swiper 内置的圆点指示器，支持宽度、高度、颜色等样式的自定义。

核心要点：

• DotIndicator 作为 Swiper 的 .indicator() 属性使用
• 支持选中/未选中态的宽度、高度、颜色分别设置
• 选中态支持长条样式（selectedItemWidth > itemWidth）

下一篇预告：第 93 篇将深入 Stack 全屏覆盖——暂停遮罩层的实现。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• Swiper 组件参考
• DotIndicator 参考
• 开源鸿蒙跨平台社区
• 第 91 篇：Swiper 轮播
• 第 93 篇：Stack 暂停遮罩