文本小部件未显示在 ListTile 颤动中

Posted 2023-02-22

【中文标题】文本小部件未显示在 ListTile 颤动中

【英文标题】：Text widget not displaying in ListTile flutter

【发布时间】：2019-03-19 05:22:17

【问题描述】：

我想在左侧部分显示个人资料图片，在中间部分显示名称和公司（在其他部分下方），并在 ListTile 内的右侧部分显示评论和评级。我能够正确显示图像、评论和评分，但没有显示文本。我想实现这个：

图片和评分之间的空白是我想要显示文本的地方（名称和公司，在另一个下方）。不知道我在这里错过了什么。

下面的代码sn-p：

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) 列出 proTiles = new List();

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

return new ListView(
  children: proTiles
);

这是它的实现：

ListTile proTile(Pro pro, BuildContext context) 返回新的 ListTile

【参考方案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'),
            ],
          )
        ],
      );

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

【讨论】：

是的，我之前尝试过上述方法以使其保持简单，但它垂直显示fullname 和company，并且rating 与它重叠。我希望我可以粘贴它的屏幕截图。 @diegoveloper

可以添加截图吗？

在我原来的问题@diegoveloper 中添加了屏幕截图。

ListTile 的父小部件是什么？

好像是动态的ListView..这是我在代码中看到的。