Question

我正在尝试创建一个包含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 ”，但扩展了限制窗口小部件可以显示多少个弹性。问题是省略号不起作用预期

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

Answer 1

最简单的方式：

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

Answer 2

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

使用“灵活”小部件可为“行”，“列”或“ Flex”的子级提供扩展的灵活性，以填充主轴上的可用空间（例如，水平放置为“行”或垂直放置为“列”），但是灵活的不需要孩子填充可用空间。

Answer 3

尝试键入像杰克逊nn nn nnn nnn这样可以更好地工作的姓氏

Answer 4

您可以利用这种愚蠢的技巧，只要将名字分成任何最大长度，就可以将名字分成两个部分，然后修改并实际使用它。

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

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 ='Adellenaddddddddddddd Jacksoonnnnnnnnnn';

name ='Nadeem Jacksoonnnnnnnnnn';

Answer 5

overflow: TextOverflow.fade帮了我大忙。

文本小部件在Flutter中无法正确省略

5 个答案: