Flutter-跑马灯效果实现

文章介绍了如何解决首页跑马灯因三方组件可能存在的内存泄露导致的闪烁问题,作者提供了自己编写的简单Flutter跑马灯效果实现。通过创建一个名为Marquee的StatefulWidget,结合AnimationController和ScrollController来平滑滚动文本,同时支持与其他显示控件的组合使用。

1、背景:

使用三方组件在首页做个跑马灯效果,隔一段时间首页会闪一下,估计是三方组件有内存泄露。趁有空自己写个简单跑马灯效果。

2、效果:

请添加图片描述

3、调用方法:

将下方代码copy到项目文件内,引用文件,调用构建方法

import 'package:clmd_flutter/components/marquee.dart';
				Marquee(
                  child: Row(
                    children: [
                      Text('Flutter跑马灯效果实现-作者:clmd。后面跟点测试内容'),
                      Icon(Icons.play_arrow),
                      Text(
                        '当然可以也组合其他显示控件咯',
                        style: TextStyle(color: Colors.red),
                      )
                    ],
                  ),
                  speed: 10,
                )

文件内实现:

import 'package:flutter/material.dart';

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值