Question

我想在给定的SizedBox中有一个文本（不能更改）。但是这段文字可能会不时变化。因此，我编写了一个类，当它适合给定大小时会显示文本 centred ，而当它太大时会显示文本。但是在我的代码中，只有一秒钟的错误。

必须根据需要动态显示。

我的代码如何工作：

默认情况下，我构建居中文本。这也是我得到x像素溢出错误的关键所在。
然后我以异步方法检查文本大小和给定大小。
如果文本小部件太长，我将开始滚动（AlwaysScrollingText）。

现在的问题是，如何获得没有的xxx像素大小的文本。

import 'dart:async';

import 'package:flutter/material.dart';

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

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

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

class ScrollingTextState extends State<ScrollingText> {
  bool scroll = false;
  GlobalKey _sizeKey = GlobalKey();

  @override
  void didUpdateWidget(ScrollingText oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.text != widget.text) scroll = false;
  }

  @override
  Widget build(BuildContext context) {
    checkScroll();
    return scroll
        ? SizedBox(
            width: widget.width,
            child: AlwaysScrollingText(
              text: widget.text,
              style: widget.style,
            ))
        : getText();
  }

  Widget getText() {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(widget.text, style: widget.style, maxLines: 1, key: _sizeKey)
        ],
      ),
    );
  }

  checkScroll() async {
    await Future.delayed(Duration(milliseconds: 500));
    if (_sizeKey.currentContext == null) return;
    double _textWidth =
        _sizeKey.currentContext.findRenderObject().paintBounds.size.width;
    bool scroll = _textWidth > widget.width;
    print('$_textWidth > ${widget.width}');
    if (scroll != this.scroll)
      setState(() {
        this.scroll = scroll;
      });
  }
}

class AlwaysScrollingText extends StatefulWidget {
  final String text;
  final TextStyle style;
  final double ratioOfBlankToScreen;

  AlwaysScrollingText({
    @required this.text,
    this.style,
    this.ratioOfBlankToScreen: 0.25,
  }) : assert(text != null,);

  @override
  _AlwaysScrollingTextState createState() => _AlwaysScrollingTextState();
}

class _AlwaysScrollingTextState extends State<AlwaysScrollingText>
    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 = getSizeFromKey(_key).width;

      timer = Timer.periodic(Duration(milliseconds: _timerRest), (timer) {
        double maxScrollExtent = scrollController.position.maxScrollExtent;
        double pixels = scrollController.position.pixels;
        if (pixels + _moveDistance >= maxScrollExtent) {
          position = (maxScrollExtent -
                      screenWidth * widget.ratioOfBlankToScreen +
                      widgetWidth) /
                  2 -
              widgetWidth +
              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() {
    return Center(
        child: Text(
      widget.text,
      style: widget.style,
      maxLines: 1,
    ));
  }

  Widget getCenterChild() {
    return Container(width: screenWidth * widget.ratioOfBlankToScreen);
  }

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

  @override
  Widget build(BuildContext context) {
    return ListView(
      key: _key,
      scrollDirection: Axis.horizontal,
      controller: scrollController,
      physics: NeverScrollableScrollPhysics(),
      children: <Widget>[
        getCenterChild(),
        getBothEndsChild(),
      ],
    );
  }

  Size getSizeFromKey(GlobalKey key) =>
      key.currentContext?.findRenderObject()?.paintBounds?.size;
}

实际结果： https://i.imgur.com/FFewRtB.gif（信誉不足，无法发布图像：c）

Answer 1

您可以将文本字段放在扩展的小部件内。此处是指向类的链接。 expanded widget。

这是代码。 Expanded( child: Text("hello"), );

Answer 2

此错误已通过以下小技巧修复：

将bool scroll = _textWidth > widget.width;替换为bool scroll = _textWidth >= widget.width;
在Row方法中删除了getText小部件

用户界面始终有效-但是检查小部件尺寸时出错

2 个答案: