每一个组件都是精心打磨的诗行，每一次编译都是反复推敲的吟唱，我在IDE的湖面上投下代码的饵，期待在用户的屏幕里钓起满意的目光。

轮播图不只是个“幻灯片”

轮播图在App里太常见了，常见到我们常常忽略它的价值。但仔细想想，它其实是首页的“黄金广告位”——第一时间抓住用户眼球，引导他们发现精彩内容。

先看一下上一章我们实现的效果：

现在的轮播图虽然能滑动，但存在2个问题：

1. 没有文字说明，用户不知道图片在讲什么
2. 缺少操作入口，看到感兴趣的内容却点不进去

是时候给它来一次升级了！

1. 重新设计轮播图数据结构

首先，我得丰富轮播图的数据模型，为每个轮播项添加更多信息，这里我们比之前的版本，新增了 一个buttonText字段，用于定义跳转按钮的文本，调整完结果如下：

interface Carousel {
  id: number;
  title: string;
  subTitle: string;
  buttonText: string;
  image: string;
  link: string;
}

// 在首页数据中更新轮播图数据
@State carousels: Array<Carousel> = [
    { id: 1, 
      title: '钓鱼云助手', 
      subTitle: '钓鱼人的好帮手', 
      buttonText: '开始使用', 
      image: 'https://image.xiaoxiaofeng.site/blog/image/686eb37643134371e5cca347c4c87edb.jpg?xiaoxiaofeng', 
      link: '' 
    },
    { id: 2, 
      title: '发现身边绝佳钓位', 
      subTitle: '全网钓友实时分享', 
      buttonText: '寻找钓点', 
      image: 'https://image.xiaoxiaofeng.site/blog/image/2025/10/09/xxf-20251009223419.png?xiaoxiaofeng', 
      link: '' 
    },
    { id: 3, 
      title: '秋季鲫鱼渔获大赛', 
      subTitle: '参与活动赢取限量版钓具', 
      buttonText: '立即参与', 
      image: 'https://image.xiaoxiaofeng.site/blog/image/2025/10/09/xxf-20251009230434.png?xiaoxiaofeng', 
      link: '' 
    }
  ]

2. Swiper使用形式总结

Swiper组件有很高的自定义性，我们可以根据自己的需求去调整，简单总结了鸿蒙ArkTS中使用轮播图（Swiper）组件的主要形式，如下表所示：

特性 / 配置项	功能描述	实现方式 / 属性值
基础用法	创建一个可横向滑动的轮播图。	使用 Swiper() 组件包裹子组件（如 Text()、Image()）即可。
垂直轮播	将轮播方向设置为垂直方向。	设置 Swiper() 的 vertical 属性为 true。 Swiper({ vertical: true }) { ... }
自动轮播	轮播图按照设定的时间间隔自动切换。	设置 autoplay 属性为 true。 Swiper({ autoplay: true }) { ... }
轮播间隔	控制自动轮播时每一页停留的时间。	设置 interval 属性，单位为毫秒。 Swiper({ autoplay: true, interval: 3000 }) { ... }
无限轮播	是否开启循环轮播（即最后一页后切换到第一页）。	设置 loop 属性为 true（默认值）。 false 为不循环，滑到边缘后无法继续滑动。
页码指示器	显示当前页码和总页数的指示点。	使用 indicator 属性进行样式配置。
▪ 指示器位置	控制指示器在轮播图中的位置。	通过 indicatorStyle 下的 position 属性设置。 例如：{ position: SwiperIndicatorPosition.End }
▪ 指示器样式	自定义指示器的颜色、大小等。	通过 indicatorStyle 下的 color, selectedColor, size 等属性设置。
页面切换动画	设置页面切换时的动画曲线。	设置 curve 属性，可选如 Curve.Linear, Curve.Ease 等。
禁用滑动	禁止用户通过手势滑动切换。	设置 disableSwipe 属性为 true。
监听事件	监听页面的变化。	使用 onChange 事件，当页码改变时触发。 Swiper({ ... }).onChange((index: number) => { ... })

当然了，除了表格中的这些，还有很多，大家可以前往鸿蒙社区学习：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-layout-development-create-looping

3. 轮播图组件重构

