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。
学习记录,每天不停进步。

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

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

相关文章

谈谈对Spring MVC的理解

问题分析&#xff1a; SpringMVC 是一种基于 Java 语言开发&#xff0c;实现了 Web MVC 设计模式&#xff0c;请求驱动类型 的轻量级 Web 框架。 SpringMVC采用了 MVC 架构模式的思想&#xff0c;通过把 Model&#xff0c;View&#xff0c;Controller 分离&#xff0c;将 Web 层…

易服客工作室:如何在WordPress网站中举办虚拟活动

您是否正在寻找举办和管理虚拟活动的最佳方式&#xff1f; 也许您想在线举行下一次会议或举办有关您的产品和服务的网络研讨会。您可能担心它太贵&#xff0c;或者您没有技术知识来实现​​它。 在本文中&#xff0c;我们将列出您所需的在线服务的所有设备&#xff0c;并教您…

实践指南-前端性能提升 270% | 京东云技术团队

一、背景 当我们疲于开发一个接一个的需求时&#xff0c;很容易忘记去关注网站的性能&#xff0c;到了某一个节点&#xff0c;猛地发现&#xff0c;随着越来越多代码的堆积&#xff0c;网站变得越来越慢。 本文就是从这样的一个背景出发&#xff0c;着手优化网站的前端性能&a…

在R中比较两个矩阵是否相等

目录 方法一&#xff1a;使用all.equal()比较两个R对象是否近似相等 方法二&#xff1a;使用identical比较两个R对象是否精确相等。 方法一&#xff1a;使用all.equal()比较两个R对象是否近似相等 使用函数&#xff1a;all.equal(x,y) 比较两个R对象x和y是否近似相等 > M1…

abbitmq启动访问不了http://localhost:15672 通过修改服务登录admin

abbitmq默认的对Administration授权&#xff0c;而我的用户不是默认的Administration&#xff0c;所以后来打开服务&#xff0c;找到rabbitmq服务&#xff0c;属性&#xff0c;登陆&#xff0c;将本地系统账户修改为此账户&#xff0c;修改完成之后再重启服务&#xff0c;这时候…

SpringMVC注解开发

1. 构建流程 1&#xff09;IDEA创建一个Maven项目。配置所需依赖 <dependencies><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.13.2</version><scope>test</scope></depe…

【Fegin技术专题】「原生态」打开Fegin之RPC技术的开端,你会使用原生态的Fegin吗?(上)

前提介绍 Feign是SpringCloud中服务消费端的调用框架&#xff0c;通常与ribbon&#xff0c;hystrix等组合使用。由于遗留原因&#xff0c;某些项目中&#xff0c;整个系统并不是SpringCloud项目&#xff0c;甚至不是Spring项目&#xff0c;而使用者关注的重点仅仅是简化http调…

瑞数系列及顶像二次验证LOGS

瑞数商标局药监局专利局及顶像二次验证 日期&#xff1a;20230808 瑞数信息安全是一个专注于信息安全领域的公司&#xff0c;致力于为企业和个人提供全面的信息安全解决方案。他们的主要业务包括网络安全、数据安全、应用安全、云安全等方面的服务和产品。瑞数信息安全拥有一支…

机器学习笔记:李宏毅chatgpt 大模型 大资料

1 大模型 1.1 大模型的顿悟时刻 Emergent Abilities of Large Language Models&#xff0c;Transactions on Machine Learning Research 2022 模型的效果不是随着模型参数量变多而慢慢变好&#xff0c;而是在某一个瞬间&#xff0c;模型“顿悟”了 这边举的一个例子是&#…

YOLOv5、YOLOv8改进:MobileViT:轻量通用且适合移动端的视觉Transformer

MobileViT: Light-weight, General-purpose, and Mobile-friendly Vision Transformer 论文&#xff1a;https://arxiv.org/abs/2110.02178 1简介 MobileviT是一个用于移动设备的轻量级通用可视化Transformer&#xff0c;据作者介绍&#xff0c;这是第一次基于轻量级CNN网络性…

STM32 LL库+STM32CubeMX--点亮板载LED

