Ошибка отображения списка под контейнером - PullRequest
Новая
       0

Ошибка отображения списка под контейнером

0 голосов
/ 19 июня 2020

enter image description here

Я пытаюсь отобразить Listview с помощью построителя Listview под контейнером фиолетового цвета (как показано на изображении) с помощью следующего кода: 

return Scaffold(
      body: Column(
        children: <Widget>[
            Container(
            height: 300,
            decoration: BoxDecoration(
              color: Colors.deepPurple,
              borderRadius: BorderRadius.only(bottomLeft: Radius.circular(75.0)),
              ),
            child: Column(
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.fromLTRB(0, 10, 200, 0),
                  child: Container(
                    padding: EdgeInsets.fromLTRB(0, 30,200,0),
                    child: IconButton(icon: Icon(Icons.arrow_back,),
                      color: Colors.black,
                      onPressed: () {
                        Navigator.pop(context);
                      },
                    ),
                  ),
                ),
                SizedBox(height: 20,),
                Text('Semester 1',
                  style: TextStyle(color: Colors.white,
                      fontSize: 30),
                )
              ],

            )
            ),
            Container(
              child: ListView.builder(
            itemCount: 1,
            itemBuilder: (BuildContext context, int index) {
              return new Container(
                  child: new Center(
                      child: new Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  new Card(
                      child: new Container(
                    child: new Text("hello"),
                    padding: const EdgeInsets.all(20),
                  ))
                ],
              )));
            }),
            )

        ], 
              ),

        );

Он возвращает пустой экран после выполнения кода, не показывая никаких ошибок. Я не могу разобраться в проблеме.

Пожалуйста, помогите!

Ответы [ 3 ]

1 голос
/ 19 июня 2020

Если вы используете маленький список и внутри столбца, вы должны добавить shrinkWrap: true в ListView 

   Column(
      children: <Widget>[
        ListView(
          shrinkWrap: true, // use it
        )
      ],
    )

Или, если ваша высота ListView исправлена, используйте 

Column(
  children: <Widget>[
    SizedBox(
      height: 200, // constrain height
      child: ListView(),
    )
  ],
)

или Если вы хотите заполнить все оставшееся пространство, используйте 

Column(
  children: <Widget>[
    Expanded(
      child: ListView(...),
    )
  ],
)
0 голосов
/ 19 июня 2020

Ошибка вызвана Контейнером, который обертывает ListView. Вам необходимо указать границы для этого контейнера. 

return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            height: 300,
            decoration: BoxDecoration(
              color: Colors.deepPurple,
              borderRadius:
                  BorderRadius.only(bottomLeft: Radius.circular(75.0)),
            ),
            child: Column(
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.fromLTRB(0, 10, 200, 0),
                  child: Container(
                    padding: EdgeInsets.fromLTRB(0, 30, 200, 0),
                    child: IconButton(
                      icon: Icon(
                        Icons.arrow_back,
                      ),
                      color: Colors.black,
                      onPressed: () {
                        Navigator.pop(context);
                      },
                    ),
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
                Text(
                  'Semester 1',
                  style: TextStyle(color: Colors.white, fontSize: 30),
                )
              ],
            ),
          ),
          Container(
            height: 300,
            child: ListView.builder(
                itemCount: 1,
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                      child: Center(
                          child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Card(
                          child: Container(
                        child: Text("hello"),
                        padding: const EdgeInsets.all(20),
                      ))
                    ],
                  )));
                }),
          )
        ],
      ),

Приведенный выше код должен работать. Обратите внимание, что вам не нужно указывать ключевое слово "новое" во флаттере.

0 голосов
/ 19 июня 2020

Просто оберните ListView в Expanded. Ошибка здесь в том, что ListView не знает, как измерить себя (он имеет неограниченную высоту от Column). Использование Expanded укажет ему заполнить все оставшееся пространство и устранить проблему с размером 

    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
              height: 300,
              decoration: BoxDecoration(
                color: Colors.deepPurple,
                borderRadius: BorderRadius.only(bottomLeft: Radius.circular(75.0)),
              ),
              child: Column(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.fromLTRB(0, 10, 200, 0),
                    child: Container(
                      padding: EdgeInsets.fromLTRB(0, 30,200,0),
                      child: IconButton(icon: Icon(Icons.arrow_back,),
                        color: Colors.black,
                        onPressed: () {
                          Navigator.pop(context);
                        },
                      ),
                    ),
                  ),
                  SizedBox(height: 20,),
                  Text('Semester 1',
                    style: TextStyle(color: Colors.white,
                        fontSize: 30),
                  )
                ],

              )
          ),
          Container(
            child: Expanded( // <-- wrap with expanded
              child: ListView.builder(
                  itemCount: 1,
                  itemBuilder: (BuildContext context, int index) {
                    return new Container(
                        child: new Center(
                            child: new Column(
                              crossAxisAlignment: CrossAxisAlignment.stretch,
                              children: <Widget>[
                                new Card(
                                    child: new Container(
                                      child: new Text("hello"),
                                      padding: const EdgeInsets.all(20),
                                    ))
                              ],
                            )));
                  }),
            ),
          )

        ],
      ),

    );
...