如果文本溢出，则替换该文本

问题描述

我想知道，如果原始文本将溢出，Ffltter中是否有方法可以显示替代文本。

示例：

我默认显示完整日期：January 1, 2019。

但是，如果我在一个小屏幕上，它会溢出(January 1...)，我想改为显示不同的字符串(1/1/2019)。

推荐答案

我最终选择了一个受@Mantoska答案启发的解决方案。

import 'package:flutter/widgets.dart';

class OverflowProofText extends StatelessWidget {
  const OverflowProofText({@required this.text, @required this.fallback});

  final Text text;
  final Text fallback;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
        width: double.infinity,
        child: LayoutBuilder(builder: (BuildContext context, BoxConstraints size) {
          final TextPainter painter = TextPainter(
            maxLines: 1,
            textAlign: TextAlign.left,
            textDirection: TextDirection.ltr,
            text: TextSpan(
                style: text.style ?? DefaultTextStyle.of(context).style,
                text: text.data
            ),
          );

          painter.layout(maxWidth: size.maxWidth);

          return painter.didExceedMaxLines ? fallback : text;
        })
    );
  }
}

用法：

OverflowProofText(
  text: Text('January 1, 2019'),
  fallback: Text('1/1/2019', overflow: TextOverflow.fade),
),