之前的轮播图我只设置了一个图片，现在要把标题、副标题、点击按钮等元素添加到轮播图上，同时需要添加按钮点击事件。

这里我们每个轮播图组件图片和内容之间，使用Stack层叠布局，内容使用Column线性布局。

我们一起来看下官方对这两种布局的介绍

• 层叠布局

用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。

• 线性布局

线性布局是开发中最常用的布局，通过线性容器Row和Column构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Row容器内子元素按照水平方向排列，Column容器内子元素按照垂直方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。

具体的实现代码如下：

@Component
struct PromotionSection {
  @Prop carousels: Carousel[];
  @State currentIndex: number = 0;


  // 处理轮播图点击事件
  private handleCarouselClick(item: Carousel): void {
    // 这里添加页面跳转逻辑
    
  }

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      // 1. 轮播图主体
      Swiper(){
        ForEach(this.carousels, (item: Carousel) => {
          // 每个轮播项都是一个堆叠布局
          Stack({ alignContent: Alignment.BottomStart }) {
            // 背景图片
            Image(item.image)
              .width('100%')
              .height(200)
              .objectFit(ImageFit.Cover)

            // 内容区域
            Column({ space: 8 }) {
              // 主标题
              Text(item.title)
                .fontSize(20)
                .fontWeight(FontWeight.Bold)
                .fontColor('#000')
                .textOverflow({ overflow: TextOverflow.Ellipsis })
                .maxLines(1)
                .textAlign(TextAlign.Start)

              // 副标题
              Text(item.subTitle)
                .fontSize(14)
                .fontColor('#000')
                .opacity(0.9)
                .textOverflow({ overflow: TextOverflow.Ellipsis })
                .maxLines(2)
                .textAlign(TextAlign.Start)

              // 操作按钮
              Button(item.buttonText, { type: ButtonType.Capsule })
                .width(120)
                .height(36)
                .fontSize(14)
                .backgroundColor('#ff70a267')
                .margin({ top: 12 })
                .onClick(() => {
                  this.handleCarouselClick(item);
                })
            }
            .alignItems(HorizontalAlign.Start)
            .padding({ left: 24, right: 24, bottom: 24 })
          }
          .width('100%')
          .height(200)
          .borderRadius(16)
          .onClick(() => {
            this.handleCarouselClick(item);
          })
        })
      }
      .width('100%')
      .height(200)

    }
    .width('100%')
    .height(200)
  }
}

4. 添加视觉增强效果

可以根据需求需要，为轮播图增强视觉效果，例如为图片添加遮罩层。

添加前vs添加后的效果对比图

具体代码如下：

...更多代码不展示
  // 创建图片渐变遮罩
  @Builder createImageOverlay(bgColor: string) {
    Column() {
      // 从透明到指定颜色的渐变遮罩
      Row()
        .width('100%')  // 明确组件宽度
        .height('100%')    // 明确组件高度
        .linearGradient({
          angle: 180,   // 默认渐变方向为底部到顶部（垂直渐变）
          colors: [
            ['#00000000', 0.0],  // 起始位置：完全透明
            ['#ff44445b', 1.0]   // 结束位置：不透明
          ]
        })
    }
    .width('100%')
    .height('60%')
    .position({ x: 0, y: '40%' })
  }

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      // 1. 轮播图主体
      Swiper(){
        ForEach(this.carousels, (item: Carousel) => {
          // 每个轮播项都是一个堆叠布局
          Stack({ alignContent: Alignment.BottomStart }) {
            // 背景图片
            Image(item.image)
              .width('100%')
              .height(200)
              .objectFit(ImageFit.Cover)
              .overlay(this.createImageOverlay('#FF857E7E'))
              .scale({ x: this.isActive ? 1.02 : 1, y: this.isActive ? 1.02 : 1 })
              .animation({
                duration: 300,
                curve: Curve.EaseOut
              })
...更多代码不展示

成果展示

让我们一起看一下，轮播图组件改造后的展现成果吧，主题、副标题等元素成功展示，跳转按钮也成功添加，同时给图片加了一层渐变的遮罩蒙层，针对一些颜色不是很明显的图片，更能突出视觉效果。

改造前vs改造后

本篇文章就到这里了，下篇文章让我们一起对金刚区进行改造。我们下篇文章见~