华为仓颉鸿蒙HarmonyOS NEXT原生UI组件Swiper（banner轮播图）

你敢信，鸿蒙HarmonyOS NEXT直接把banner轮播图给你们写好了，像iOS，flutter，安卓等平台都需要开发者去封装的，鸿蒙直接给你们写好了！看来方便开发者并不是说说而已的。

------------------------🌹🌹求关注🌹🌹------------------------

本文篇幅较长，建议点赞收藏，以免找不到哟(＾Ｕ＾)ノ~ＹＯ

滑块视图容器，提供子组件滑动轮播显示的能力。

子组件

可以包含子组件。

构造函数

init(() -> Unit)

public init(subcomponent: () -> Unit)

创建一个可包含子组件的 Swiper 容器。

参数类型	必填	默认值	描述
() -> Unit	是		Swiper 容器的子组件。

init(SwiperController, () -> Unit)

public init(controller: SwiperController, subcomponent: () -> Unit)

创建一个包含 Swiper 组件控制器和子组件的 Swiper 容器。

参数类型	必填	默认值	描述
SwiperController	是	-	Swiper 组件控制器对象，可用于控制组件翻页等行为。
() -> Unit	是		Swiper 容器的子组件。

函数

index(UInt32)

public func index(value: UInt32): This

设置当前在容器中显示的子组件的索引值。

参数类型	必填	默认值	描述
UInt32	是	0	在容器中显示的子组件的索引值。说明：设置大于等于子组件数量时，按照默认值0处理。

autoPlay(Bool)

public func autoPlay(value: Bool): This

设置子组件是否自动播放。

参数类型	必填	默认值	描述
Bool	是	false	在容器中的子组件是否自动播放。说明： loop为false时，自动轮播到最后一页时停止轮播。

interval(UInt32)

public func interval(value: UInt32): This

设置使用自动播放时播放的时间间隔。

参数类型	必填	默认值	描述
UInt32	是	3000	使用自动播放时播放的时间间隔，单位为毫秒。

indicator(Bool)

public func indicator(value: Bool): This

设置是否启用导航点指示器。

参数类型	必填	默认值	描述
Bool	是	true	是否启用导航点指示器。

loop(Bool)

public func loop(value: Bool): This

设置是否开启循环。

参数类型	必填	默认值	描述
Bool	是	true	是否开启循环。设置为true时表示开启循环，在LazyForEach懒循环加载模式下，加载的组件数量建议大于5个。

duration(UInt32)

public func duration(value: UInt32): This

设置子组件切换的动画时长。

duration需要和curve一起使用。

参数类型	必填	默认值	描述
UInt32	是	400	子组件切换的动画时长，单位为毫秒。

vertical(Bool)

public func vertical(value: Bool): This

设置是否纵向滑动。

参数类型	必填	默认值	描述
Bool	是	false	是否为纵向滑动。

itemSpace(Length)

public func itemSpace(value: Length): This

设置子组件与子组件之间间隙。

参数类型	必填	默认值	描述
Length	是	0	子组件与子组件之间间隙。说明：不支持设置百分比。默认单位vp。

itemSpace(CJResource)

public func itemSpace(value: CJResource): This

设置子组件与子组件之间间隙。

参数类型	必填	默认值	描述
CJResource	是	0	子组件与子组件之间间隙。说明：不支持设置百分比。默认单位vp。

itemSpace(Float64)

public func itemSpace(value: Float64): This

设置子组件与子组件之间间隙。

参数类型	必填	默认值	描述
Float64	是	0	子组件与子组件之间间隙。说明：不支持设置百分比。默认单位vp。

itemSpace(Int64)

public func itemSpace(value: Int64): This

设置子组件与子组件之间间隙。

参数类型	必填	默认值	描述
Int64	是	0	子组件与子组件之间间隙。说明：不支持设置百分比。默认单位vp。

displayMode(SwiperDisplayMode)

public func displayMode(value: SwiperDisplayMode): This

设置主轴方向上元素排列的模式。

参数类型	必填	默认值	描述
SwiperDisplayMode	是	SwiperDisplayMode.Stretch	主轴方向上元素排列的模式，优先以displayCount设置的个数显示，displayCount未设置时本属性生效。

cachedCount(Int32)

public func cachedCount(value: Int32): This

设置预加载子组件个数。

