沒有明確高度的水平 ListView 顫動

Question

我正在嘗試創建一個沒有預設高度的水平滾動listview.builder() 。

我試過將shrinkwrap設置為true 並將其包裝在Expanded/Flexible 中。

根據這個答案（ 顫振：水平列表視圖上的最小高度），目前實現預期效果的唯一方法（我發現）是將一行包裹在一個列內的singlechildscrollview 。

該方法的問題在於沒有構建器方法將動態數據加載到singlechildscrollview內的 Cards 中。

我的問題是如何創建一個水平listview ，該listview通過嵌套在singlechildscrollview的row生成輸出（ 顫振：水平列表視圖上的最小高度）但使用構建器方法？

靈活的

Scaffold(
  body: Container(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Flexible(
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: 3,
            itemBuilder: (BuildContext context, int index) {
              return FeaturedCard();
            },
          ),
        ),
        Flexible(
          child: ListView.builder(
            shrinkWrap: true,
            itemCount: 10,
            itemBuilder: (BuildContext context, int index) {
              return FeaturedCard();
            },
          ),
        ),
      ],
    ),
  ),
)

結果： https : //i.stack.imgur.com/XKiWo.jpg

在singlechildscrollview嵌套row （有效的方法）

 Container(
  padding: EdgeInsets.only(top: 16, bottom: 8),
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          children: <Widget>[
            FeaturedCard(),
            FeaturedCard(),
          ],
        ),
      ),
    ],
  ),
)

結果： https : //i.stack.imgur.com/va3TY.jpg

注意使用靈活時卡內增加的空間（這實際上在不同的設備上變得更糟）

Answer 1

Flutter 框架只有在構建后才能知道小部件的高度。

如果您正在動態構建ListView子項，則在構建所有子項之前，它無法計算ListView所需的高度，這可能永遠不會發生（無限ListView ）。

您可以給ListView一個固定的高度並動態構建其子項，或者讓ListView's高度取決於它的子項，在這種情況下，您需要預先構建它的所有子項。

Answer 2

為將答案編輯到問題中的 OP 發布答案

通過創建自定義構建器方法解決了這個問題，如下所示：

Widget _buildFeaturedCards(List<Product> product) {
  final cards = <Widget>[];
  Widget FeautredCards;

  if (product.length > 0) {
    for (int i = 0; i < product.length; i++) {
      cards.add(FeaturedCard(product[i]));
      print(product.length);
    }
    FeautredCards = Container(
      padding: EdgeInsets.only(top: 16, bottom: 8),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(children: cards),
          ),
        ],
      ),
    );
  } else {
    FeautredCards = Container();
  }
  return FeautredCards;
}

這會預先創建必要的滾動小部件，而不是像ListView.builder那樣懶惰。