当前位置: 首页 > news >正文

flutter开发实战-实现marquee根据文本长度显示文本跑马灯效果

flutter开发实战-实现marquee文本跑马灯效果

最近开发过程中需要marquee文本跑马灯效果,这里使用到了flutter的插件marquee

效果图如下
在这里插入图片描述

在这里插入图片描述

一、marquee

1.1 引入marquee

在pubspec.yaml中引入marquee

  # 跑马灯效果marquee: ^2.2.3

1.2 marquee使用

marquee使用也是非常方便的。比如直接指定文本text

Marquee(text: 'flutter开发实战-实现marquee文本跑马灯效果',
)

或者设置更多属性值

Marquee(// 文本text: '实现marquee文本跑马灯效果,这里是一传长文本',// 文本样式style: TextStyle(fontWeight: FontWeight.bold),// 滚动轴:水平或者竖直scrollAxis: Axis.horizontal,// 轴对齐方式startcrossAxisAlignment: CrossAxisAlignment.start,// 空白间距blankSpace: 20.0,// 速度velocity: 100.0,// 暂停时长pauseAfterRound: Duration(seconds: 1),// startPaddingstartPadding: 10.0,// 加速时长accelerationDuration: Duration(seconds: 1),// 加速CurveaccelerationCurve: Curves.linear,// 减速时长decelerationDuration: Duration(milliseconds: 500),// 减速CurvedecelerationCurve: Curves.easeOut,
)

二、根据文本宽度是否需要跑马灯效果

根据Text文本的大小判断是否需要进行显示跑马灯效果,获取文本的大小,需要TextPainter来获取Size
TextPainter查看:https://blog.csdn.net/gloryFlow/article/details/132198113

2.1 根据获取的文本宽度确定是否显示跑马灯效果

判断计算的文本宽度是否超出指定的ContainerWidth,来确定是否显示Marquee

代码如下

import 'package:flutter/material.dart';
import 'package:marquee/marquee.dart';typedef MarqueeBuilder = Marquee Function(BuildContext context, String text, TextStyle textStyle);
typedef TextBuilder = Text Function(BuildContext context, String text, TextStyle textStyle);class MarqueeText extends StatelessWidget {final String text;final TextStyle textStyle;final double containerWidth;final TextBuilder textBuilder;final MarqueeBuilder marqueeBuilder;const MarqueeText({Key? key,required this.marqueeBuilder,required this.textBuilder,required this.text,required this.textStyle,required this.containerWidth}): super(key: key);Size calculateTextSize(String text, TextStyle style) {final TextPainter textPainter = TextPainter(text: TextSpan(text: text, style: style),maxLines: 1,textDirection: TextDirection.ltr)..layout(minWidth: 0, maxWidth: double.infinity);return textPainter.size;}Widget build(BuildContext context) {final textWidth = this.calculateTextSize(this.text, this.textStyle).width;return textWidth < this.containerWidth? this.textBuilder(context, text, textStyle): this.marqueeBuilder(context, text, textStyle);}
}

2.2 使用该自定义的Widget

下面我这里使用这个跑马灯的Widget
代码如下

