第九节HarmonyOS 常用基础组件22-Marquee

1、描述

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

2、接口

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

3、参数

参数名

参数类型

必填

描述

start

boolean

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

step

number

滚动动画文本滚动步长。默认值:6、单位vp。

loop

number

设置重复滚动的次数,小于等于0时无限循环。默认值:-1。

fromStart

boolean

设置文本从头开始滚动还是反向滚动。默认值:true。

src

string

需要滚动的文本。

4、属性

 allowScale - boolean - 是否允许文本缩放。默认值:false。

5、事件

onStart(event:() => void) - 开始滚动时触发回调。

onBounce(event:() => void) - 完成一次滚动时触发回调,若循环次数不为1,则该事件会多次触发。

onFinish(event:() => void) - 滚动全部循环次数时触发回调。

6、示例

import router from '@ohos.router'@Entry
@Component
struct MarqueePage {@State message: string = '跑马灯组件,用于滚动展示一段单行文本,仅当文本内容宽度超过跑马灯组件宽度时滚动。'@State isStart: boolean = false;@State step: number = 6;@State loopNum: number = -1;@State fromStart: boolean = true;build() {Row() {Scroll() {Column() {Text(this.message).fontSize(20).fontWeight(FontWeight.Bold).width("96%")Blank(12)Marquee({start: this.isStart, // 控制跑马灯是否进入播放状态step: this.step, // 滚动动画文本滚动步长,即速度loop: this.loopNum, // 设置重复滚动的次数,小于等于0时无限循环fromStart: this.fromStart, // 设置文本从头开始滚动还是反向滚动src: this.message // 需要滚动的文本}).width("96%").height(60).fontColor('#FFFFFF').fontSize(36).fontWeight(700).backgroundColor('#182431').onStart(() => {console.info('Marquee animation complete onStart')}).onBounce(() => {console.info('Marquee animation complete onBounce')}).onFinish(() => {console.info('Marquee animation complete onFinish')})Blank(12)Row() {Button('Start').onClick(() => {this.isStart = true}).width(100).height(40).fontSize(16).fontWeight(500).backgroundColor('#007DFF')Button('step').onClick(() => {this.step = 16}).width(100).height(40).fontSize(16).fontWeight(500).margin({ left: 16 }).backgroundColor('#007DFF')Button('fromStart').onClick(() => {this.fromStart = false}).width(100).height(40).fontSize(16).fontWeight(500).margin({ left: 16 }).backgroundColor('#007DFF')}Blank(12)Button("Marquee文本文档").fontSize(20).backgroundColor('#007DFF').width('96%').onClick(() => {// 处理点击事件逻辑router.pushUrl({url: "pages/baseComponent/marquee/MarqueeDesc",})})Blank(12)}.width('100%')}}.padding({ top: 12, bottom: 12 })}
}

7、效果图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/444052.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java EE 5 SDK架构

Java EE 5 SDK架构 大型组织每天都要处理大量数据和多用户的相关事务。为管理该组织如此大型而又复杂的系统,开发了企业应用程序。企业应用程序是在服务器上托管的应用程序,通过计算机网络同时向大量用户提供服务。这种应用程序可采用各种技术开发,如Java EE 5。Java EE 5平…

使用Markdown写作的魔力

今年的年终总结报告,我是用Markdown写的,只花了大概2.5天的时间,包括统计任务数据,时效,总结成果,挖掘不足,提出改善措施和计划。 将全部文字内容的.md文档,导出为word,然后用了做PPT的AI,设计了PPT,再修改了半天,就完成了。 上周为两个代码工程,用Markdown写了r…

测试环境搭建整套大数据系统(一:基础配置,修改hostname,hosts,免密,时间同步)

一:使用服务器配置。 二:修改服务器名称hostname,hosts。 在 Linux 系统中,hostname 和 /etc/hosts 文件分别用于管理主机名和主机名解析。 在三台服务器上,分别执行以下命令。 vim /etc/hostnamexdso-hadoop-test-0…

Qt QWidget Loading界面并覆盖在其他控件上面

目录 一、效果图二、Loading三、使用 一、效果图 界面中有一个Label&#xff0c;一个Button 点击Buttion&#xff0c;显示Loading的界面&#xff0c;并覆盖到Label和Button上面 二、Loading loadingwidget.h #ifndef LOADINGWIDGET_H #define LOADINGWIDGET_H#include <…

C#——三角形面积公式

已知三角形的三个边&#xff0c;求面积&#xff0c;可以使用海伦公式。 因此&#xff0c;可以执行得到三角形面积公式的计算方法代码如下&#xff1a; /** / <summary>* / 三角形面积公式* / </summary>* / <param name"a">边长a</param>*…

etcd自动化安装配置教程

文章目录 前言一、简介1. 简介2. 特点3. 端口介绍 二、etcd安装教程&#xff08;单机版&#xff09;1. 复制脚本2. 增加执行权限3. 执行脚本4. 查看启动状态5. 卸载etcd 三、etcd安装教程&#xff08;集群版&#xff09;1. 复制脚本2. 增加执行权限3. 分发脚本4. 执行脚本5. 启…

【HarmonyOS】鸿蒙开发之HTTP网络请求——第5章

HTTP网络请求封装 network/request.ets import { configInterface } from ./type import http from ohos.net.http import { getToken } from ../utils/storage//网络请求封装 export const request (config:configInterface)>{let httpRequest:http.HttpRequest http.c…

模拟实现哈希表 - HashMap(Java版本)

目录 1. 概念 2. 冲突-概念 3. 冲突-避免 4. 冲突-避免-哈希函数设计 5. 冲突-避免-负载因子调节 ⭐⭐⭐⭐⭐ 6. 冲突-解决 6.1 冲突-解决-闭散列 6.2 冲突-解决-开散列/哈希桶 ⭐⭐⭐⭐⭐ 7. 冲突严重时的解决办法 8. 模拟实现 1. 概念 顺序结构以及平衡树中&#…

代码随想录day16--二叉树的应用4

LeetCode513.找树左下角的值 题目描述&#xff1a; 给定一个二叉树的 根节点 root&#xff0c;请找出该二叉树的 最底层 最左边 节点的值。 假设二叉树中至少有一个节点。 示例 1: 输入: root [2,1,3] 输出: 1示例 2: 输入: [1,2,3,4,null,5,6,null,null,7] 输出: 7 解题思…

除毛可以用宠物空气净化器吗?猫用空气净化器哪些品牌吸毛好?

作为一位长期养猫的铲屎官&#xff0c;我深刻理解只有养猫人才懂的困扰&#xff0c;那就是家里到处都是猫毛和异味。我发现自从开始养猫之后&#xff0c;家里的空气质量变得不佳。猫毛和皮屑飞扬&#xff0c;而且室内空气中的污染物也越来越多。这种低质量的空气对我们的健康有…

分组密码工作模式

在密码学中&#xff0c;分组密码工作模式可以提供诸如机密性或真实性的信息服务。 基于分组的对称加密算法&#xff08;DES 、AES等&#xff09;只是描述如何根据加密密钥对一段固 定长度&#xff08;块&#xff09;的数据进行加密&#xff0c;对于比较长的数据&#xff0c;分组…

性能测试+Jmeter介绍

文章目录 什么是性能测试?性能测试的目的性能测试分类一般性能测试负载测试压力测试大数据量测试配置测试稳定性测试 性能测试术语虚拟用户并发及并发用户数响应时间每秒事务数吞吐量、吞吐率点击率性能计数器资源利用率 性能测试流程测试计划阶段测试设计阶段测试开发阶段测试…