轮播图导航组件 | 纯血鸿蒙组件库AUI

摘要：

轮播图导航(A_SwiperNav)：实现沉浸式体验的App全屏轮播引导页效果。可设置图片数据(含文本、图片地址、路由、标题、子标题)，可设置按钮颜色。

一、在页面当中调用轮播图导航组件

打开"pages/lndex.ets"，我们只需要输入"A_SwiperNav"，然后给属性data和color赋值。如下图所示：

示范代码如下：

`import { A_SwiperNav } from '../aui/navigation/A_SwiperNav'

import { ColorConstants } from '../constants/ColorConstants'

import { GirdConstants } from '../constants/GirdConstants'

import { WindowUtils } from '../utils/WindowUtils'

@Entry

@Component

struct Index {

aboutToAppear() {

WindowUtils.getInstance()?.setFullScreen()

}

build() {

Column() {

A_SwiperNav({

data: [

{

text: '立即体验',

src: 'https://cdn.aigcoder.com/sample/SwiperNav/swiper_image1.png',

router: 'HomeHome',

title: 'AI极客',

subTitle: 'AIGC赋能程序开发，降本增效，快速生成前后端全技术栈代码。'

{

text: '设计App',

src: 'https://cdn.aigcoder.com/sample/SwiperNav/swiper_image2.png',

router: 'HomeAccount',

title: '纯血鸿蒙',

subTitle: '纯血鸿蒙开发神器，快速开发高质量鸿蒙应用。'

}

color: ColorConstants.DANGER

})

复制代码

}
.width(GirdConstants.FULL_PERCENT)
.height(GirdConstants.FULL_PERCENT)
.backgroundColor(ColorConstants.APP_BG)
.justifyContent(FlexAlign.Center)

}

在DevEco Studio中选择本地模拟器，然后运行示范项目，效果如下：

二、在线排版

提示：轮播图导航组件是App引导页专用组件，其它类型页面无法使用该组件。

将轮播图导航组件拖拽到排版区左上角，如下图所示：

配置导航项的数据。注意：初始化数据中的路由"/home"必须改为存在的页面，否则生成鸿蒙代码时无法通过数据有效性检查。

可选择不同的导航按钮颜色，点击"保存设置"：

生成纯血鸿蒙代码：

三、源码解析

轮播图导航组件有两个属性，data(轮播图数据)和color(按钮颜色)：

data 是一个数组(Array)类型的数据，它接受 ImageModel 的数据结构，包含图片地址、按钮、文字、大标题、子标题和页面跳转的路由：

ImageModel源码如下：

`/*

图片导航Model
src：图片地址(支持"https://xxx"远程图片和media文件夹的本地图片)
text：文字
title：标题
subTitle：子标题
router：路由
*/

interface ImageModel {

src: string

text?: string

title?: string

subTitle?: string

router?: string

};

export { ImageModel };

现在，我们继续分析轮播图导航组件 A_SwiperNav 的源码。

aboutToAppear函数在创建自定义组件的新实例后，在执行其build()函数之前执行。在aboutToAppear函数中检查轮播图的数据，如果图片的地址不是以http或者https开头的时候，会被认为是一个本地资源图片：

那么会给这个图片地址之前加上一个"app.media."的前缀, 它会对应"/resources/base/media"下面的资源文件：

轮播图导航组件是在鸿蒙官方 Swiper 组件的基础之上做的二次封装。它会自动播放(autoPlay)，循环播放(loop)，下面的指示的点(indicator)会在设备类型是手机类型(DEVICE_SM)的时候才显示，如下图所示的这个蓝色的点。（在平板和折叠屏下面这个点是不显示的）：

轮播图的数据通过 ForEach 的方式进行循环，里面首先会有一个列组件(Column)，控制轮播背景图片的表现，列组件的宽度和高度都是100%(FULL_PERCENT)，这个就使轮播图撑满整个屏幕，实现沉浸式的体验：

当背景图片是远程地址的时候，就直接显示这个远程地址(item.src)，否则，会通过 "

"也就是用资源的方式来调用【

