首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使文本小部件在文本溢出时显示为字幕

如何使文本小部件在文本溢出时显示为字幕
EN

Stack Overflow用户
提问于 2018-08-10 01:08:43
回答 3查看 9.3K关注 0票数 11

我正在寻找一种方法来实现一个文本窗口小工具,以便它自动开始滚动时,从屏幕上的文本溢出的Marquee样式。有办法做到这一点吗。我已经尝试了所有的装饰模式,但似乎找不到一个选框选项。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-08-10 07:22:03

这个小部件就是我想出来的,我认为它满足了你的需求:

代码语言:javascript
复制
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,
        );
      }
    }
  }
}

它的功能应该是非常明显的。示例实现如下所示:

代码语言:javascript
复制
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"),
          ),
        ),
      ),
    );
  }
}
票数 44
EN

Stack Overflow用户

发布于 2021-05-12 10:55:24

您可以使用marquee包来完成此操作

无限滚动文本的marquee小部件。提供了许多自定义,包括自定义滚动方向,持续时间,曲线以及每轮后的暂停。

在pubspec.yaml文件中使用添加的marquee依赖项

代码语言:javascript
复制
dependencies:
  marquee: ^2.1.0

要将依赖项导入到文件中,请使用以下代码行:

代码语言:javascript
复制
import 'package:marquee/marquee.dart';

您可以像这样使用它,这很简单,没有任何参数属性

代码语言:javascript
复制
    Marquee(
      text: 'There once was a boy who told this story about a boy',
    )

您还可以使用一些属性和可定制性,如下所示

代码语言:javascript
复制
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,
)

票数 2
EN

Stack Overflow用户

发布于 2022-01-23 15:47:28

使用Marquee包。如果您收到任何“hasSize”错误或“父窗口小部件的错误使用”错误..

只需用容器包装选取框小部件,并给出容器高度和宽度。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51772543

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档