前言：

各位同學有段時間沒有見面 因為一直很忙所以就沒有去更新博客。最近有在學習這個鴻蒙的ark ui開發 因為鴻蒙不是發布了一個鴻蒙next的測試版本 明年會啟動純血鴻蒙應用 所以我就想提前給大家寫一些博客文章

效果圖

具體實現

我們在鴻蒙的ark ui 里面列表使用我們的Swiper組件來實現 我們的輪播圖

準備數據源

import { PictureItem } from '../bean/PictureItem';/*** Pictures of banner.*/
export const PICTURE_BANNER: PictureItem[] = [{ 'id': '1', 'name': '怒海', 'description': '怒海波濤', 'image': $r('app.media.image1') },{ 'id': '2', 'name': '大山深處', 'description': '大山深處感人的親情之歌', 'image': $r('app.media.image2') },{ 'id': '3', 'name': '荒漠', 'description': '荒漠的親情之歌', 'image': $r('app.media.image3') }
];/*** type of pictures.*/
export enum PictureType {BANNER = 'banner',
}

Bean類

/*** Picture entity class.*/
export class PictureItem {id: string;name: string;description: string;image: Resource;constructor(id: string, name: string, description: string, image: Resource) {this.id = id;this.name = name;this.description = description;this.image = image;}
}

寬高常量配置

/*** Common constants for all features.*/
export class CommonConstants {/*** animation duration of tab content switching.*/static readonly DURATION_ADS = 200;/*** height of carousel title.*/static readonly HEIGHT_CAROUSEL_TITLE = 90;/*** fontSize of description.*/static readonly FONT_SIZE_DESCRIPTION = 12;/*** font size of title.*/static readonly FONT_SIZE_TITLE = 20;static readonly FONT_WEIGHT_LIGHT = 400;/*** bold font.*/static readonly FONT_WEIGHT_BOLD = 700;/*** page layout weight.*/static readonly LAYOUT_WEIGHT = 1;/*** border angle.*/static readonly BORDER_RADIUS = 12;/*** line height for more.*/static readonly LINE_HEIGHT_MORE = 19;/*** rolling duration.*/static readonly SWIPER_TIME = 1500;/*** margin of text bottom.*/static readonly BOTTOM_TEXT = 4;/*** margin of banner top.*/static readonly TOP_ADS = 12;/*** margin of banner left.*/static readonly ADS_LEFT = 12;/** maximum width.*/static readonly FULL_WIDTH = '100%';/*** maximum height.*/static readonly FULL_HEIGHT = '100%';/*** width of tab page.*/static readonly PAGE_WIDTH = '100%';/*** height of banner.*/static readonly HEIGHT_BANNER = '27%';}

具體布局

