没有明显高度的水平ListView抖动

Question

我正在尝试创建listview.builder()没有预设高度的水平滚动。

我试过设置shrinkwrap为true并将其包装在Expanded / Flexible中。

当前达到理想效果的唯一方法（我发现）是singlechildscrollview按照此答案在行内的一列内包装一行（Flutter：水平列表视图上的最小高度）。

该方法的问题在于，没有构建器方法可将动态数据加载到内的Cards中singlechildscrollview。

我的问题是如何创建一个listview通过row嵌套singlechildscrollview（Flutter：水平列表视图上的最小高度）内的嵌套但使用生成器方法生成输出的Horizo​​ntal ？

具有弹性

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

row内部嵌套singlechildscrollview（有效的方法）

 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

请注意，使用弹性卡时会在卡内增加空间（实际上，这在不同设备上会变得更糟）

PS对图像质量感到抱歉！:)

通过创建如下的自定义构建器方法解决了该问题：

  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;}

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那样懒惰。