鸿蒙（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%') } }
图例
编辑
你有时间常去我家看看我在这里谢谢你啦...
我家地址:亚丁号
最后送大家一首诗:
山高路远坑深,
大军纵横驰奔,
谁敢横刀立马？
惟有点赞加关注大军。
