Question

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

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

（我发现）当前达到预期效果的唯一方法是按照此答案（Flutter: Minimum height on horizontal list view）将行包装在列中的singlechildscrollview中。

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

我的问题是我如何创建一个水平listview，该水平row嵌套在singlechildscrollview（Flutter: Minimum height on horizontal list view）中但使用builder方法来生成输出？

灵活

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

使用弹性卡时，请注意在卡内增加了空间（实际上，这在其他设备上会更糟）

P.S对图像质量感到抱歉！：）

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

  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

为OP张贴答案，他们将答案编辑为问题

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

pip install --upgrade pip

这将预先创建必要的滚动小部件，而不是像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 2

Flutter框架只能在构建后知道其高度。

如果您要动态构建ListView个子级，则直到所有子级都被构建完为止，它无法计算ListView的所需高度，这可能永远不会发生（无限ListView ）。

您可以给ListView设置一个固定的高度并动态地构建其子级，或者让ListView's的高度取决于它的子级，在这种情况下，您需要先构建所有的子级。 / p>

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

2 个答案: