Question

我有一列文字。我不知道传入字符串的确切大小，因此我希望我的某些文本以省略号结尾。

  Flexible(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              SizedBox(height: 16),
              Align(
                alignment: Alignment.center,
                child: Text(_model._schoolName,
                    overflow: TextOverflow.ellipsis,  //this one works
                    style: TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.w600,
                        fontSize: 18)),
              ),
              SizedBox(height: 12),
              Row(
                children: <Widget>[
                  Icon(Icons.location_on, color: Colors.grey[700]),
                  Container(width: 8),
                  Text(_model._guides,
                      overflow: TextOverflow.ellipsis,  //this one doesn't work
                      style: TextStyle(
                          fontSize: 14,
                          color: Colors.black,
                          fontWeight: FontWeight.w400)),
                ],
              ),
              SizedBox(height: 12),
              Row(
                children: <Widget>[
                  Icon(Icons.attach_money, color: Colors.grey[700]),
                  Container(width: 8),
                  Text(_model._priceFrom,
                      style: TextStyle(
                          fontSize: 14,
                          color: Colors.black,
                          fontWeight: FontWeight.w400))
                ],
              )
            ],
          ),
        )

我第一次使用TextOverflow.ellipsis有效，而第二次却无效。有人可以解释为什么吗？谢谢！

Answer 1

原因是您需要告知Text小部件要包装的最大宽度。在Row中，可以将其mainAxisSize设置为MainAsixSize.max并将Text小部件包装在Flexible上以占用剩余空间。

Row(
  mainAxisSize: mainAxisSize: MainAxisSize.max,
  children: <Widget>[
    Icon(Icons.location_on, color: Colors.grey[700]),
    Container(width: 8),
    Flexible(
      child: Text(_model._guides,
        overflow: TextOverflow.ellipsis,  //this one doesn't work
        style: TextStyle(
          fontSize: 14,
          color: Colors.black,
          fontWeight: FontWeight.w400,
        ),
      ),
    ),
  ],
),

Answer 2

只需将您的Text包裹在另一个Flexible中，就像这样：

Row(
  children: <Widget>[
    Icon(Icons.location_on, color: Colors.grey[700]),
    Container(width: 8),
    Flexible(
      child: Text(_model._guides,
          overflow: TextOverflow.ellipsis, //this one now works :)
          style: TextStyle(
              fontSize: 14,
              color: Colors.black,
              fontWeight: FontWeight.w400)),
    ),
  ],
),

包裹主Flexible的第一个Column为其直接子元素设置布局，这就是第一个Text起作用的原因，因为它是{{ 1}}。但是随后您添加了Column来设置其自己的子级布局，通过将Row包裹在Text中，您将无法使用溢出功能，因为它没有任何宽度限制告诉它抢占其父级宽度的所有空间，并应用所需的Flexible，在这种情况下使用TextOverflow。

希望有帮助。

Answer 3

这会将文本设置为单行文本，并在其后附加省略号。请注意，只有当宽度超过父窗口小部件的宽度时，它才会开始追加。

Text(
  "Really long text here!",
  overflow: TextOverflow.ellipsis,
  maxLines: 1,
)

Flutter Text溢出不适用于第二行

3 个答案: