想了解更多關于開源的內容，請訪問：

51CTO 開源基礎軟件社區

https://ost.51cto.com

場景說明

輪播圖是一個在固定區域內輪流展示多張圖片或文本信息的組件。輪播圖會在預設時間間隔內，自動或手動切換到下一張圖片。輪播圖的應用場景包括首頁輪播圖、圖片展示、廣告推廣和新聞資訊等，作用主要是通過多張圖片的切換，提高頁面的信息密度，增加視覺沖擊力，為用戶呈現更全面、更直觀的信息。OpenHarmony可以使用Swiper輪播組件實現輪播圖。

本例基于橘子購物示例應用，為大家介紹輪播組件Swiper，該組件提供滑動輪播顯示的能力。

效果呈現

橘子購物示例應用首頁輪播圖的實現效果如下：

OpenHarmony使用Swiper組件實現輪播圖-開源基礎軟件社區

開發實現

在橘子購物示例應用中，輪播圖實現的核心代碼位于：OrangeShopping/feature/navigationHome/src/main/ets/components/home/Swiper.ets。

橘子購物示例應用中輪播圖部分代碼如下：

import { INDEX_DATA } from '../../mock/ProductsData'

@Component
export struct SwiperComponent {
  @StorageProp('curBp') curBp: string = 'md'

  build() {
    Swiper() {
      ForEach(INDEX_DATA, item => {
        Image(item.img)
          .objectFit(ImageFit.Cover)
          .width('100%')
          .height('100%')
          .borderRadius(16)
      })
    }
    .padding({ left: 12, right: 12 })
    .height(170)
    .autoPlay(true)
    .itemSpace(20)
    .displayCount(this.curBp === 'sm' ? 1 : this.curBp === 'md' ? 2 : 3)
    .indicatorStyle({
      selectedColor: $r('app.color.red'),
      color: $r('app.color.white')
    })
  }
}

接下來，我們一起學習下這些代碼。

組件代碼

在上述代碼中，在Swiper組件中通過ForEach函數遍歷INDEX_DATE這個SwiperModel數組，將每一個SwiperModel對象中的圖片用Image組件展示出來。

另外，通過Swiper的.displayCount()屬性對不同尺寸的窗口設置不同的每頁子組件顯示個數。此處狀態變量curBp被StorageProp裝飾器所裝飾，將與AppStorage建立單向數據綁定，該狀態變量的值將使用AppStorage中的值進行初始化，AppStorage中的屬性值的更改會導致綁定的UI組件進行狀態更新。裝飾器在這里不做贅述，有興趣可以查看文檔：應用級變量的狀態管理 · HarmonyOS應用開發。

對于屏幕尺寸進行說明：xs代表最小寬度類型設備，sm代表小屏，md代表中屏，lg代表大屏。

代碼中涉及到的Swiper組件的特有屬性用法如下，如果需要詳細了解輪播組件，可以查看：輪播組件(Swiper) · 開發指南。也可以查閱Swiper容器組件 · HarmonyOS應用開發了解更多Swiper組件屬性。

輪播圖少不了和Image組件打交道，如果想要了解更多Image組件屬性，請查閱：Image-基礎組件 · HarmonyOS應用開發；如果想要獲取Image組件的使用示例，請查閱：顯示圖片(Image) · OpenHarmony/docs - Gitee.com。

橘子購物示例應用輪播組件中涉及的Image組件的特有屬性用法如下：

其中，ImageFit參數包含如下選項：

導入和導出

export：在聲明時將 SwiperComponent 這個組件導出，導出的組件可以被其他ets文件導入。

import：首行使用import從相對路徑../../mock/ProductsData這個文件中導入INDEX_DATA常量數組

export const INDEX_DATA: Array<SwiperModel> = [
  { id: 0, img: $r('app.media.banner_movie1') },
  { id: 1, img: $r("app.media.banner_movie3") },
  { id: 2, img: $r('app.media.banner_movie1') },
  { id: 3, img: $r("app.media.banner_movie3") }
]

SwiperModel的定義，用于構建一個輪播對象實例。

export class SwiperModel {
  constructor(public id: number, public img: Resource) {
    this.id = id
    this.img = img
  }
}

資源的分類與訪問

應用開發中使用的各類資源文件，需要放入特定子目錄中存儲管理。resources目錄包括三大類目錄，一類為base目錄，一類為限定詞目錄，還有一類為rawfile目錄。stage模型多工程情況下共有的資源文件放到AppScope下的resources目錄，base目錄默認存在。

base目錄的二級子目錄為資源組目錄，用于存放字符串、顏色、布爾值等基礎元素，以及媒體、動畫、布局等資源文件。

在工程中，通過$r('app.type.name')的形式引用應用資源，$r是一個全局函數，接收一個字符串路徑并返回這個資源文件。app代表應用內resources目錄中定義的資源；type代表資源類型（或資源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”，name代表資源命名，由開發者定義資源時確定。

應用使用某資源時，系統會根據當前設備狀態優先從相匹配的限定詞目錄中尋找該資源。只有當resources目錄中沒有與設備狀態匹配的限定詞目錄，或者在限定詞目錄中找不到該資源時，才會去base目錄中查找。rawfile是原始文件目錄，不會根據設備狀態去匹配不同的資源。

本例中對圖片的引用 "app.media.banner_movie1" 和對顏色的引用$r('app.color.white')，分別對應resources/base/media/banner_movie1.png這張圖片和resources/base/element/color.json這個json文件中的white顏色值。

關于資源的分類與訪問，此處不做詳細描述。官方資料見參考文檔：資源分類與訪問 · HarmonyOS應用開發。

想了解更多關于開源的內容，請訪問：

51CTO 開源基礎軟件社區

https://ost.51cto.com