【鸿蒙软件开发】ArkTS基础组件之Marquee(文字跑马灯)、QRCode(二维码生成)

简介: 【鸿蒙软件开发】ArkTS基础组件之Marquee(文字跑马灯)、QRCode(二维码生成)

前言


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

QRCode组件:用于显示单个二维码的组件。


一、Marquee组件


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

说明

该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

其效果是文字滚动,可以参数网上一些人睡觉,然后用手机放一些字,循环放的那种效果!


1.1 子组件


1.2 创建Marquee组件

接口如下:

Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string })


34b48b52f352436080b7a9b502768c02.png

从API version 9开始,该接口支持在ArkTS卡片中使用。


参数

参数功能分别为:参数名,参数类型,是否必填,参数描述

start,boolean,是,控制跑马灯是否进入播放状态。

step,number,否,滚动动画文本滚动步长。默认值:6,单位vp


loop,number,否,设置重复滚动的次数(即是滚动多少个周期,来回),小于等于零时无限循环。默认值:-1

说明:ArkTS卡片上该参数设置任意值都仅在可见时滚动一次。


fromStart,boolean,否,设置文本从头开始滚动或反向滚动。默认值:true

src,string,是,需要滚动的文本。

需要注意的是:我们的需要滚动的文本的大小宽度是要超过这个Marquee大小的,如果不超过,则不滚动


1.3 属性

除支持文本通用属性:fontColor、fontSize、fontWeight、fontFamily外,还支持以下属性:

allowScales需要一个boolean类型

他的功能是是否允许文本缩放。

但是现在暂不支持该接口。

默认值:false


1.4 事件

这个组件除了通用事件外,他还有下面这些事件,分别为:名称,功能描述


1、

onStart(event: () => void)


5c851fe65bf8406f9d0b5c6b63aa74bb.png开始滚动时触发回调。

从API version 9开始,该接口支持在ArkTS卡片中使用。

2、

onBounce(event: () => void)


e06682a63c8e40808b541e968abce2b5.png

完成一次滚动时触发,若循环次数不为1,则该事件会多次触发。

从API version 9开始,该接口支持在ArkTS卡片中使用。

3、

onFinish(event: () => void)


465147a8ae3949e49dd1f976e4a47519.png

滚动全部循环次数完成时触发回调。

从API version 9开始,该接口支持在ArkTS卡片中使用。


1.5 示例代码

// 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%')
  }
}


80632cf5ee6e48b09e02a89a04587ef3.png

需要注意的是:我们的需要滚动的文本的大小宽度是要超过这个Marquee大小的,如果不超过,则不滚动

即是private src: string = "Running Marquee starts rolling"里面的字符串需要多的时候可以看到效果!


二、QRCode


用于显示单个二维码的组件。

说明

该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。


2.1 子组件


2.2 接口

使用下面这个函数即可创建一个qrcode

QRCode(value: string)


7240ee1d12d6425db6e70f94848a303f.png

从API version 9开始,该接口支持在ArkTS卡片中使用。


2.3 参数

参数:value,类型为string,必须要填写

他的功能是指定二维码内容字符串。最大支持256个字符,若超出,则截取前256个字符。

说明:

该字符串内容确保有效,不支持null、undefined以及空内容。


2.4 属性

除支持通用属性外,还支持以下属性。

属性color,类型为ResourceColor

功能为设置二维码颜色。

默认值:Color.Black

从API version 9开始,该接口支持在ArkTS卡片中使用。


属性backgroundColor,类型为ResourceColor

设置二维码背景颜色。

默认值:Color.White

从API version 9开始,该接口支持在ArkTS卡片中使用。


背景颜色是我们平常看到二维码的白色部分

color则是平常看到的黑色部分


2.5 事件

通用事件支持点击事件、触摸事件、挂载卸载事件。


2.6 示例代码

// xxx.ets
@Entry
@Component
struct QRCodeExample {
  private value: string = 'hello world'
  build() {
    Column({ space: 5 }) {
      Text('normal').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
      QRCode(this.value).width(200).height(200)
      // 设置二维码颜色
      Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
      QRCode(this.value).color(0xF7CE00).width(200).height(200)
      // 设置二维码背景色
      Text('backgroundColor').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
      QRCode(this.value).width(200).height(200).backgroundColor(Color.Orange)
    }.width('100%').margin({ top: 5 })
  }
}


a0cfac67ad9d45f4971bfe56ced81e6d.png

