当文本在 Flutter 中溢出时,如何使文本小部件像跑马灯一样
How to make a Text widget act like marquee when the text overflows in Flutter
我正在寻找一种在文本小部件上实现选取框样式的方法,以便当文本溢出屏幕时它会自动开始滚动。
有没有办法做到这一点。
我已经尝试了所有的装饰模式,但似乎无法在那里找到 Marquee 选项。
这个小部件是我想出来的,我认为它可以满足您的需求:
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(
0.0,
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"),
),
),
),
);
}
}
您可以使用 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),
startPadding: 10.0,
accelerationDuration: Duration(seconds: 1),
accelerationCurve: Curves.linear,
decelerationDuration: Duration(milliseconds: 500),
decelerationCurve: Curves.easeOut,
)
使用 Marquee 包。
如果您收到任何 'hasSize' 错误或 'Incorrect uses of Parent Widget' 错误..
只需用容器包裹 Marquee 小部件并给出该容器的高度和宽度。
我正在寻找一种在文本小部件上实现选取框样式的方法,以便当文本溢出屏幕时它会自动开始滚动。 有没有办法做到这一点。 我已经尝试了所有的装饰模式,但似乎无法在那里找到 Marquee 选项。
这个小部件是我想出来的,我认为它可以满足您的需求:
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(
0.0,
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"),
),
),
),
);
}
}
您可以使用 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),
startPadding: 10.0,
accelerationDuration: Duration(seconds: 1),
accelerationCurve: Curves.linear,
decelerationDuration: Duration(milliseconds: 500),
decelerationCurve: Curves.easeOut,
)
使用 Marquee 包。 如果您收到任何 'hasSize' 错误或 'Incorrect uses of Parent Widget' 错误..
只需用容器包裹 Marquee 小部件并给出该容器的高度和宽度。