需要列来填充行的高度

Question

这似乎是一个常见问题，我看了很多教程，但我无法掌握这个简单的布局。我在一行中有一列。我希望 Column 扩展以填充行的高度，然后我希望 Column 的子级等间距。

return Card(
  child: Row(
    children: <Widget>[
      CachedNetworkImage(
        height: 80,
        imageUrl: posterUrl,
        placeholder: (context, url) => new CircularProgressIndicator(),
        errorWidget: (context, url, error) => new Icon(Icons.error),
      ),
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(_show['name']),
          Text('First Episode: ' + _show['first_air_date']),
        ],
      ),
    ],
  ),

);

如何让列填充行中可用的高度？

Answer 1

我假设您希望扩展 Column 的一个元素，以便 Column 填充 Row 的最大元素的高度：您可以将整个 Row 在 IntrinsicHeight 中，并用 Expanded 包裹 Column 中的 children 之一，例如：

return Card(
  child: IntrinsicHeight(
    child:Row(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        CachedNetworkImage(
          height: 80,
          imageUrl: posterUrl,
          placeholder: (context, url) => new CircularProgressIndicator(),
          errorWidget: (context, url, error) => new Icon(Icons.error),
        ),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(_show['name']),
            Expanded(child: Text('First Episode: ' + _show['first_air_date'])),
          ],
        ),
      ],
    ),
  ),

);

需要列来填充行的高度

Need Column to fill height of a Row

flutter

flutter-layout