文本小部件在 Flutter 中没有正确省略答案

【问题标题】：Text widget doesn't ellipsis correctly in Flutter文本小部件在 Flutter 中没有正确省略
【发布时间】：2019-09-20 18:50:35
【问题描述】：

我正在尝试创建一个包含 10 个数据的列表视图，在每个项目中都有四个小部件包裹在一行内。
首先我插入了一个圆形图像小部件，接下来我添加了扩展小部件以平均划分文本小部件。
几乎，我已经做到了，但我发现省略文本有困难。

代码

class EmailPage extends StatefulWidget {
    @override
    _EmailPageState createState() => _EmailPageState();
    }

class _EmailPageState extends State<EmailPage> {
  GlobalKey _keyRed = GlobalKey();
  var name = "Adellena Jacksonnnnnnnnnnnnnnnnnnnnnnnnnnnn";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          elevation: 0.0,
          backgroundColor: greenColor,
          title: const Text('Inbox'),
          actions: <Widget>[
            new IconButton(
              icon: new Icon(Icons.edit),
              onPressed: () => Navigator.of(context).pop(null),
            ),
          ],
        ),
        body: SizedBox(
          width: MediaQuery.of(context).size.width,
          child: ListView.builder(
              shrinkWrap: true,
              itemCount: 10,
              itemBuilder: (BuildContext context, int index) {
                return Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: new Row(
                    children: <Widget>[
                      SizedBox(
                        width: 30,
                        height: 30,
                        child: CircleAvatar(
                            backgroundColor: Colors.brown.shade800),
                      ),
                      Expanded(
                        child: new Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Expanded(
                                flex: 4,             
                                child: Container(
                                  child: new Text(
                                          name,
                                          overflow: TextOverflow.ellipsis,
                                          softWrap: false,
                                          style: TextStyle(fontSize: 14),
                                        ),
                                  ),
                                ),
                            new Expanded(
                              flex: 3,
                              child: new Text(
                                "&14215",
                                textAlign: TextAlign.center,
                                style: TextStyle(fontSize: 12),

                              ),
                            ),
                            new Expanded(
                              flex: 3,
                              child: new Text(
                                "1000 min ago",
                                textAlign: TextAlign.end,
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(fontSize: 14),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                );
              }),
        ));
  }
}

截图 1

当我们在文本小部件中删除 overflow: TextOverflow.ellipsis 时，看起来像这样 [屏幕截图 2]

截图 2

在上图中，我没有看到全文“AdellenaJacksonnnnnnnnn "，但 expanded 限制了小部件里面可以显示多少 flex。问题是省略号不起作用预计

注意：当我删除字符串 var name = "AdellenaJacksonnnnnnnnn"; 中的空格时，像这个省略号一样工作正常

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

尝试使用灵活而不是扩展，因为。 Official Documentation

使用 Flexible 小部件可以让 Row、Column 或 Flex 的子级灵活地展开以填充主轴上的可用空间（例如，水平地用于行或垂直地用于列），但与展开不同的是，灵活不需要孩子填满可用空间。

【讨论】：

这行得通吗？ ..会有什么不同

【解决方案2】：

尝试像jackson nn nn nnn nnn那样输入姓氏，这样会更好

【讨论】：

是的，我试过了，它似乎有效，但为什么当我在字符串之间留一个空格时我不工作
因为它看起来像一个字符串块，否则在单独的类型中它们看起来像几个单词

【解决方案3】：

您可以利用这个愚蠢的技巧，通过将名称拆分为，如果您为名字设置任何最大长度，您可以修改并实际使用它。

我已经剪掉了名字，所以它看起来不会像 ui 一样溢出，假设没有 maxlength

Flexible(
 child: Text(
 tempname[0],
 overflow: TextOverflow.clip,
 maxLines: 1,
 ),
),

姓氏设置为省略号以打出名字溢出

Flexible(
 child: Text(
 tempname[0],
 overflow: TextOverflow.ellipsis,
 ),
),


ListView.builder(
              shrinkWrap: true,
              itemCount: 10,
              itemBuilder: (BuildContext context, int index) {
                var tempname = name.split(' ');
                return Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: new Row(
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      SizedBox(
                        width: 30,
                        height: 30,
                        child: CircleAvatar(
                            backgroundColor: Colors.brown.shade800),
                      ),
                      Expanded(
                        child: new Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Expanded(
                              flex: 4,
                              // width: 100,
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: <Widget>[
                                  Flexible(
                                    child: Text(
                                      tempname[0],
                                      overflow: TextOverflow.clip,
                                      maxLines: 1,
                                    ),
                                  ),
                                  Text(' '),
                                  Flexible(
                                    child: Text(
                                      tempname[1],
                                      overflow: TextOverflow.ellipsis,
                                    ),
                                  )
                                ],
                              ),
                            ),
                            new Expanded(
                              flex: 3,
                              child: new Text(
                                "&14215",
                                textAlign: TextAlign.center,
                                style: TextStyle(fontSize: 12),
                              ),
                            ),
                            new Expanded(
                              flex: 3,
                              child: new Text(
                                "1000 min ago",
                                textAlign: TextAlign.end,
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(fontSize: 14),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                );
              }),

name = 'Adellenadddddddddddddd Jacksoonnnnnnnnnnn';

name = 'Nadeem Jacksoonnnnnnnnnnn';

【讨论】：

【解决方案4】：

overflow: TextOverflow.fade 成功了。

【讨论】：

确实会产生更好的结果

【解决方案5】：

最简单的方法：

var name = 'Adellena Jacksonnnnnnnnn';
name = name.replaceAll('', '\u200B');

为了更简单的使用，你可以写一个扩展：

extension StringExtension on String {
  String useCorrectEllipsis() {
    return replaceAll('', '\u200B');
  }
}

用法：

final name = 'Adellena Jacksonnnnnnnnn'.useCorrectEllipsis();

【讨论】：

谢谢，这个效果很好，但我想知道如果你在 50 到 100 件物品上这样做，会有多贵
这是什么？你能告诉我一些关于这个解决方案的信息吗？
谢谢，非常简单的解决方案。你能添加一些关于这个答案的解释吗？
嗨，@Nazar \u200B 表示零宽度空格字符，这是一个您看不到但可以作为普通空格的特殊空格。