r"也就是用资源的方式来调用【r(item.src)】。图片的模式是采用Cover的方式来铺满。背景图的位置x坐标(也就是横坐标)，当设备类型是手机的时候，会将它的坐标向左偏移 100vp，平板和折叠屏的时候不做改变，这样三端设备显示同一张远程图片的时候，相对显示都达到最完美的程度:

展开列组件，这里最主要的是由两个文本组件(Text)和一个按钮组件(Button)组成，第一个文本组件对应的是轮播图上面的大标题(item.title)，这里设置它的文字内容、字号、颜色和宽度，第二个文本组件显示的是子标题(item.subTitle)，如下图所示：

这里的 this.color 使用的是按钮颜色属性：

该按钮有个点击事件，当路由值不为空的时候，它会跳转到这个路由目标，如下图所示:

轮播图导航组件的源码如下：

`/*

Copyright (c) 2024 AIGCoder.com(AI极客)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

复制代码

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

import { ColorConstants } from "../../constants/ColorConstants"

import { FloatConstants } from "../../constants/FloatConstants"

import { GirdConstants } from "../../constants/GirdConstants"

import { ImageModel } from "../../models/ImageModel"

/**

【轮播图导航】
data：图片数据
color：按钮颜色
*/
@Component
export struct A_SwiperNav {
@Prop data: Array
@Prop color?: ResourceStr

@StorageLink('pageInfo') pageInfo: NavPathStack = new NavPathStack()

@StorageLink('deviceType') deviceType: string = GirdConstants.DEVICE_SM

private compData: Array = this.data

aboutToAppear(): void {

this.compData.forEach(element => {

if(!(element.src.startsWith("http://") || element.src.startsWith("https://"))){

element.src = 'app.media.' + element.src

}

})

}

build() {

Swiper() {

ForEach(this.compData, (item: ImageModel) => {

Column() {

Text(item.title)

.fontSize(FloatConstants.FONT_SIZE_TITLE_L)

.fontColor(ColorConstants.FG_LEVEL1_ALPHA)

.width(GirdConstants.FULL_PERCENT)

Text(item.subTitle)

.fontSize(FloatConstants.FONT_SIZE_TITLE_M)

.fontColor(ColorConstants.FG_LEVEL2_ALPHA)

.width(GirdConstants.FULL_PERCENT)

.margin({

top: FloatConstants.SPACE_S

})

Blank()

Column() {

Button() {

Text(item.text)

.fontSize(FloatConstants.FONT_SIZE_BODY_L)

.fontColor(ColorConstants.FG_LEVEL1_ALPHA)

}

.backgroundColor(this.color)

.width(FloatConstants.BUTTON_WIDTH1)

.height(FloatConstants.HEIGHT_BUTTON_L)

.onClick(() => {

if (item.router) {

// 跳转到新页面

const router = item.router

if (router.includes("/")) {

this.pageInfo.pushPathByName(router.substring(0, router.indexOf("/")),

router.substring(router.indexOf("/") + 1))

} else {

this.pageInfo.pushPathByName(router, null)

}

})

}

.alignItems(HorizontalAlign.End)

.width(GirdConstants.FULL_PERCENT)

}

.width(GirdConstants.FULL_PERCENT)

.height(GirdConstants.FULL_PERCENT)

.backgroundImage((item.src.startsWith("http://") || item.src.startsWith("https://")) ? item.src : $r(item.src))

.backgroundImageSize(ImageSize.Cover)

.backgroundImagePosition({ x: this.deviceType === GirdConstants.DEVICE_SM ? -100 : 0 })

复制代码

      .padding({
        top: this.deviceType === GirdConstants.DEVICE_SM ? GirdConstants.THIRTY_PERCENT : GirdConstants.TEN_PERCENT,
        bottom: GirdConstants.TEN_PERCENT,
        left: GirdConstants.TEN_PERCENT,
        right: GirdConstants.TEN_PERCENT
      })
  }, (item: ImageModel, index: number) => index + JSON.stringify(item))
}
.autoPlay(true)
.loop(true)
.indicator(this.deviceType === GirdConstants.DEVICE_SM)

}

下面还有一个按钮组件。按钮组件的背景颜色设置为变量 this.color：