图标旁边的颤动文本不希望正确应用TextOverflow.ellipsis

Question

我需要一行前面有一个图标的文本，以防该行太长，它应该以省略号(...)结束。

Breaking to the right

下面是我的代码：

  Flexible _buildAddress() {
return Flexible(
  child: Row(
    mainAxisSize: MainAxisSize.max,
    children: [
      Icon(Icons.location_on, size: 20, color: Colors.grey,),
      SizedBox(width: 5.0,),
      Text(
        'Lorem ipsum long very long line of text',
        overflow: TextOverflow.ellipsis,
        style: TextStyle(
          color: Colors.grey,
          fontSize: 16.0,
        ),
      ),
    ],
  ),
);

}}

细节:如果我只有文本，省略号就能正常工作。

Answer 1

您应该使用Flexible小部件包装Text小部件：

我以您的代码为例添加了一个演示：

           return Row(
                mainAxisSize: MainAxisSize.max,
                children: [
                  Icon(
                    Icons.location_on,
                    size: 20,
                    color: Colors.grey,
                  ),
                  SizedBox(
                    width: 5.0,
                  ),
                  Flexible( // new line
                    child: Text(
                      'Lorem ipsum long very long line of text ddss',
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        color: Colors.grey,
                        fontSize: 16.0,
                      ),
                    ),
                  ),
                ],
              ),

结果：

​

Answer 2

您可以在Text小部件上添加Flexible或Expended小部件：

_buildAddress() {
  return Container(
    child: Row(
      mainAxisSize: MainAxisSize.max,
      children: [
        Icon(
          Icons.location_on,
          size: 20,
          color: Colors.grey,
        ),
        SizedBox(
          width: 5.0,
        ),
        Expanded(
          child: Text(
            'Lorem ipsum long very long line of textLorem ipsum long very long line of text',
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
              color: Colors.grey,
              fontSize: 16.0,
            ),
          ),
        ),
      ],
    ),
  );
}