鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Marquee组件
鸿蒙（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 = falseprivate fromStart: boolean = trueprivate step: number = 50private loop: number = Infinityprivate 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%')}
}图例
你有时间常去我家看看我在这里谢谢你啦...
我家地址:亚丁号
最后送大家一首诗:
山高路远坑深,
大军纵横驰奔,
谁敢横刀立马？
惟有点赞加关注大军。