参数类型	必填	默认值	描述
Int32	是	1	预加载子组件个数。说明：设置预加载子组件个数, 以当前页面为基准，加载当前显示页面的前后个数。例如cachedCount=1时，会将当前显示的页面的前面一页和后面一页的子组件都预加载。如果设置为按组翻页，即displayCount的swipeByGroup参数设为true，预加载时会以组为基本单位。例如cachedCount=1，swipeByGroup=true时，会将当前组的前面一组和后面一组的子组件都预加载。

disableSwipe(Bool)

public func disableSwipe(value: Bool): This

设置禁用组件滑动切换功能。

参数类型	必填	默认值	描述
Bool	是	false	是否禁用组件滑动切换功能。

curve(Curve)

public func curve(value: Curve): This

设置Swiper的动画曲线。

参数类型	必填	默认值	描述
Curve	是	-	设置Swiper的动画曲线，常用曲线参考Curve枚举说明。

displayCount(Int32)

public func displayCount(value: Int32): This

设置Swiper视窗内元素显示个数。

参数类型	必填	默认值	描述
Int32	是	1	视窗内显示的子元素个数。说明：设置小于等于0时，按默认值1显示。

effectMode(EdgeEffect)

public func effectMode(value: EdgeEffect): This

设置边缘滑动效果。

参数类型	必填	默认值	描述
EdgeEffect	是	EdgeEffect.Spring	边缘滑动效果，loop 为 false 时生效。目前支持的滑动效果参见 EdgeEffect 的枚举说明。说明：控制器接口调用时不生效回弹。

indicatorStyle(Length, Length, Length, Length, Length, Color, Color, Bool)

public func indicatorStyle(
        left!: Length = (-1.0).vp,
        top!: Length = (-1.0).vp,
        right!: Length = (-1.0).vp,
        bottom!: Length = (-1.0).vp,
        size!: Length = (10.0).vp,
        color!: Color = Color(0x0c000000),
        selectedColor!: Color = Color(0xff0a59f7),
        mask!: Bool = false
    )

设置导航点样式。

参数名	参数类型	必填	默认值	描述
left	Length	否	(-1.0).vp	设置导航点距离Swiper组件左边的距离。
top	Length	否	(-1.0).vp	设置导航点距离Swiper组件顶部的距离。
right	Length	否	(-1.0).vp	设置导航点距离Swiper组件右边的距离。
bottom	Length	否	(-1.0).vp	设置导航点距离Swiper组件底部的距离。
size	Length	否	(10.0).vp	设置导航点的直径，不支持设置百分比。
color	Color	否	Color(0x0c000000)	设置是否显示导航点蒙层样式。
selectedColor	Color	否	Color(0xff0a59f7)	设置导航点的颜色。
mask	Bool	否	false	设置选中的导航点的颜色。

indicatorStyle(Float64, Float64, Float64, Float64, Float64, UInt32, UInt32, Bool)

public func indicatorStyle(
        left!: Float64 = -1.0,
        top!: Float64 = -1.0,
        right!: Float64 = -1.0,
        bottom!: Float64 = -1.0,
        size!: Float64 = 10.0,
        color!: UInt32 = 0x0c000000,
        selectedColor!: UInt32 = 0xff0a59f7,
        mask!: Bool = false
    )

设置导航点样式。

参数名	参数类型	必填	默认值	描述
left	Float64	否	-1.0	设置导航点距离Swiper组件左边的距离。
top	Float64	否	-1.0	设置导航点距离Swiper组件顶部的距离。
right	Float64	否	-1.0	设置导航点距离Swiper组件右边的距离。
bottom	Float64	否	-1.0	设置导航点距离Swiper组件底部的距离。
size	Float64	否	10.0	设置导航点的直径，不支持设置百分比。
color	UInt32	否	0x0c000000	设置是否显示导航点蒙层样式。
selectedColor	UInt32	否	0xff0a59f7	设置导航点的颜色。
mask	Bool	否	false	设置选中的导航点的颜色。

枚举说明

SwiperDisplayMode

SwiperDisplayMode 表示 Swiper 组件滑动的宽度。

枚举值	描述
Stretch	Swiper滑动一页的宽度为Swiper组件自身的宽度。
AutoLinear	Swiper滑动一页的宽度为视窗内最左侧子组件的宽度。

Curve

Curve 表示常用动画曲线说明。

