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

Posted 2023-02-23

【中文标题】如何根据内容自动调整卡片视图的大小

【英文标题】：how to auto resize card view in flutter based on the content

【发布时间】：2020-01-29 20:57:44

【问题描述】：

我面临一个问题，我在卡片小部件中有一个列表视图。我正在从 SQLite 数据库中读取数据以填充我的列表视图。我不知道列表视图会持续多久。我的问题是，目前我正在为 cardview 设置一个固定的高度，并且由于我的列表视图可以长或短，我得到一个溢出像素错误。

这是我的代码：

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 个项目，那么 cardview 看起来还可以，但在 3 个或更多项目之后，我得到一个溢出像素错误。原因是我手动将容器的高度设置为 165.00。 见下图

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

【问题讨论】：

这能回答你的问题吗？ How to make flutter card auto adjust its height depend on content

【参考方案1】：

您可以尝试使用 crossAxisAlignment: CrossAxisAlignment.stretch 将您的卡片包围在 IntrinsicHeight 小部件内的 Row 小部件中

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

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

【讨论】：

感谢 Anirudh，但我尝试了您的解决方案但不起作用。我收到以下错误。 ╡ 渲染库 I/flutter (6170) 捕获的异常：在 performLayout() 期间引发了以下断言：I/flutter (6170)：RenderShrinkWrappingViewport 不支持返回固有尺寸。 I/flutter 计算内在尺寸需要实例化视口的每个子项，I/flutter (6170)：克服了视口懒惰的观点。 I/flutter (6170)：如果你只是想在主轴方向收缩视口，你应该可以

当容器没有固定大小时会发生这种情况。你能试着给它增加一些高度和宽度吗

我增加了高度，但仍然有错误。您能否在 carview 中编写/编写一个 listview 示例来展示您如何解决问题并与我分享代码？

【参考方案2】：

好像 ListView 在一个 Column 中，尝试将您的 CardviewListItemData 包装在一个灵活的小部件中。