我正在寻找一种方法来实现一个文本窗口小工具,以便它自动开始滚动时,从屏幕上的文本溢出的Marquee样式。有办法做到这一点吗。我已经尝试了所有的装饰模式,但似乎找不到一个选框选项。
发布于 2018-08-10 07:22:03
这个小部件就是我想出来的,我认为它满足了你的需求:
class MarqueeWidget extends StatefulWidget { final Widget child; final Axis direction; final Duration animationDuration, backDuration, pauseDuration; const MarqueeWidget({ Key? key, required this.child, this.direction = Axis.horizontal, this.animationDuration = const Duration(milliseconds: 6000), this.backDuration = const Duration(milliseconds: 800), this.pauseDuration = const Duration(milliseconds: 800), }) : super(key: key); @override _MarqueeWidgetState createState() => _MarqueeWidgetState(); class _MarqueeWidgetState extends State<MarqueeWidget> { late ScrollController scrollController; @override void initState() { scrollController = ScrollController(initialScrollOffset: 50.0); WidgetsBinding.instance!.addPostFrameCallback(scroll); super.initState(); @override void dispose() { scrollController.dispose(); super.dispose(); @override Widget build(BuildContext context) { return SingleChildScrollView( child: widget.child, scrollDirection: widget.direction, controller: scrollController, void scroll(_) async { while (scrollController.hasClients) { await Future.delayed(widget.pauseDuration); if (scrollController.hasClients) { await scrollController.animateTo( scrollController.position.maxScrollExtent, duration: widget.animationDuration, curve: Curves.ease, await Future.delayed(widget.pauseDuration); if (scrollController.hasClients) { await scrollController.animateTo( duration: widget.backDuration, curve: Curves.easeOut, }
它的功能应该是非常明显的。示例实现如下所示:
class FlutterMarqueeText extends StatefulWidget { const FlutterMarqueeText({Key? key}) : super(key: key); @override _FlutterMarqueeTextState createState() => _FlutterMarqueeTextState(); class _FlutterMarqueeTextState extends State<FlutterMarqueeText> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("Flutter Marquee Text"), body: const Center( child: SizedBox( width: 200.0, child: MarqueeWidget( direction: Axis.horizontal, child: Text("This text is to long to be shown in just one line"), }
发布于 2021-05-12 10:55:24
您可以使用 marquee 包来完成此操作
无限滚动文本的 marquee 小部件。提供了许多自定义,包括自定义滚动方向,持续时间,曲线以及每轮后的暂停。
marquee
在pubspec.yaml文件中使用添加的 marquee 依赖项
dependencies: marquee: ^2.1.0
要将依赖项导入到文件中,请使用以下代码行:
import 'package:marquee/marquee.dart';
您可以像这样使用它,这很简单,没有任何参数属性
Marquee( text: 'There once was a boy who told this story about a boy', )
您还可以使用一些属性和可定制性,如下所示
Marquee( text: 'Some sample text that takes some space.', style: TextStyle(fontWeight: FontWeight.bold), scrollAxis: Axis.horizontal, crossAxisAlignment: CrossAxisAlignment.start, blankSpace: 20.0, velocity: 100.0, pauseAfterRound: Duration(seconds: 1),