import router from '@ohos.router';
import { PictureItem } from '../bean/PictureItem';
import { PictureType } from '../constants/PictureConstants';
import { initializePictures, startPlay, stopPlay } from './PictureViewModel';
import { CommonConstants } from '../constants/CommonConstant';@Extend(Text) function textStyle(fontSize: number, fontWeight: number) {.fontSize(fontSize).fontColor($r('app.color.start_window_background')).fontWeight(fontWeight)
}/*** Carousel banner.*/
@Component
export struct Banner {@State index: number = 0;private imageArray: Array<PictureItem> = [];private swiperController: SwiperController = new SwiperController();aboutToAppear() {// Data Initialization.this.imageArray = initializePictures(PictureType.BANNER);// Turn on scheduled task.startPlay(this.swiperController);}aboutToDisappear() {stopPlay();}build() {Swiper(this.swiperController) {ForEach(this.imageArray, item => {Stack({ alignContent: Alignment.TopStart }) {Image(item.image).objectFit(ImageFit.Fill).height(CommonConstants.FULL_HEIGHT).width(CommonConstants.FULL_WIDTH).borderRadius(CommonConstants.BORDER_RADIUS).align(Alignment.Center).onClick(() => {console.log("點擊事件 item"+item.id)})Column() {Text($r('app.string.movie_classic')).textStyle(CommonConstants.FONT_SIZE_DESCRIPTION, CommonConstants.FONT_WEIGHT_LIGHT).margin({ bottom: CommonConstants.BOTTOM_TEXT })Text(item.name).textStyle(CommonConstants.FONT_SIZE_TITLE, CommonConstants.FONT_WEIGHT_BOLD)}.alignItems(HorizontalAlign.Start).height(CommonConstants.HEIGHT_CAROUSEL_TITLE).margin({ top: CommonConstants.TOP_ADS, left: CommonConstants.ADS_LEFT })}.height(CommonConstants.FULL_HEIGHT).width(CommonConstants.FULL_WIDTH)}, item => JSON.stringify(item))}.width(CommonConstants.PAGE_WIDTH).height(CommonConstants.HEIGHT_BANNER).index(this.index).indicatorStyle({ selectedColor: $r('app.color.start_window_background') }).indicator(true).duration(CommonConstants.DURATION_ADS)}
}

使用 indicator 屬性設置是否支持自動輪播

.indicator(true)

設置自動輪播間隔時間

.duration(CommonConstants.DURATION_ADS)

viewmodel 實現

import { PictureItem } from '../bean/PictureItem';
import { PICTURE_BANNER} from '../constants/PictureConstants';
import { PictureType } from '../constants/PictureConstants';
import { CommonConstants } from '../constants/CommonConstant';/*** Initialize picture data according to type.** @param initType Init type.*/
export function initializePictures(initType: string): Array<PictureItem> {let imageDataArray: Array<PictureItem> = [];switch (initType) {case PictureType.BANNER:PICTURE_BANNER.forEach((item) => {imageDataArray.push(new PictureItem(item.id, item.name, item.description, item.image));})break;default:break;}return imageDataArray;
}let timerIds: number[] = [];/*** start scheduled task.** @param swiperController Controller.*/
export function startPlay(swiperController: SwiperController) {let timerId = setInterval(() => {swiperController.showNext();}, CommonConstants.SWIPER_TIME);timerIds.push(timerId);
}/*** stop scheduled task.*/
export function stopPlay() {timerIds.forEach((item) => {clearTimeout(item);})
}

最后總結：

arkui 寫法和flutter非常的像 有興趣的同學可以多嘗試哈 今天的文章就講到這里 。最后呢 希望我都文章能幫助到各位同學工作和學習

為了能讓大家更好的學習鴻蒙 (Harmony OS) 開發技術，這邊特意整理了《鴻蒙 (Harmony OS)開發學習手冊》（共計890頁），希望對大家有所幫助：https://qr21.cn/FV7h05

《鴻蒙 (Harmony OS)開發學習手冊》

入門必看

1. 應用開發導讀(ArkTS)
2. 應用開發導讀(Java)

HarmonyOS 概念：https://qr21.cn/FV7h05

1. 系統定義
2. 技術架構
3. 技術特性
4. 系統安全

如何快速入門

1. 基本概念
2. 構建第一個ArkTS應用
3. 構建第一個JS應用
4. ……

開發基礎知識：https://qr21.cn/FV7h05

1. 應用基礎知識
2. 配置文件
3. 應用數據管理
4. 應用安全管理
5. 應用隱私保護
6. 三方應用調用管控機制
7. 資源分類與訪問
8. 學習ArkTS語言
9. ……

基于ArkTS 開發：https://qr21.cn/FV7h05

1. Ability開發
2. UI開發
3. 公共事件與通知
4. 窗口管理
5. 媒體
6. 安全
7. 網絡與鏈接
8. 電話服務
9. 數據管理
10. 后臺任務(Background Task)管理
11. 設備管理
12. 設備使用信息統計
13. DFX
14. 國際化開發
15. 折疊屏系列
16. ……