flutter - 列小部件导致布局问题

Question

我目前有一个由Containers()组成的列表(因为我不能使用ListView，因为我需要外部滚动)，所以它运行良好，但因为在每个 View 中我都有一个Row()，带有两个Column()小部件。第一栏应限制打印图像，第二栏应限制显示行中的某些信息。这是一种非常典型的 list 编制方式，因此我认为它不会引起问题。
事实是，第二个Text()中的第二个Column()小部件似乎总是导致较高的Text()向右移动，从而导致溢出，并使用户无法阅读文本。看这张图片:

是的，标题在那里(即使您看不到第二个标题)。它们只是向右移。如果我删除下面的描述，它们将正确显示在左侧，仅留一点填充。事实是，无论下面的元素如何，这些标题都应该存在，或者至少，这就是我理解Column()小部件应该起作用的方式。
看一下代码:

 getListItems(List<Artist> artistList) {
    // Iterate through the whole Artists array and render a list item for each one
    return artistList.map((Artist artist) {
      return Container(
          margin: EdgeInsets.only(top: 12),
          height: 100,
          color: Colors.grey[600],
          child: Row(
            children: <Widget>[
              Padding(padding: EdgeInsets.only(left: 15)),
              Column(
                children: <Widget>[
                  Image(
                      width: 100,
                      height: 100,
                      fit: BoxFit.cover,
                      image: artist.avatar)
                ],
              ),
              Padding(padding: EdgeInsets.only(top: 5)),
              Column(
                children: <Widget>[
                  Text(
                    artist.name,
                    style: TextStyle(fontSize: 18),
                  ),
                  Padding(padding: EdgeInsets.only(top: 5)),
                  Text(artist.description, style: TextStyle(fontSize: 13))
                ],
              )
            ],
          ));
    }).toList();

该代码有什么问题？谢谢!

Answer 1

您可以用Flexible包装第二列，以避免溢出:

Container(
          margin: EdgeInsets.only(top: 12),
          height: 100,
          color: Colors.grey[600],
          child: Row(
            children: <Widget>[
              Padding(padding: EdgeInsets.only(left: 15)),
              Column(
                children: <Widget>[
                  Image(
                      width: 100,
                      height: 100,
                      fit: BoxFit.cover,
                      image: artist.avatar)
                ],
              ),
              Flexible(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      artist.name,
                      style: TextStyle(fontSize: 18),
                    ),
                    Padding(padding: EdgeInsets.only(top: 5)),
                    Text(artist.description, style: TextStyle(fontSize: 13))
                  ],
                ),
              )
            ],
          ))