如何意识到这一点？

Question

我看到 ListView，它有一个 TrackWidget。

TrackWidget 包含一个 Row，其中包含 Text(number)、Text(title)、Text(subtitle)、Text(time) 和 Button。

但是，也可能有标题大于行大小。在这种情况下，Text(title) 应该占据所有位置。

请帮帮我。

Answer 1

使用 RichText 小部件可能是可行的方法，使用它优先呈现的文本将是第一个呈现的文本，因此在您的情况下是歌曲名称。

另外不要忘记设置 TextOverflow.ellipsis 以在文本太长时使用 ...。

例子

ListTile(
  leading: Text(songTrackNumber, style: TextStyle(color: Colors.grey)),
  title: RichText(
    overflow: TextOverflow.ellipsis,
    text: TextSpan(
      style: TextStyle(color: Colors.black),
      children: [
        TextSpan(text: songTitle),
        TextSpan(text: songAlbum, style: TextStyle(color: Colors.grey)),
      ],
    ),
  ),
  trailing: Text(songLength, style: TextStyle(color: Colors.grey)),
);

Try full example on DartPad

Answer 2

Text 小部件看起来像是在使用一种技术来创建省略号。假设您有下面的 Row 小部件：

Row(
  children: [
    Text('Row 1, Text 1', style: TextStyle(fontSize: 24, color: Colors.red)),

    SizedBox(width: 8),
    Text('Row 1, Text 2', style: TextStyle(fontSize: 24, color: Colors.orange)),

    SizedBox(width: 8),
    
    // This is the widget/text you want to change format. 
    Text('Row 1, Text 3', style: TextStyle(fontSize: 24, color: Colors.yellow)),

    SizedBox(width: 8),
    Text('Row 1, Text 4', style: TextStyle(fontSize: 24, color: Colors.green)),
  ],
);

您需要将该小部件包装在 Container 中，然后将 Container 包装在 Flexible 小部件中。最后向 Text 小部件添加省略号溢出。

像这样：

Row(
  children: [
    Text('Row 1, Text 1', style: TextStyle(fontSize: 24, color: Colors.red)),
    SizedBox(width: 8),
    Text('Row 1, Text 2', style: TextStyle(fontSize: 24, color: Colors.orange)),
    SizedBox(width: 8),


    /// Our new updated widget.
    Flexible(
      child: Container(
        child: Text(
          'Row 1, Text 3',
          overflow: TextOverflow.ellipsis,
          style: TextStyle(fontSize: 24, color: Colors.yellow),
        ),
      ),
    ),


    SizedBox(width: 8),
    Text('Row 1, Text 4', style: TextStyle(fontSize: 24, color: Colors.green)),
    SizedBox(width: 8),
  ],
);

这是它的样子：

注意黄色文本现在被剪掉了。

查看 Dart Pad 演示 here。

如何意识到这一点？

How to realize that?

text

richtext

dart

flutter