水平 SingleChildScrollView 内的垂直 ListView [英] Vertical ListView inside horizontal SingleChildScrollView

问题描述

我需要构建一个页面，其中包含分组在一行中的对象列表.这需要垂直滚动(以显示更多组)和水平滚动(以显示子组).垂直和水平滚动需要完全移动项目.像这样:https://gph.is/g/46gjW0q

I need to build a page with lists of objects that are grouped in a single line. This needs to be scrolled both vertically (to show more groups) and horizontally (to show groups children). The vertical and horizontal scroll needs to move the items altogether. Something like this: https://gph.is/g/46gjW0q

我正在用这段代码做这个:

I'm doing this with this code:

Widget _buildGroups() {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Container(
        width: 2000,
        child: ListView.builder(
          scrollDirection: Axis.vertical,
          itemCount: boardData.length,
          itemBuilder: (context, index) {
            return Row(children: _buildSingleGroup(index));
          },
        ),
      ),
    );
}

List<Widget> _buildSingleGroup(int groupIndex) {
    return List.generate(...);
}

我需要它是水平动态的，但在这里，如您所见，我需要设置一个宽度，否则会发生错误:

I need this to be horizontally dynamic but here, as you can see, I need to set a width cause otherwise an error occurs:

══════════════════ Exception caught by rendering library ═════════════════════
The following assertion was thrown during performResize()
Vertical viewport was given unbounded width.

Viewports expand in the cross axis to fill their container and constrain their 
children to match their extent in the cross axis. In this case, a vertical 
viewport was given an unlimited amount of horizontal space in which to expand.

我尝试在 ListView 中设置shrinkWrap: true"，但结果又报错:

I tried to set "shrinkWrap: true" in the ListView but the result gives another error:

Failed assertion: line 1629 pos 16: 'constraints.hasBoundedWidth': is not true.

那么如何使用动态 ListView 宽度做到这一点?

So how do you do this with a dynamical ListView width?

推荐答案

发生错误是因为当ListView试图从其父级获取高度以填充整个高度时，父级返回infinity height因为SingleChildScrollView 没有固定的容器高度值.要解决该问题，您需要限制高度值.例如，我使用 SizedBox 来指定 ListView 的高度.

The error happens because when ListView tries to get height from its parent to fill the entire height, the parent returns infinity height because SingleChildScrollView doesn't have fixed container height value. To fix that issue you need to limit the height value. For example, I used SizedBox to specify height for ListView.

以下代码适用于我.

SingleChildScrollView(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      SizedBox(
        height: 120, // <-- you should put some value here
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: items.length,
          itemBuilder: (context, index) {
            return Text('it works');
          },
        ),
      ),
    ],
  ),
);

这篇关于水平 SingleChildScrollView 内的垂直 ListView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！