Question

是否可以在Flutter中将溢出点设置为文本的中间？

一个正常的用例是显示文件名，用户也可以看到文件扩展名。

即当前，通过将Text小部件和overflow参数用作TextOverflow.ellipsis，我们将获得以下信息

Text(
    "IMG_100232321321312312312312312321321312321343024.PNG",
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
    style: Theme.of(context).textTheme.caption,
);

结果将类似于：

IMG_10023232132131 ...

有什么办法可以得到这样的结果：

IMG_10023 ... 3024.PNG

Answer 1

可以做这样的事情。

Row(
      children: <Widget>[
        Spacer(),
        Expanded(
          child: Text(
            fileName.length > 8 ? fileName.substring(0, fileName.length - 8) : fileName,
            maxLines: 1,
            textAlign: TextAlign.end,
            overflow: TextOverflow.ellipsis,
          ),
        ),
        Expanded(
          child: Text(
            fileName.length > 8 ? fileName.substring(fileName.length - 8) : '',
            maxLines: 1,
            textAlign: TextAlign.start,
          ),
        ),
        Spacer(),
      ],
)

Answer 2

您可以像这样使用路径库：

导入“ package：path / path.dart”作为路径；

   var data = "IMG_100232321321312312312312312321321312321343024.PNG";


          Row(
              children: <Widget>[
                Flexible(
                  child: Text(
                    data.split(path.extension(data))[0],
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: Theme.of(context).textTheme.caption,
                  ),
                ),
                Text(
                  path.extension(data),
                  style: Theme.of(context).textTheme.caption,
                ),
              ],
            )

Answer 3

我能够通过这段代码实现这一点。

class TextWithMidEllipsis extends StatelessWidget {
  final String data;
  final TextStyle style;
  final TextAlign? textAlign;
  const TextWithMidEllipsis(
    this.data, {
    Key? key,
    this.textAlign,
    this.style = const TextStyle(),
  }) : super(key: key);

  final textDirection = TextDirection.ltr;
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraint) {
        if (constraint.maxWidth <= _textSize(data, style).width && data.length > 10) {
          var endPart = data.trim().substring(data.length - 10); 
          return Row(
            children: [
              Flexible(
                child: Text(
                  data.fixOverflowEllipsis,
                  style: style,
                  textAlign: textAlign,
                  overflow: TextOverflow.ellipsis,
                  textDirection: textDirection,
                ),
              ),
              Text(
                endPart,
                style: style,
                textDirection: textDirection,
                textAlign: textAlign,
              ),
            ],
          );
        }
        return Text(
          data,
          style: style,
          textAlign: textAlign,
          maxLines: 1,
          textDirection: textDirection,
        );
      },
    );
  }

  Size _textSize(String text, TextStyle style) {
    final TextPainter textPainter = TextPainter(
      text: TextSpan(
        text: text,
        style: style,
      ),
      maxLines: 1,
      textDirection: textDirection,
    )..layout(minWidth: 0, maxWidth: double.infinity);
    return textPainter.size;
  }
}
extension AppStringExtension on String {
  String get fixOverflowEllipsis =>
      Characters(this).replaceAll(Characters(''), Characters('\u{200B}')).toString();
}

颤振：文本溢出省略号，文本中间有三个点

3 个答案: