没有明显高度的水平ListView抖动 [英] Horizontal ListView flutter WITHOUT explicit height

问题描述

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

I'm trying to create a Horizontal scrolling listview.builder() with no pre-set height.

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

I've tried setting shrinkwrap to true and wrapping it inside an Expanded/Flexible.

(我发现)当前达到预期效果的唯一方法是按照此答案将行包装在列内的singlechildscrollview中(

The only way (that i have found) to currently achieve the desired effect is to wrap a row inside a singlechildscrollview inside a column, as per this answer (Flutter: Minimum height on horizontal list view).

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

The problem with that method is that there is no builder method to load dynamic data into the Cards inside the singlechildscrollview.

我的问题是我如何创建水平listview，该水平listview由嵌套在singlechildscrollview内的row生成输出(

My question is how do i create a Horizontal listview that that generates the output by the row nested inside the singlechildscrollview (Flutter: Minimum height on horizontal list view) but with a builder method?

灵活

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

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

Notice the added space inside the card when using flexible (this actually renders worse on different devices)

推荐答案

发布OP的答案，他们将答案编辑为问题

通过创建这样的自定义生成器方法解决了该问题:

Solved the problem by creating a custom builder method like so:

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

This creates the necessary scrolling widgets upfront instead of lazily like ListView.builder would.

这篇关于没有明显高度的水平ListView抖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！