当文本在 Flutter 中溢出时如何使 Text 小部件像选取框一样

Posted

技术标签:

【中文标题】当文本在 Flutter 中溢出时如何使 Text 小部件像选取框一样【英文标题】:How to make a Text widget act like marquee when the text overflows in Flutter 【发布时间】:2019-01-17 05:52:57 【问题描述】:

我正在寻找一种在 Text 小部件上实现 Marquee 样式的方法,以便在文本从屏幕溢出时自动开始滚动。 有没有办法做到这一点。 我已经尝试了所有的装饰模式,但似乎无法在那里找到 Marquee 选项。

【问题讨论】:

您能否详细说明您要确切实现的目标,即“Marquee style”是什么意思。 选框是当文本溢出时自动来回滚动以显示整个文本。它在 android 文本视图中可用 【参考方案1】:

这个小部件是我想出的,我认为它可以满足您的需求:

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"),
          ),
        ),
      ),
    );
  

【讨论】:

'_positions.isNotEmpty':ScrollController 未附加到任何滚动视图。使用此小部件退出页面时显示此错误。 MarqueeWidget 是否在像 ListView 这样的滚动容器内?这可能会导致它崩溃,因为它还没有渲染,所以 ScrollController 还没有附加。 为我节省了很多时间......并且不想使用任何包。这工作 100% .. 简洁优雅。我想突然将光标移动到最后输入的数字,所以我用 jumpTo() 替换了 animateTo() 并删除了动画持续时间。效果很好。 @leodriesch 请按照 NULL SAFETY 更新它。非常感谢:)【参考方案2】:

您可以使用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,
)

【讨论】:

桌面有问题。见this。【参考方案3】:

使用Marquee 包。 如果您收到任何“hasSize”错误或“不正确使用父小部件”错误..

只需用容器包裹 Marquee 小部件并给出该容器的高度和宽度。

【讨论】:

以上是关于当文本在 Flutter 中溢出时如何使 Text 小部件像选取框一样的主要内容,如果未能解决你的问题,请参考以下文章

Flutter:小部件压缩优先级

Flutter - 文本字段标签溢出切断文本

Flutter - 如何使列屏幕可滚动

溢出的文本可以居中吗?

使用 WrapWithOverflow 时如何使 TextBlock 呈现溢出的文本? (没有剪辑)

当 textarea 溢出时打印