Как вложить listview в listview во флаттере?

Я пытаюсь вложить 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
                  ),
                ),
              ),
            )
          ],
        ),
      )

flutter listview flutter-listview
person Community    schedule 30.07.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

НЕ оборачивайте виджеты пустым 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),
        ),
      ],
    ),
  )
person Andrey Gritsay    schedule 30.07.2020
comment
Спасибо Андрею за руководство. Еще одна проблема, с которой я сталкиваюсь, заключается в том, что, когда я прокручиваю список, он не удерживает эту позицию и откатывается обратно в верхнюю часть списка, как мне решить эту проблему? - person ; 31.07.2020
comment
Вы уверены, что хотите использовать такую ​​странную конструкцию? - person Andrey Gritsay; 31.07.2020