如何在 flutter 的列表视图中嵌套列表视图？

Question

我试图按照下面的代码将 ListView 嵌套在 Listview 中，顶部的 Listview 水平滚动，嵌套的 ListView 垂直滚动。 对于嵌套的 ListView 我面临的错误

视口在横轴上扩展以填充其容器并约束其子级以匹配其在横轴上的范围。 在这种情况下，垂直视口被赋予了无限量的水平空间来扩展。

我应该如何解决它，以便嵌套视图也显示在下面的代码中？

new Container(
        child: new ListView(
          
          scrollDirection: Axis.horizontal,
           children: <Widget>[
            ListView(
              

              scrollDirection:Axis.vertical,
              children: <Widget>[new Container(
                padding: EdgeInsets.fromLTRB(10, 20,10, 0),
                
                width: screenSize.width,
                child: new Column(
                  children: <Widget>[
                    Column(children: <Widget>[
                      Row(children: <Widget>[
                        Text('Text1'),
                        Text('Text1'),
                      ],),
                      Row(children: <Widget>[
                        Text('Text1'),
                        Text('Text1'),
                      ],),

                    ],),
                    
                    new Container(
                     //ERROR POINT
                      child: new ListView(
                        scrollDirection: Axis.vertical,
                        shrinkWrap: true,
                        children: <Widget>[
                          new Container(
                            color: Colors.red,
                            width: screenSize.width,
                             child: new Center(
                              child: new Text(
                                'RED',
                                style: new TextStyle(
                                    fontSize: 40.0,
                                    color: Colors.white
                                ),
                              ),
                            ),
                          ),
                          new Container(
                            color: Colors.blue,
                            width: screenSize.width,
                            child: new Center(
                              child: new Text(
                                'BLUE',
                                style: new TextStyle(
                                    fontSize: 40.0,
                                    color: Colors.white
                                ),
                              ),
                            ),
                          ),
                          new Container(
                            color: Colors.orange,
                            width: screenSize.width,
                            child: new Center(
                              child: new Text(
                                'ORANGE',
                                style: new TextStyle(
                                    fontSize: 40.0,
                                    color: Colors.white
                                ),
                              ),
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),],
            ),
            new Container(
              color: Colors.blue,
              width: screenSize.width,
              child: new Center(
                child: new Text(
                  'BLUE',
                  style: new TextStyle(
                      fontSize: 40.0,
                      color: Colors.white
                  ),
                ),
              ),
            ),
            new Container(
              color: Colors.orange,
              width: screenSize.width,
              child: new Center(
                child: new Text(
                  'ORANGE',
                  style: new TextStyle(
                      fontSize: 40.0,
                      color: Colors.white
                  ),
                ),
              ),
            )
          ],
        ),
      )

Answer 1

不要用空Container包装小部件

对于嵌套的ListView ，您必须通过SizedBox或Container限制其宽度，如下所示：

ListView(
  scrollDirection: Axis.horizontal,
  children: [
    SizedBox(
      child: ListView(
        children: [
          Text('data'),
          Text('data'),
          Text('data'),
        ],
      ),
      width: 300,
    ),
    SizedBox(
      child: ListView(
        children: [
          Text('data'),
          Text('data'),
          Text('data'),
        ],
      ),
      width: 300,
    ),
    SizedBox(
      child: ListView(
        children: [
          Text('data'),
          Text('data'),
          Text('data'),
        ],
      ),
      width: 300,
    ),
  ],
)

如果您想保留所有嵌套滚动视图的位置，您可以将它们包装在带有Row的SingleChildScrollView中，但您的决定似乎不太正确

SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Row(
      children: [
        SizedBox(
          width: 200,
          child: ListView.builder(
            itemBuilder: (context, index) => Text('data $index'),
            itemCount: 200,
          ),
        ),
        SizedBox(
          width: 200,
          child: ListView.builder(
            itemBuilder: (context, index) => Text('data $index'),
            itemCount: 200,
          ),
        ),
        SizedBox(
          width: 300,
          child: ListView.builder(
            itemBuilder: (context, index) => Text('data $index'),
            itemCount: 200,
          ),
        ),
        SizedBox(
          width: 300,
          child: ListView.builder(
            itemBuilder: (context, index) => Text('data $index'),
            itemCount: 200,
          ),
        ),
        SizedBox(
          width: 300,
          child: ListView.builder(itemBuilder: (context, index) => Text('data $index'), itemCount: 200),
        ),
        SizedBox(
          width: 300,
          child: ListView.builder(itemBuilder: (context, index) => Text('data $index'), itemCount: 200),
        ),
      ],
    ),
  )