如何根據內容自動調整 flutter 中的卡片視圖大小

Question

我在 flutter 中遇到了一個問題，我在卡片小部件中有一個列表視圖。 我正在從 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 應該顯示所有五個項目。 我無法手動設置高度，因為我不知道列表中的項目數。 有沒有辦法動態調整卡片視圖的大小以顯示列表視圖返回的任意數量的項目？

Answer 1

您可以嘗試使用 crossAxisAlignment: CrossAxisAlignment.stretch 在IntrinsicHeight小部件內的Row小部件中包圍您的卡片

這樣，Row 的子項（您的卡片）將垂直擴展，但 Row 將占用最少的可用垂直空間。

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

Answer 2

似乎 ListView 在一個 Column 內，嘗試將您的 CardviewListItemData 包裝在一個靈活的小部件中。