Flutter Text 溢出不适用于第二行

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的另一个包裹起来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包装 mainColumn为其直接子项设置布局，这就是第一个Text有效的原因，因为它是Column. 但是然后你添加了一个Row设置它自己的孩子的布局，并且溢出将不起作用，因为它没有任何宽度约束，通过将它包装Text在一个Flexible你告诉它抓住它可以达到其父宽度的所有空间，在这种情况下TextOverflow，并应用您需要的任何内容ellipsis。

希望能帮助到你。