本文主要是介绍鸿蒙(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%')}
}
图例
你有时间常去我家看看我在这里谢谢你啦...
我家地址:亚丁号
最后送大家一首诗:
山高路远坑深,
大军纵横驰奔,
谁敢横刀立马?
惟有点赞加关注大军。
这篇关于鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Marquee组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!