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

如果要保留所有嵌套的滚动视图位置，可以将它们与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),
        ),
      ],
    ),
  )

如何将列表视图嵌套在列表视图中？

1 个答案: