如何在 flutter 的 listview 中嵌套 listview？

Question

我正在尝试按照以下代码将 ListView 嵌套在 Listview 中，顶部的 Listview 是水平滚动的，而嵌套的 ListView 是垂直滚动的。对于嵌套的 ListView 我面临

的错误

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.

如何解决才能让嵌套视图也显示在下面的代码中？

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,
    ),
  ],
)

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

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),
        ),
      ],
    ),
  )

如何在 flutter 的 listview 中嵌套 listview？

How to nest listview in listview in flutter?

listview

flutter

flutter-listview