ListView Builder 与 SingleChildScrollView + Row 组合

Question

我想在我的应用程序中制作响应式用户界面。在我的主页中，我有

ScrollView->Column->childrens

结构。

当我想在我的

horizontal Listview.builder

中使用

column

时，它会抛出错误，因为高度是

unbounded

。我用容器包裹我的

listview builder

来修复它，并给这个容器一个高度值。但我不想给这个高度硬编码，

我想让我的

container

身高达到自己孩子的身高。我搜索了它并找到了像

ScrollView->Row->list.generate

而不是

ListView.Builder

这样的解决方案。但做成这样就可以了吗？它会导致性能问题还是一种不好的做法？

我的清单并不大。它最多有 20 个元素

例如这个抛出错误：

@override   Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: SingleChildScrollView(
          child: Column(
        children: [
          ListView.builder(
            itemCount: 5,
            physics: NeverScrollableScrollPhysics(),
            scrollDirection: Axis.horizontal,
            shrinkWrap: true,
            itemBuilder: (context, index) {
              return Container(
                width: 200,
                height: 200,
              );
            },
          )
        ],
      )),
    );   }

但这不会引发错误

@override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
        child: Column(
      children: [
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            children: List.generate(
                5,
                (index) => Container(
                      width: 200,
                      height: 200,
                      color: Colors.red,
                    )),
          ),
        ),
      ],
    ));
  }

Answer 1

给大家澄清一下：

ListViews“延迟”生成它们的子视图 - 这意味着它们在显示在屏幕上之前不会被绘制。当然，这意味着他们不知道他们的物品的高度。

例如，如果 ListViews 子级的高度与此列表类似：

呜呜呜

但是屏幕上只显示了这部分：

呜呜 |噢噢

ListView 将其高度设置为适合“o”，那么当它最终出现在屏幕上时，它将无法适合“O”。

---

另一方面，Rows do 在生成时绘制所有子级，这意味着，虽然它们确实知道所有小部件的大小，但它们可能会很快变得非常慢。

我会not建议在具有2位以上子级的行内使用图像，因为它们不仅在初始绘制时可能会滞后，而且当用户在包含所述行的页面中执行其他操作时 - 例如滚动向上/向下翻页。

在测试时，我发现同一堆栈中只有 30 个子级的行（IconImage 顶部的小 AssetImage）在仅向上/向下滚动时会滞后于整个页面 - 甚至不沿行本身滚动。

---

我为您推荐的解决方案 Ahmet，即使您不想硬编码 ListView 的高度，也是使用以下方法来解决和设置 ListView 的高度：

MediaQuery.of(context).size.height * (percentage of screen's height you'd like for the ListView to take)

.

Answer 2

是的，我也遇到了这个问题，我转到了列表生成，因为我也不想提及具体高度，但现在给出它是我唯一的选择