【鸿蒙软件开发】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组件:用于显示单个二维码的组件。

相关文章
|
11天前
|
监控 开发者
鸿蒙5.0版开发:使用HiLog打印日志(ArkTS)
在HarmonyOS 5.0中,HiLog是系统提供的日志系统,支持DEBUG、INFO、WARN、ERROR、FATAL五种日志级别。本文介绍如何在ArkTS中使用HiLog打印日志,并提供示例代码。通过合理使用HiLog,开发者可以更好地调试和监控应用。
50 16
|
11天前
|
监控 UED 开发者
鸿蒙next版开发:订阅应用事件(ArkTS)
在HarmonyOS 5.0中,ArkTS引入了强大的应用事件订阅机制,允许开发者订阅和处理系统或应用级别的事件,这对于监控应用行为、优化用户体验和进行性能分析至关重要。本文详细介绍了如何在ArkTS中订阅应用事件,并提供了示例代码,包括导入模块、创建观察者、设置事件参数等步骤。通过这些方法,开发者可以更智能地管理和响应应用事件。
57 11
|
11天前
|
安全 API 数据处理
鸿蒙next版开发:ArkTS组件通用属性(隐私遮罩)
在HarmonyOS 5.0中,ArkTS引入了隐私遮罩功能,用于保护用户隐私和数据安全。本文详细介绍了隐私遮罩的通用属性和使用方法,并提供了示例代码。隐私遮罩支持Image和Text组件,在数据加载或处理过程中防止敏感信息泄露,提升用户体验和数据安全性。
35 11
|
10天前
|
UED
鸿蒙next版开发:相机开发-适配不同折叠状态的摄像头变更(ArkTS)
在HarmonyOS 5.0中,ArkTS提供了强大的相机开发能力,特别是针对折叠屏设备的摄像头适配。本文详细介绍了如何在ArkTS中检测和适配不同折叠状态下的摄像头变更,确保相机应用在不同设备状态下的稳定性和用户体验。通过代码示例展示了具体的实现步骤。
38 8
|
10天前
|
API 内存技术
鸿蒙next版开发:相机开发-拍照(ArkTS)
在HarmonyOS 5.0中,ArkTS提供了一套完整的API来管理相机功能,特别是拍照功能。本文详细介绍如何在ArkTS中实现拍照功能,包括导入接口、创建会话、配置会话、触发拍照及监听拍照输出流状态,并提供代码示例进行详细解读。通过本文,你将掌握如何在HarmonyOS 5.0中使用ArkTS实现高效的拍照功能。
30 7
|
10天前
|
监控 开发者
鸿蒙next版开发:使用HiDebug获取调试信息(ArkTS)
在HarmonyOS 5.0中,HiDebug是一个强大的应用调试工具,可帮助开发者获取系统的CPU使用率、内存信息等关键性能数据。本文详细介绍了如何在ArkTS中使用HiDebug,并提供了示例代码,帮助开发者进行性能分析和问题诊断。
31 7
|
11天前
|
开发者 容器
鸿蒙next版开发:ArkTS组件通用属性(文本通用)
在HarmonyOS 5.0中,ArkTS提供了丰富的文本通用属性,如textAlign、maxLines、textOverflow、fontSize、fontColor、fontStyle、fontWeight、fontFamily、lineHeight、letterSpacing和decoration等,用于实现多样的文本显示和样式效果。本文详细解读了这些属性,并提供了示例代码,帮助开发者更好地利用这些工具,提升应用界面的美观和实用性。
42 8
|
10天前
|
前端开发 API
鸿蒙next版开发:相机开发-预览(ArkTS)
在HarmonyOS 5.0中,使用ArkTS进行相机预览是核心功能之一。本文详细介绍了如何使用ArkTS实现相机预览,包括导入相机接口、创建Surface、获取相机输出能力、创建会话并开始预览,以及监听预览输出状态等步骤,并提供了代码示例。通过本文,读者可以掌握在HarmonyOS 5.0中使用ArkTS进行相机预览的基本方法。
31 6
|
10天前
|
监控 Shell API
鸿蒙next版开发:使用HiChecker检测问题(ArkTS)
在HarmonyOS 5.0中,HiChecker是一个强大的工具,帮助开发者检测应用中的潜在问题,如耗时调用和资源泄露。本文详细介绍了如何在ArkTS中使用HiChecker,包括添加检测规则、触发检测和日志输出等步骤,并提供了示例代码。通过合理使用HiChecker,开发者可以提高应用的稳定性和性能。
28 6
|
10天前
|
前端开发 开发者
鸿蒙next版开发:相机开发-元数据(ArkTS)
在HarmonyOS 5.0中,ArkTS新增了对相机元数据的访问能力,帮助开发者获取图像的详细信息。本文介绍了如何在ArkTS中获取和使用相机元数据,包括导入接口、创建元数据输出流、开启和停止元数据输出、监听元数据对象可用事件等步骤,并提供了详细的代码示例。
31 5