Flutter：具有动态高度的 SizedBox

Question

我正在尝试创建一个自定义列表（替代使用ListTile小部件）。

我的代码如下所示：

Widget build(BuildContext context) {
  return Padding(
    padding: EdgeInsets.symmetric(vertical: 10.0),
    child: SizedBox(
      height: 70,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          thumbnail,
          Expanded(
            child: Padding(
              padding: EdgeInsets.fromLTRB(10.0, 0.0, 2.0, 0.0),
              child: CommentDescription(
                author: author,
                comment: comment,
                createdAt: createdAt,
                isLiked: isLiked,
                likesCount: likesCount,
              )
            )
          ),
          menu
        ],
      )
    )
  );
}

评论描述小部件

Widget build(BuildContext context) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Expanded(
        flex: 2,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              '$author',
              maxLines: 1,
              style: TextStyle(fontWeight: FontWeight.bold)
            ),
            Padding(padding: EdgeInsets.only(bottom: 4.0)),
            Text('$comment')
          ],
        )
      ),
      Expanded(
        flex: 1,
        child: Row(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(top: 8.0),
              child: Text(
                '$createdAt',
                style: TextStyle(
                  fontSize: 12.0,
                  color: Colors.grey
                )
              )
            ),
            IconButton(
              onPressed: () => print('liking comment'),
              icon: Icon(
                isLiked ? Icons.favorite : Icons.favorite_border,
                color: Colors.red,
                size: 16.0
              )
            ),
            Padding(
              padding: EdgeInsets.only(top: 8.0),
              child: Text(
                '$likesCount',
                style: TextStyle(
                  color: Colors.grey,
                  fontSize: 12.0
                )
              )
            )
          ],
        )
      )
    ],
  );
}

我遇到的问题是，代码使用SizedBox小部件来包装每个图块，这需要固定的高度。但我想要一些可以与动态高度配合使用的东西，因为内容的高度无法预先确定。请问我该如何处理这个问题。

注意：当我删除SizedBox小部件时，我在控制台中收到此错误消息：

The following assertion was thrown during performLayout(): RenderFlex children
have non-zero flex but incoming height constraints are unbounded. When a column
is in a parent that does not provide a finite height constraint, for example if 
it is in a vertical scrollable, it will try to shrink-wrap its children along 
the vertical axis. Setting a flex on a child (e.g. using Expanded) indicates 
that the child is to expand to fill the remaining space in the vertical 
direction. These two directives are mutually exclusive. If a parent is to
shrink-wrap its child, the child cannot simultaneously expand to fit its parent. 
Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits 
for the flexible children (using Flexible rather than Expanded). This will allow 
the flexible children to size themselves to less than the infinite remaining 
space they would otherwise be forced to take, and then will cause the RenderFlex 
to shrink-wrap the children rather than expanding to fit the maximum constraints 
provided by the parent. 

Answer 1

您应该简单地删除 CommentDescription 中的所有 Expanded 小部件。Expanded 仅当父 Row 或 Column 的宽度或高度固定时才能使用。

Widget build(BuildContext context) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            '$author',
            maxLines: 1,
            style: TextStyle(fontWeight: FontWeight.bold)
          ),
          Padding(padding: EdgeInsets.only(bottom: 4.0)),
          Text('$comment')
        ],
      ),
      Row(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(top: 8.0),
            child: Text(
              '$createdAt',
              style: TextStyle(
                fontSize: 12.0,
                color: Colors.grey
              )
            )
          ),
          IconButton(
            onPressed: () => print('liking comment'),
            icon: Icon(
              isLiked ? Icons.favorite : Icons.favorite_border,
              color: Colors.red,
              size: 16.0
            )
          ),
          Padding(
            padding: EdgeInsets.only(top: 8.0),
            child: Text(
              '$likesCount',
              style: TextStyle(
                color: Colors.grey,
                fontSize: 12.0
              )
            )
          )
        ],
      )
    ],
  );
}