一、前期准备 硬件&#xff1a;STM32F103C8T6开发板调试工具&#xff1a;DAPLink(本次使用)或USB-TTL开发环境&#xff1a;STM32CubeMX、Keil、Vscode(可选)板载LED&#xff1a;PC13(低电平点亮) 二、STM32CubeMX配置 1.选择芯片型号&#xff1a; 2.配置外设时钟&#xff1a;…

【BASH】回顾与知识点梳理(十七)

【BASH】回顾与知识点梳理 十七 十七. 什么是 Shell scripts17.1 干嘛学习 shell scripts自动化管理的重要依据追踪与管理系统的重要工作简单入侵检测功能连续指令单一化简易的数据处理跨平台支持与学习历程较短 17.2 第一支 script 的撰写与执行撰写第一支 script 17.3 撰写 s…

Android应用开发(37)LTPO帧率测试基于Surfaceview(暂存)

Android应用开发学习笔记——目录索引 参考android官网&#xff1a; Frame rate | Android media | Android Developers多重刷新率 | Android 开源项目 | Android Open Source ProjectWindowManager.LayoutParams | Android Developers 目前市面上旗舰手机基本都是…

[保研/考研机试] KY56 数制转换 北京大学复试上机题 C++实现

题目链接&#xff1a; 数制转换https://www.nowcoder.com/share/jump/437195121691734210665 描述 求任意两个不同进制非负整数的转换&#xff08;2进制&#xff5e;16进制&#xff09;&#xff0c;所给整数在long所能表达的范围之内。 不同进制的表示符号为&#xff08;0&a…

腾讯云COS的快速接入

背景 最近在研究一个剪贴板粘贴工具&#xff0c;实现粘贴图片&#xff0c;返回可访问的地址&#xff0c;这个在我的哔哩哔哩上有出一期视频&#x1f92d;。但是&#xff0c;我发现部分博客平台不能正常的转载我的图片链接&#xff0c;于是研究了一下腾讯云的COS&#xff08;阿…

Oracle 知识篇+会话级全局临时表在不同连接模式中的表现

标签&#xff1a;会话级临时表、全局临时表、幻读释义&#xff1a;Oracle 全局临时表又叫GTT ★ 结论 ✔ 专用服务器模式&#xff1a;不同应用会话只能访问自己的数据 ✔ 共享服务器模式&#xff1a;不同应用会话只能访问自己的数据 ✔ 数据库驻留连接池模式&#xff1a;不同应…

“冰箭卫士·IP发布会”首次亮相第14届海峡两岸(厦门)文博会

2023年8月6日,“冰箭卫士IP发布会”首次亮相海峡两岸文博会思明馆。此次发布会由厦门市文化创意产业协会、厦门理工&#xff08;集美区&#xff09;政产学研基地主办&#xff0c;厦门市文化创意产业协会IP设计研究院、厦门一笔之上文化发展有限公司、冰箭应急安全科技研究院承办…

(vue)获取对象的键遍历,同时循环el-tab页展示key及内容

(vue)获取对象的键遍历&#xff0c;同时循环el-tab页展示key及内容 效果&#xff1a; 数据结构&#xff1a; "statusData": {"订购广度": [ {"id": 11, "ztName": "广", …

[保研/考研机试] KY183 素数 北京航空航天大学复试上机题 C++实现

题目链接&#xff1a; 素数https://www.nowcoder.com/share/jump/437195121691718444910 描述 输入一个整数n(2<n<10000)&#xff0c;要求输出所有从1到这个整数之间(不包括1和这个整数)个位为1的素数&#xff0c;如果没有则输出-1。 输入描述&#xff1a; 输入有多…

PowerShell 使用SqlScriptDOM对T-SQL做规则校验

对于数据项目来说&#xff0c;编写Sql是一项基本任务同时也是数量最多的代码。为了统一项目代码规范同时降低Code Review的成本&#xff0c;因此需要通过自动化的方式来进行规则校验。由于本人所在的项目以SQL Server数据库为基础&#xff0c;于是本人决定通过使用SqlScriptDom…