Flutter中ListTile中的文本小部件未显示

Question

我想在左边区域显示个人资料图像，在中间区域（一个在另一个下面）显示姓名和公司，在ListTile中右侧部分显示评论和评分。我能够正确地显示图像、评论和评分，但是文字没有被显示。我想要实现这个:

图像和评级之间的空白区域就是我想要展示文本的地方（名字和公司，一个在另一个下面）。不确定我错过了什么。

以下是代码片段:

return new ListTile(
      contentPadding: EdgeInsets.all(8.0),
          leading: _getProfilePic(pro),
      //    title: new Text('${pro.fullname}'),
        title: new Column(
          children: <Widget>[
            new Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                new Text('${pro.fullname}')
              ],
            ),
          ],
        ),
    subtitle: Column(children: <Widget>[
      Padding(
        padding: EdgeInsets.all(3.0),
      ),
            new Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                new Text('${pro.company}', style: TextStyle(fontSize: 12.0),
                ),
              ],
            ),
          ],
    ),
      trailing: new Column(children: <Widget>[
        new Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            new StarRating(starCount: 5, rating: pro.rating, color: Colors.amber),
          ],
        ),
        new Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            new Text('${pro.reviewCount} reviews'),
          ],
        )
      ],) ,

---

---

这似乎是一个返回ListView的自定义方法，如下所示：

Widget buildProList(List pros, BuildContext context) { List proTiles = new List();

pros.forEach((pro) {
  proTiles.add(proTile(pro, context));
});

return new ListView(
  children: proTiles
);

以下是它的实现：

列表瓷砖 proTile(Pro pro, BuildContext context) { 返回新的 ListTile {

}

- Darshan

Answer 1

你可以查看 ListTile 的源代码来了解它是如何构建树形结构的。 如果你阅读 ListTile 小部件的文档，你会发现类似这样的内容：

  /// The primary content of the list tile.
    ///
    /// Typically a [Text] widget.
    final Widget title;

    /// Additional content displayed below the title.
    ///
    /// Typically a [Text] widget.
    final Widget subtitle;

    /// A widget to display after the title.
    ///
    /// Typically an [Icon] widget.
    final Widget trailing;

因此，您必须考虑传递的小部件。

您的布局看起来过于复杂，以下是一个简单构建小部件的示例：

    new ListTile(
            contentPadding: EdgeInsets.all(8.0),
            leading: _getProfilePic(pro),
            title: new Text('${pro.fullname}'),
            subtitle: Text('${pro.company}',
              style: TextStyle(fontSize: 12.0),
            ),
            trailing: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new StarRating(starCount: 5, rating: pro.rating, color: Colors.amber),
                new Text('${pro.reviewCount} reviews'),
              ],
            ),
          ), 

另一种不使用 ListTile 的解决方案：

  return Row(
        children: <Widget>[
        _getProfilePic(pro),

          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Text(
                  '${pro.fullname}',
                  overflow: TextOverflow.ellipsis,
                ), 
                new Text(
                  '${pro.company}',
                  style: TextStyle(fontSize: 12.0), 
                ),
              ],
            ),
          ),

          new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new StarRating(starCount: 5, rating: pro.rating, color: Colors.amber)
              new Text('${pro.reviewCount} reviews'),
            ],
          )
        ],
      );

注意：不要忘记检查子小部件的父级约束条件。

- diegoveloper

---

是的，我之前尝试过上述方法以保持简单，但它会垂直显示“fullname”和“company”，而“rating”则会重叠在其上。我希望我能够粘贴一张屏幕截图。@diegoveloper - Darshan

你能添加一张截图吗？ - diegoveloper

你的 ListTile 的父部件是什么？ - diegoveloper

这似乎是一个动态的 ListView.. 这是我在代码中看到的。 - Darshan

只需要将这个: ListTile proTile(Pro pro, BuildContext context) 改成 Widget proTile(Pro pro, BuildContext context)，然后就可以运行了。 - diegoveloper