Text 如何在给定宽度的小部件中获取移动文本

Text 如何在给定宽度的小部件中获取移动文本,text,flutter,flutter-layout,flutter-animation,Text,Flutter,Flutter Layout,Flutter Animation,我正在构建一个广播应用程序。与Spotify一样,有一个带有当前标题和艺术家的栏,文本应在一行中,并以给定的宽度显示。如何让文本从右向左向后移动 当使用自制动画时,我希望有一个固定的移动文本速度,所以我需要文本小部件的时间和宽度 是否有一个包/内置选项来执行此操作? 还是我必须使用自制的动画?如果是这样,如何获取文本小部件的宽度 控制器和动画: AnimationController(duration: Duration(seconds: 10), vsync: this); a

我正在构建一个广播应用程序。与Spotify一样,有一个带有当前标题和艺术家的栏,文本应在一行中,并以给定的宽度显示。如何让文本从右向左向后移动

当使用自制动画时,我希望有一个固定的移动文本速度,所以我需要文本小部件的时间和宽度

是否有一个包/内置选项来执行此操作? 还是我必须使用自制的动画?如果是这样,如何获取文本小部件的宽度

控制器和动画:

    AnimationController(duration: Duration(seconds: 10), vsync: this);
    animation = Tween<double>(begin: 0, end: 1)
        .animate(CurvedAnimation(parent: _controller, curve: Curves.linear));
    animation.addListener(() {
      setState(() {});
    });
    _controller.repeat();
AnimationController(持续时间:持续时间(秒:10),vsync:this);
动画=Tween(开始:0,结束:1)
.animate(曲线动画(父对象:_控制器,曲线:Curves.linear));
animation.addListener(){
setState((){});
});
_controller.repeat();
构建方法

    double value =
        -300 * (animation.value <= 0.5 ? animation.value : 1 - animation.value);
    return Container(
      child: SizedBox(
        width: widget.width,
        height: 24,
        child: Transform.translate(
          offset: Offset(value, 0),
          child: widget.text,
        ),
      ),
    );
双值=

-300*(animation.value您可以执行以下操作:

import 'dart:async';

import 'package:flutter/material.dart';

class ScrollingText extends StatefulWidget {
  final String text;
  final TextStyle textStyle;
  final Axis scrollAxis;
  final double ratioOfBlankToScreen;

  ScrollingText({
    @required this.text,
    this.textStyle,
    this.scrollAxis: Axis.horizontal,
    this.ratioOfBlankToScreen: 0.25,
  }) : assert(text != null,);

  @override
  State<StatefulWidget> createState() {
    return ScrollingTextState();
  }
}

class ScrollingTextState extends State<ScrollingText>
    with SingleTickerProviderStateMixin {
  ScrollController scrollController;
  double screenWidth;
  double screenHeight;
  double position = 0.0;
  Timer timer;
  final double _moveDistance = 3.0;
  final int _timerRest = 100;
  GlobalKey _key = GlobalKey();

  @override
  void initState() {
    super.initState();
    scrollController = ScrollController();
    WidgetsBinding.instance.addPostFrameCallback((callback) {
      startTimer();
    });
  }

  void startTimer() {
    if (_key.currentContext != null) {
      double widgetWidth =
          _key.currentContext.findRenderObject().paintBounds.size.width;
      double widgetHeight =
          _key.currentContext.findRenderObject().paintBounds.size.height;

      timer = Timer.periodic(Duration(milliseconds: _timerRest), (timer) {
        double maxScrollExtent = scrollController.position.maxScrollExtent;
        double pixels = scrollController.position.pixels;
        if (pixels + _moveDistance >= maxScrollExtent) {
          if (widget.scrollAxis == Axis.horizontal) {
            position = (maxScrollExtent -
                        screenWidth * widget.ratioOfBlankToScreen +
                        widgetWidth) /
                    2 -
                widgetWidth +
                pixels -
                maxScrollExtent;
          } else {
            position = (maxScrollExtent -
                        screenHeight * widget.ratioOfBlankToScreen +
                        widgetHeight) /
                    2 -
                widgetHeight +
                pixels -
                maxScrollExtent;
          }
          scrollController.jumpTo(position);
        }
        position += _moveDistance;
        scrollController.animateTo(position,
            duration: Duration(milliseconds: _timerRest), curve: Curves.linear);
      });
    }
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    screenWidth = MediaQuery.of(context).size.width;
    screenHeight = MediaQuery.of(context).size.height;
  }

  Widget getBothEndsChild() {
    if (widget.scrollAxis == Axis.vertical) {
      String newString = widget.text.split("").join("\n");
      return Center(
        child: Text(
          newString,
          style: widget.textStyle,
          textAlign: TextAlign.center,
        ),
      );
    }
    return Center(
        child: Text(
      widget.text,
      style: widget.textStyle,
    ));
  }

  Widget getCenterChild() {
    if (widget.scrollAxis == Axis.horizontal) {
      return Container(width: screenWidth * widget.ratioOfBlankToScreen);
    } else {
      return Container(height: screenHeight * widget.ratioOfBlankToScreen);
    }
  }

  @override
  void dispose() {
    super.dispose();
    if (timer != null) {
      timer.cancel();
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      key: _key,
      scrollDirection: widget.scrollAxis,
      controller: scrollController,
      physics: NeverScrollableScrollPhysics(),
      children: <Widget>[
        getBothEndsChild(),
        getCenterChild(),
        getBothEndsChild(),
      ],
    );
  }
}
ScrollingText(
  text: text,
  textStyle: TextStyle(fontSize: 12),
)


使用pub.dev中的此小部件

字幕(
课文:“曾经有一个男孩讲了一个关于男孩的故事:”,
)
如果您使用Marquee(另一个答案)或此答案,请不要忘记将其放入容器中并给出高度和宽度,因为Marque和上面的示例是
listview