• 我正在尝试创建一个包含 10 个数据的 ListView ，在每个项目中有四个小部件，它们包含在一行中。
• 首先我插入了一个圆形图像小部件，接下来我添加了扩展小部件以平均划分文本小部件。
• 差不多，我已经达到了，但是我发现在省略文本方面有困难。

代码

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),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                );
              }),
        ));
  }
}

截图一

When we remove overflow: TextOverflow.ellipsis in the text widget look like this [Screenshot 2]

截图2

In above image i didn't get the full text "AdellenaJacksonnnnnnnnn ", but expanded restrict the widget how many flex can be shown in it. Problem is ellipsis not working as expected

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

最佳答案

最简单的方法:

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

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

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

用法:

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

关于flutter - 文本小部件在 Flutter 中不能正确省略，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55949221/