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
              )
            )
          )
        ],
      )
    ],
  );
}

Answer 2

我假设您想限制缩略图的大小。如果是这种情况，试试这个：

  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: 10.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          SizedBox(
            height: 70,
            child: 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
        ],
      ),
    );
  }