枚举值	描述
Linear	表示动画从头到尾的速度都是相同的。
Ease	表示动画以低速开始，然后加快，在结束前变慢，CubicBezier(0.25, 0.1, 0.25, 1.0)。
EaseIn	表示动画以低速开始，CubicBezier(0.42, 0.0, 1.0, 1.0)。
EaseOut	表示动画以低速结束，CubicBezier(0.0, 0.0, 0.58, 1.0)。
EaseInOut	表示动画以低速开始和结束，CubicBezier(0.42, 0.0, 0.58, 1.0)。
FastOutSlowIn	标准曲线，cubic-bezier(0.4, 0.0, 0.2, 1.0)。
LinearOutSlowIn	减速曲线，cubic-bezier(0.0, 0.0, 0.2, 1.0)。
FastOutLinearIn	加速曲线，cubic-bezier(0.4, 0.0, 1.0, 1.0)。
ExtremeDeceleration	急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。
Sharp	锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。
Rhythm	节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。
Smooth	平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。
Friction	阻尼曲线，CubicBezier(0.2, 0.0, 0.2, 1.0)。

SwiperController

SwiperController 是 Swiper 容器组件的控制器，可以定义该类型的对象并绑定至 Swiper 组件，实现控制子组件的翻页。

init()

public init()

创建一个 SwiperController 类型的对象。

showNext()

public func showNext(): Unit

翻至下一页。翻页带动效切换过程，时长通过 duration 指定。

showPrevious()

public func showPrevious(): Unit

翻至上一页。翻页带动效切换过程，时长通过 duration 指定。

finishAnimation()

public func finishAnimation(): Unit

停止播放动画。

说明

finishAnimation暂不支持混合页面场景。

finishAnimation(() -> Unit)

public func finishAnimation(callback: () -> Unit): Unit

停止播放动画。

说明

finishAnimation暂不支持混合页面场景。

参数类型	必填	描述
() -> Unit	是	动画结束的回调函数。

事件

onChange((Int32) -> Unit)

public func onChange(callback: (Int32) -> Unit): This

说明

onChange暂不支持混合页面场景。

事件名	参数类型	必填	描述
onChange	(Int32) -> Unit	是	当前显示的子组件索引变化时触发该事件。

示例

import ohos.base.*
    import ohos.component.*
    import ohos.state_manage.*
    import ohos.state_macro_manage.*
    import std.collection.*
    
    class MyDataSource <: IDataSource<Int64> {
        public MyDataSource(let data_: ArrayList<Int64>) {}
        public var listenerOp: Option<DataChangeListener> = None
        public func getData(index: Int64): Int64 {
            return data_[index]
        }
    
        public func onRegisterDataChangeListener(listener: DataChangeListener): Unit {
            listenerOp = listener
        }
    
        public func onUnregisterDataChangeListener(listener: DataChangeListener): Unit {
            listenerOp = None
        }
    
        public func totalCount(): Int64 {
            return data_.size
        }
    }
    
    let myDataSource: MyDataSource = MyDataSource(ArrayList<Int64>(10, {i => i}))
    
    @Entry
    @Component
    class MyView {
        var controller: SwiperController = SwiperController()
        @State
        var message: Int32 = 0
        func build() {
            Column(5) {
                Swiper(controller) {
                    LazyForEach(myDataSource, itemGeneratorFunc: {element: Int64, index: Int64 =>
                        Text(element.toString())
                        .size(width: 90.percent, height: 160.px)
                        .backgroundColor(0xafeeee)
                        .textAlign(TextAlign.Center)
                        .fontSize(30)
                    })
                }
                .cachedCount(2)
                .index(1)
                .autoPlay(true)
                .interval(4000)
                .loop(true)
                .duration(1000)
                .itemSpace(0)
                .curve(Curve.Linear)
                .onChange( {
                        index => AppLog.info(index.toString())
                    })
    
                Row(12) {
                    Button("showNext").onClick({
                        evt => controller.showNext()
                    })
                    Button("showPrevious").onClick({
                        evt => controller.showPrevious()
                    })
                }.margin(5)
            }
            .width(100.percent)
            .margin(5)
        }
    }

如对您有帮助，帮忙点个“在看、关注” 让更多的人受益~！

技术交流群可加wx“LB-9191”备注cangjie

posted @ 2024-12-24 21:40 BisonLiu 阅读(194) 评论(0) 收藏举报

刷新页面返回顶部

_Bison

华为仓颉鸿蒙HarmonyOS NEXT原生UI组件Swiper（banner轮播图）

公告