鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Marquee组件
一、操作环境
操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1+
二、Marquee组件
跑马灯组件，用于滚动展示一段单行文本，仅当文本内容宽度超过跑马灯组件宽度时滚动。
子组件
无
接口
Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string })
从API version 9开始，该接口支持在ArkTS卡片中使用。
参数
参数名 参数类型 必填 参数描述 start boolean 是 控制跑马灯是否进入播放状态。 说明： 有限的滚动次数播放完毕后，不可以通过改变start重置滚动次数重新开始播放。 step number 否 滚动动画文本滚动步长。 默认值：6，单位vp loop number 否 设置重复滚动的次数，小于等于零时无限循环。 默认值：-1 说明： ArkTS卡片上该参数设置任意值都仅在可见时滚动一次。 fromStart boolean 否 设置文本从头开始滚动或反向滚动。 默认值：true src string 是 需要滚动的文本。
属性
除支持文本通用属性：fontColor、fontSize、fontWeight、fontFamily外，还支持以下属性：
名称 参数类型 描述 allowScale boolean 是否允许文本缩放。 暂不支持该接口。 默认值：false
事件
名称 功能描述 onStart(event: () => void) 开始滚动时触发回调。 从API version 9开始，该接口支持在ArkTS卡片中使用。 onBounce(event: () => void) 完成一次滚动时触发，若循环次数不为1，则该事件会多次触发。 从API version 9开始，该接口支持在ArkTS卡片中使用。 onFinish(event: () => void) 滚动全部循环次数完成时触发回调。 从API version 9开始，该接口支持在ArkTS卡片中使用。
三、示例
代码
// xxx.ets
@Entry
@Component
struct MarqueeExample {
@State start: boolean = false
private fromStart: boolean = true
private step: number = 50
private loop: number = Infinity
private src: string = "Running Marquee starts rolling"
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Marquee({
start: this.start,
step: this.step,
loop: this.loop,
fromStart: this.fromStart,
src: this.src
})
.width(360)
.height(80)
.fontColor('#FFFFFF')
.fontSize(48)
.fontWeight(700)
.backgroundColor('#182431')
.margin({ bottom: 40 })
.onStart(() => {
console.info('Marquee animation complete onStart')
})
.onBounce(() => {
console.info('Marquee animation complete onBounce')
})
.onFinish(() => {
console.info('Marquee animation complete onFinish')
})
Button('Start')
.onClick(() => {
this.start = true
})
.width(120)
.height(40)
.fontSize(16)
.fontWeight(500)
.backgroundColor('#007DFF')
}
.width('100%')
.height('100%')
}
}
图例
你有时间常去我家看看我在这里谢谢你啦...
我家地址:亚丁号
最后送大家一首诗:
山高路远坑深, 大军纵横驰奔,
谁敢横刀立马？ 惟有点赞加关注大军。
好文链接
发表评论