HarmonyOS NEXT练习:跑马灯

Marquee跑马灯组件,用于滚动展示一段单行文本。仅当文本内容宽度超过跑马灯组件宽度时滚动,不超过时不滚动。

接口

typescript 复制代码
Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string })

value:配置跑马灯组件的参数。

  • start:控制跑马灯是否进入播放状态。
  • step:滚动动画文本滚动步长,当step大于Marquee的文本宽度时,取默认值。默认值:6,单位vp
  • loop:设置重复滚动的次数,小于等于零时无限循环。默认值:-1
  • fromStart:设置文本从头开始滚动或反向滚动。默认值:true
  • src:需要滚动的文本。

组件属性:

typescript 复制代码
.fontColor(value: ResourceColor) //设置字体颜色。
.fontSize(value: Length) //设置字体大小。
.fontWeight(value: number | FontWeight | string) //设置文本的字体粗细,设置过大可能会在不同字体下有截断。默认值:FontWeight.Normal
.fontFamily(value: string | Resource) //设置字体列表。默认字体'HarmonyOS Sans'。
.allowScale(value: boolean) //设置是否允许文本缩放。默认值:false
.marqueeUpdateStrategy(value: MarqueeUpdateStrategy) //跑马灯组件属性更新后,跑马灯的滚动策略。(当跑马灯为播放状态,且文本内容宽度超过跑马灯组件宽度时,该属性生效)。默认值: MarqueeUpdateStrategy.DEFAULT

组件事件:

typescript 复制代码
.onStart(event: () => void) //当滚动的文本内容变化或者开始滚动时触发回调。
.onBounce(event: () => void) //完成一次滚动时触发,若循环次数不为1,则该事件会多次触发。
.onFinish(event: () => void) //滚动全部循环次数完成时触发回调。

跑马灯练习Demo:

typescript 复制代码
@Entry
@Component
struct MarqueePage {
  @State start: boolean = true;
  @State marqueeText: string = '跑马灯练习:当文字超出一屏幕宽时,通过跑马灯滚动展示文字...';
  private fromStart: boolean = true;
  private step: number = 10;
  private loop: number = Number.POSITIVE_INFINITY;

  build() {
    Column({ space: 20 }) {
      Text('跑马灯练习')
      Marquee({
        start: this.start,
        step: this.step,
        loop: this.loop,
        fromStart: this.fromStart,
        src: this.marqueeText
      })
        .marqueeUpdateStrategy(MarqueeUpdateStrategy.PRESERVE_POSITION)
        .width('100%')
        .height('80')
        .fontColor('#FFFFFF')
        .fontSize('48fp')
        .fontWeight(700)
        .backgroundColor('#182431')
        .margin({ bottom: '40vp' })
        .onStart(() => {
          console.info('Succeeded in completing the onStart callback of marquee animation');
        })
        .onBounce(() => {
          console.info('Succeeded in completing the onBounce callback of marquee animation');
        })
        .onFinish(() => {
          console.info('Succeeded in completing the onFinish callback of marquee animation');
        })
    }
    .width('100%')
    .height('100%')
  }
}
相关推荐
No Silver Bullet10 分钟前
HarmonyOS NEXT开发进阶(十四):HarmonyOS应用开发者基础认证试题集汇总及答案解析
华为·harmonyos
鸿蒙布道师10 小时前
鸿蒙NEXT开发Base64工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
The 旺11 小时前
《HarmonyOS Next开发实战:从零构建响应式Todo应用的基石》
华为·harmonyos
Industio_触觉智能12 小时前
鸿蒙北向开发OpenHarmony5.0 DevEco Studio开发工具安装与配置
harmonyos·鸿蒙系统·openharmony·开源鸿蒙·鸿蒙开发·嵌入式开发板
秋叶先生_16 小时前
HarmonyOS NEXT——【鸿蒙监听网络状态变化】
华为·harmonyos·鸿蒙
东林知识库16 小时前
鸿蒙NEXT小游戏开发:围住神经猫
harmonyos
zacksleo17 小时前
鸿蒙Flutter开发故事:不,你不需要鸿蒙化
flutter·harmonyos
别说我什么都不会18 小时前
OpenHarmony解读之设备认证:sts协议-客户端发起sts end请求
物联网·嵌入式·harmonyos
悬空八只脚1 天前
React-Native开发鸿蒙NEXT-本地与沙盒加载bundle
harmonyos
鸿蒙布道师1 天前
鸿蒙NEXT开发日志工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei