如何在使用TextOverflow.ellipsis时删除文本右侧的额外空间

Question

这是一个代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: Home()));
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 200,
          color: Colors.green[200],
          child: Text(
            'https://someurl.com/4792479008289298462374623746723457',
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ),
    );
  }
}

其结果与我所期望的不完全相同：

​

但我需要这样的东西：

​

在这种情况下，softWrap帮不上忙

Answer 1

以下是Github问题：带有省略号的文本溢出在设计上是怪异和丑陋的。

下面是一个快速的解决方法：

1. TextOverflow.ellipsis使用regex模式\u2026，可以在Text data上应用regex模式\u{200B}。

代码：

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 200,
          color: Colors.green[200],
          child: Text(
            'https://someurl.com/479247900828929846'.replaceAll("", "\u{200B}"),
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ),
    );
  }
}

产出：

​

​

1. 使用颤振包，它使您能够执行此分类布局小部件