如何在Flutter中根据内容自动调整卡片视图大小

Question

我在Flutter中遇到了一个问题，我的卡片小部件内有一个列表视图。我正在从SQLite数据库中读取数据以填充我的列表视图。我不知道列表视图的长度会是多少。我的问题是，目前我正在为卡片视图设置固定高度，由于我的列表视图可能很长或很短，所以我会得到溢出像素错误。

这是我的代码：

import 'package:flutter/material.dart';
import 'package:finsec/widget/single_line_list_view.dart';
import 'package:finsec/widget/header.dart';

import 'package:finsec/data/cardview_list_item.dart';

class cardView extends StatelessWidget {
  cardView({
    this.header,
    this.elevation,
    this.padding,
    this.query,
    this.iconColor
  });

  String header, query;
  double elevation, padding;
  Color iconColor;

  final shape = const RoundedRectangleBorder(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(8.0),
        topRight: Radius.circular(8.0),
        bottomLeft: Radius.circular(8.0),
        bottomRight: Radius.circular(8.0),
      )
  );

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.fromLTRB(0.0, padding, 0.0, 0.0),  //vertical padding between cardivew and $s0.00
      child: new Card(
        elevation: elevation,
        shape: shape,
        child: new Container(
          width: MediaQuery
              .of(context)
              .size
              .width,
          height: 165.00,
          child: new Column(
            children:[
              Header(text: header,
                textSize: 24.0,
                backgroundColor: Color(0xffC4C4C4),
                textColor: Colors.black,
                height: 50,
                padding: 20.0,
                headerRadius: 8.0
              ),
            CardviewListItemData(query)  //listview goes here

            ],
          ),
        ),
      ),
    );
  }
}

如果我的列表视图返回2个项目，那么卡片视图看起来很好，但是在3个或更多项目后，我会得到一个溢出像素错误。原因是我手动将容器的高度设置为165.00。
请参见下面的图片。

如何修复我的代码，使cardview根据列表视图中的项目数量自动调整大小？例如，如果我的列表视图返回5个项目，则cardview应显示所有五个项目。我无法手动设置高度，因为我不知道列表中的项目数。是否有任何方法动态调整cardview的大小以显示列表视图返回的任何项目数量？

- yoohoo

Answer 1

您可以尝试使用IntrinsicHeight小部件包含Row小部件，并将其crossAxisAlignment设置为CrossAxisAlignment.stretch。

这样，Row的子项（卡片）将垂直扩展，但是Row将占用可用的最少垂直空间。

Container(
  child: IntrinsicHeight(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        YourCard(
          width: 20.0,
        ),
      ],
    ),
  )
)

- Anirudh Bagri

---

谢谢Anirudh，但是我尝试了你的解决方案，它不起作用。我得到了以下错误。 ╡渲染库触发异常 I/flutter（6170）：在performLayout()期间抛出了以下断言： I/flutter（6170）：RenderShrinkWrappingViewport不支持返回内在维度。 I/flutter计算内在维度将需要实例化视口的每个子元素，这 I/flutter（6170）：违背了视口惰性加载的原则。 I/flutter（6170）：如果你只是想在主轴方向上收缩视口，那么你应该能够做到。 - yoohoo

当容器没有固定的大小时，就会发生这种情况。你可以尝试给它添加一些高度和宽度。 - Anirudh Bagri

我增加了高度，但仍出现错误。您能否编写一个将ListView放置在CardView中以展示您如何解决问题并与我分享代码的示例？ - yoohoo

Answer 2

看起来ListView在Column里面，尝试使用Flexible widget包装你的CardviewListItemData。

- roipeker