Container(width: size.width,height: size.height,alignment: Alignment.center,color: Colors.greenAccent,// child: LoadingWidget(bgColor: Colors.blueGrey,),child: MarqueeText(containerWidth: 300,text: "如果你不相信努力和时光,那么时光第一个就会辜负你。不是因为有希望才去努力,而是努力了,才能看到希望。",textStyle: TextStyle(fontSize: 25,fontWeight: FontWeight.w400,fontStyle: FontStyle.normal,color: Colors.redAccent,decoration: TextDecoration.none,),marqueeBuilder: (context, text, textStyle) => Marquee(text: text,style: textStyle,scrollAxis: Axis.horizontal,crossAxisAlignment: CrossAxisAlignment.start,blankSpace: 20.0,velocity: 100.0,pauseAfterRound: Duration(milliseconds: 500),showFadingOnlyWhenScrolling: true,fadingEdgeStartFraction: 0.1,fadingEdgeEndFraction: 0.1,startPadding: 10.0,accelerationDuration: Duration(milliseconds: 100),accelerationCurve: Curves.linear,decelerationDuration: Duration(milliseconds: 100),decelerationCurve: Curves.easeOut,textDirection: TextDirection.ltr,),textBuilder: (context, text, textStyle) => Text(text,style: textStyle,),),),

三、小结

flutter开发实战-实现marquee根据文本长度显示文本跑马灯效果。通过TextPainter计算文本内容的宽度与ContainerWidth进行对比确定是否需要显示marquee。
学习记录,每天不停进步。

相关文章:

flutter开发实战-实现marquee根据文本长度显示文本跑马灯效果

flutter开发实战-实现marquee文本跑马灯效果 最近开发过程中需要marquee文本跑马灯效果&#xff0c;这里使用到了flutter的插件marquee 效果图如下 一、marquee 1.1 引入marquee 在pubspec.yaml中引入marquee # 跑马灯效果marquee: ^2.2.31.2 marquee使用 marquee使用也是…...

8.10论文阅读

文章目录 The multimodal MRI brain tumor segmentation based on AD-Net摘要本文方法损失函数 实验结果 max-vit - unet:多轴注意力医学图像分割摘要本文方法实验结果 The multimodal MRI brain tumor segmentation based on AD-Net 摘要 基于磁共振成像(MRI)的多模态胶质瘤…...

【计算机网络笔记】第一章

1、计算机网络定义 计算机网络主要是由一些通用的、可编程的硬件&#xff08;包含CPU、计算机、手机、智能电器…&#xff09;互连而成的&#xff0c;而这些硬件并非专门用来实现某一特定目的&#xff08;例如&#xff0c;传送数据或视频信号&#xff09;。这些可编程的硬件能…...

开源力量再现,国产操作系统商业化的全新探索

文章目录 1. 开源运动的兴起2. 开源力量的推动3. 国产操作系统的崭露头角3.1 国产操作系统有哪些 4.国产操作系统的商业化探索5.开源力量对国产操作系统商业化的推动 操作系统作为连接硬件、中间件、数据库、应用软件的纽带&#xff0c;被认为是软件技术体系中最核心的基础软件…...

uni-app uView自定义底部导航栏

因项目需要自定义底部导航栏&#xff0c;我把它写在了组件里&#xff0c;基于uView2框架写的&#xff08;vue2&#xff09;&#xff1b; 一、代码 在components下创建tabbar.vue文件&#xff0c;代码如下&#xff1a; <template><view><u-tabbar :value"c…...

效率指数级提升的Intellij IDEA快捷键集合

温馨提示&#xff1a;全文有18个小技巧&#xff0c;为了阅读体验&#xff0c;可以直接先看文章目录。 1&#xff0c;打开一个文件中的所有方法展示框 CtrlF12 Alt7 2&#xff0c;打开一个类的所有使用位置 AltF7 3&#xff0c;打开一个类在项目使用的位置 CtrlAltF7 4&#…...

TS学习05-泛型

泛型 目的&#xff1a;可重用性 支持当前数据类型&#xff0c;也支持未来的数据类型。 提供灵活的功能 无法创建泛型枚举和泛型命名空间。 function identity(arg: any): any { return arg }function identity<T>(arg: T) : T { return arg}使用any类型会导致这个函数可以…...

windos wsl2 docker unix:///var/run/docker.sock

解决方案 问题如下 rootDESKTOP-VM0J0I4:~# docker ps Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?启动下docker sudo service docker startcsdn 等风来不如迎风去 htp://t.csdn.cn/Gh365...

前端面试经典手写题

1、手写Promise class Promise2 {state "pending";callbacks [];constructor(fn) {fn(this.resolve.bind(this), this.reject.bind(this));}resolve(result) {if (this.state ! "pending") return;this.state "fullFilled";nextTick(() > …...

Tomcat 部署及优化

Tomcat概述 Tomcat 是 Java 语言开发的&#xff0c;Tomcat 服务器是一个免费的开放源代码的 Web 应用服务器&#xff0c;是 Apache 软件基金会的 Jakarta 项目中的一个核心项目&#xff0c;由 Apache、Sun 和其他一些公司及个人共同开发而成。在中小型系统和并发访问用户不是很…...

Selenium入门详细教程+实例演示

目录 1.Selenium概述 1.1什么是Selenium 1.2Selenium的优势 1.3Selenium WebDriver原理 2.Selenium环境搭建 3.Selenium 简单示例 4.八大元素定位 4.1定位方式 4.2定位方式的用法 5.Selenium API 5.1WebDriver 常用 API 5.2WebElement 常用 API 5.3代码示例 6.元素等待机…...

ATFX汇评:美国7月CPI数据即将揭晓,市场预期将有所反弹

ATFX汇评&#xff1a;今日20:30&#xff0c;美劳工部将公布7月未季调CPI年率&#xff0c;前值为3%&#xff0c;预期值3.3%&#xff1b;同一时间公布7月未季调核心CPI年率&#xff0c;前值为4.8%&#xff0c;预期值持平&#xff1b;至8月5日当周初请失业金人数也将同时发布&…...

23、springboot日志使用入门-- SLF4J+Logback 实现(springboot默认的日志实现),日志打印到控制台及日志输出到指定文件

springboot日志使用入门 ★ 典型的Spring Boot日志依赖&#xff1a; spring-boot-start.jar -- spring-boot-starter-logging.jar (Spring Boot的日志包&#xff09;-- logback&#xff08;core、classic&#xff09;-- log4j-to-slf4j.jar-- jul-to-slf4j.jar就是springboo…...

【uniapp】 软键盘弹出后fixed定位被顶上去问题

问题描述 当手机设计的导航栏为fixed定位上去时&#xff0c;输入框获取焦点就会把顶部自定义的导航栏顶到上面去&#xff0c;如下图所示 解决办法 输入框设置 :adjust-position“false” <input type"text" :adjust-position"false" focus"i…...

HarmonyOS应用开发者基础认证考试题库

此博文为HarmonyOS应用开发者基础认证考试的最后的大考&#xff0c;要求100分取得90分方可获取证书、现将考试的题库进行分享&#xff0c;希望能帮到大家。但是需要注意的是&#xff0c;题库会不定时的进行题目删减&#xff0c;但是大概的内容是不会进行改变的。真心希望这篇博…...

FANUC机器人SRVO-105和SRVO-067故障报警原因分析及处理方法

FANUC机器人SRVO-105和SRVO-067故障报警原因分析及处理方法 如下图所示,公司的一台机器人在正常工作时突然报警SRVO-105门打开或紧急停止,同时还有SRVO-067 OHAL2报警(G:1 A:2),按Reset键无法消除报警, 那么遇到这种情况,首先,我们来看一下报警说明书上的解释: 首先…...

在vue中Antv G2 折线图如何添加点击事件获取折线上点的值

在项目中有个需求是点击折线图的点&#xff0c;获取当前点的信息&#xff0c;其它图形都可以参考相关的API获取到&#xff0c;但area做的折线图怎么都获取不到点击的信息&#xff0c;只能获取全部的信息&#xff0c;最终解决如下&#xff1a; 实现思路 用户的鼠标在折线图上移…...

深度学习中训练、推理和验证分别都是什么意思

在深度学习中&#xff0c;推理&#xff08;Inference&#xff09;、训练&#xff08;Training&#xff09;和验证&#xff08;Validation&#xff09;是三个关键概念&#xff0c;它们分别表示了不同的阶段和任务&#xff1a; 训练&#xff08;Training&#xff09;&#xff1a;…...

C语言规范

C语言规范 1.头文件 若包含了头文件aa.h&#xff0c;则就引入了新的依赖&#xff1a;一旦aa.h被修改&#xff0c;任何直接和间接包含aa.h代码都会被重新编译。如果aa.h又包含了其他头文件如bb.h&#xff0c;那么bb.h的任何改变都将导致所有包含了aa.h的代码被重新编译&#x…...

Express中间件

1.创建最基本的中间件 const express require(express); const send require(send);const app express()const mw function (req, res, next) {console.log(middleware);// 一定要调用next() 把流转关系交给下一个中间件或路由next() }app.listen(80, () > {console.l…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...