您可以使用自定义组件来实现一个空心的圆点指示器。这是解决官方组件功能限制的常用且有效的方法。

实现思路

1. 数据驱动：自定义组件接收两个关键参数：total（总页数/圆点数量）和 current（当前激活的页码索引）。
2. 动态构建：根据 total 的值，使用 ForEach 循环渲染出对应数量的圆点。
3. 样式控制：在每个圆点组件上，根据其索引是否与 current 相等，来动态应用"激活"或"非激活"的样式。空心效果通过设置背景色为透明 ('#00000000') 并添加边框来实现。
4. 灵活布局：使用 Row 容器来水平排列所有圆点，并通过 justifyContent 和 margin 等属性控制其整体位置，完美替代 .right(1).bottom(6) 的效果。

代码示例

以下是实现一个自定义空心圆点指示器的示例代码：

// 自定义指示器组件 HollowDotIndicator.ets
@Component
export struct HollowDotIndicator {
  // 总页数，必填参数
  @Prop total: number = 0;
  // 当前页码，必填参数
  @Prop current: number = 0;
  // 非激活状态的颜色（默认为透明背景+白色边框，即空心）
  @Prop inactiveColor: Color = Color.White;
  // 激活状态的颜色（默认为实心白色）
  @Prop activeColor: Color = Color.White;
  // 圆点大小（默认为7，与你提供的尺寸一致）
  @Prop size: number = 7;
  // 空心圆的边框宽度
  @Prop strokeWidth: number = 1;

  build() {
    // 使用 Row 来水平排列圆点，并通过 justify 和 margin 控制位置
    Row() {
      // 循环构建圆点
      ForEach(Array.from({ length: this.total }, (_, i) => i), (index: number) => {
        // 每个圆点是一个 Column，也可以用其他容器
        Column() {
          // 空行，用于放置圆点
        }
        .width(this.size)
        .height(this.size)
        // 关键：根据当前索引判断应用哪种样式
        .backgroundColor(index === this.current ? this.activeColor : '#00000000') // 非激活状态背景透明
        .border({
          color: index === this.current ? this.activeColor : this.inactiveColor, // 激活状态边框与背景同色，视觉上为实心
          width: index === this.current ? 0 : this.strokeWidth // 激活状态边框宽度为0
        })
        .borderRadius(this.size / 2) // 设置为圆形
        .margin(5) // 圆点之间的间距
      })
    }
    // 以下样式用于将指示器定位到 Swiper 底部，替代 .right(1).bottom(6)
    .justify(FlexAlign.Center) // 水平居中
    .width('100%')
    .position({ x: 0, y: 0 })
    .margin({ bottom: 6 }) // 替代原来的 bottom(6)
  }
}

在 Swiper 中的使用方法

在你的页面中，引入并使用这个自定义组件：

import { HollowDotIndicator } from './HollowDotIndicator'; // 根据实际路径导入

@Entry
@Component
struct MySwiperPage {
  @State currentIndex: number = 0; // 控制当前页码的状态变量
  private totalPages: number = 5; // 总页数，根据你的数据源确定

  build() {
    Stack() { // 使用 Stack 将 Swiper 和 Indicator 叠放在一起
      Swiper() {
        // ... 你的 Swiper 子组件内容 ...
      }
      .index(this.currentIndex) // 绑定当前索引
      .onChange((index: number) => { // 滑动时回调，更新当前索引
        this.currentIndex = index;
      })
      .indicator(false) // 关键：必须关闭官方的指示器

      // 将自定义指示器放置在底部
      Column() {
        HollowDotIndicator({
          total: this.totalPages,
          current: this.currentIndex,
          inactiveColor: Color.White, // 空心圆为白色边框
          activeColor: Color.White,   // 实心圆为白色
          size: 7,
          strokeWidth: 1
        })
        .width('100%')
        .height(20) // 给指示器区域一定高度
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.End) // 将 Column 的内容（指示器）对齐到底部
      .margin({ bottom: 6 }) // 再调整一下整体到底部的距离
    }
  }
}

当系统默认的Indicator.dot()无法直接设置空心样式时，可以采用Stack布局+自定义组件的方式手动实现

禁用默认指示器

Swiper().indicator(false)  // 关闭系统默认导航点

添加自定义导航点容器

Stack({ alignContent: Alignment.Bottom }) {
  Swiper() { /* ...Swiper内容 */ }
  
  Row() { // 自定义导航点容器
    ForEach(this.dataArray, (_, index: number) => {
      Column() // 单个导航点
        .width(this.currentIndex === index ? 15 : 7)  // 选中态放大
        .height(7)
        .border({  // 关键空心效果实现
          width: 1,
          color: this.currentIndex === index ? Color.White : '#00ffffff',
        })
        .backgroundColor('#00000000')  // 透明背景实现空心
        .margin(5)
    })
  }
  .margin({ bottom: 20 })  // 调整垂直位置
}