bcc79a1d4fda4025bac4c125c550e904.png


总结


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

QRCode组件:用于显示单个二维码的组件。

目录
打赏
0
0
0
0
61
分享
相关文章
鸿蒙开发:什么是ArkTs?
本小结主要简单介绍了ArkTs语言的相关知识,都是一些概念性质的内容,大家作为一个了解即可
102 61
鸿蒙开发:ArkTs语言注释
关于注释,有一点需要注意,那就是,注释,不会被编译器或解释器执行,而本小节的重点并不是简单的教大家注释如何去写,而是在实际的项目中,我们能够真正的把注释投入到实际的开发中。
58 18
鸿蒙开发:ArkTs语言注释
鸿蒙开发:ArkTs数据类型
最后一点是,ArkTS不支持any和unknown类型,需要显式指定具体类型,否则会报异常,具体原因是,这是ArkTS的特性之一,那就是使用静态类型;如果程序采用静态类型,即所有类型在编译时都是已知的,那么开发者就能够容易理解代码中使用了哪些数据结构。同时,由于所有类型在程序实际运行前都是已知的,编译器可以提前验证代码的正确性,从而可以减少运行时的类型检查,有助于提升性能。
鸿蒙开发:ArkTs数据类型
|
14天前
|
HarmonyOS NEXT鸿蒙实现自定义组件插槽
在HarmonyOS NEXT中,通过`@BuilderParam`装饰器实现类似Vue-Slot或React-RenderProps的功能,允许将UI结构的函数作为参数传递给组件并在指定位置渲染。具体步骤如下:
29 5
HarmonyOS NEXT鸿蒙实现自定义组件插槽
鸿蒙开发:ArkTs字符串string
字符串类型是开发中非常重要的一个数据类型,除了上述的方法概述之外,还有String对象,正则等其他的用处,我们放到以后得篇章中讲述。
63 19
鸿蒙相机开发实战:从设备适配到性能调优 —— 我的 ArkTS 录像功能落地手记(API 15)
本文分享鸿蒙相机开发经验,从环境准备到核心逻辑实现,涵盖权限声明、模块导入、Surface关联与分辨率匹配,再到录制控制及设备适配法则。通过实战案例解析,如旋转补偿、动态帧率调节和编解码优化,帮助开发者掌握功能实现、设备适配与体验设计三大要点,减少开发坑点。适合鸿蒙新手及希望深化硬件交互能力的工程师参考收藏。
30 2
鸿蒙开发:ArkTs语言变量和常量
变量是一种用于存储数据的容器,并且其存储的数据值可以在程序执行过程中被改变,变量通常有一个名字(标识符),用于在程序中引用它。
HarmonyOS NEXT 实战系列01-ArkTS基础
ArkTS是HarmonyOS应用开发的首选语言,基于TypeScript扩展而成,保留了TS风格并强化静态检查与分析能力,提升程序稳定性和性能。它支持声明式UI开发、状态管理等功能,简化应用构建。语法涵盖变量、常量、数组、对象、语句(如if、switch)、函数(含箭头函数与泛型)、类和模块等特性,同时提供联合类型、字面量联合类型及枚举类型等丰富类型支持,助力开发者高效编写高质量代码。
用arkts写鸿蒙app:简单的海报生成
本文介绍了基于鸿蒙系统开发的一款个人字典与创作辅助应用,重点实现海报生成功能。通过Canvas画布组件完成图片绘制、文字填充等操作,并利用鸿蒙的沙盒机制和权限管理将生成的海报保存至本地。文中详细展示了代码实现步骤,包括渲染逻辑、数据导出及文件存储过程,同时提供了相关API文档链接以便参考。此项目不仅满足了作者个人兴趣需求,还体现了鸿蒙系统的独特特性和开发潜力。
66 4
HarmonyOS ArkTS声明式UI开发实战教程
本文深入探讨了ArkTS作为HarmonyOS生态中新一代声明式UI开发框架的优势与应用。首先对比了声明式与命令式开发的区别,展示了ArkTS如何通过直观高效的代码提升可维护性。接着分析了其核心三要素:数据驱动、组件化和状态管理,并通过具体案例解析布局体系、交互组件开发技巧及复杂状态管理方案。最后,通过构建完整TODO应用实战,结合调试优化指南,帮助开发者掌握声明式UI设计精髓,感受ArkTS的独特魅力。文章鼓励读者通过“破坏性实验”建立声明式编程思维,共同推动HarmonyOS生态发展。
54 3