Ограничение ширины переполнения по горизонтали ListView.builder при прокрутке

#dart #flutter #flutter-layout

#dart #трепетание #flutter-макет

Вопрос:

Я пытаюсь использовать ListView.builder для отображения горизонтального списка в стеке, но сталкиваюсь с этой странной ошибкой при прокрутке ListView, если я установил itemCount: 10 . Если я настрою itemCount: 20 прокрутку ListView как обычную.

Я тестировал в эмуляторе (Galaxy Nexus 720×1280 android 5.0) и на реальном устройстве (Nokia 7 plus, Android 9.0). Как я могу это исправить?

 class BugPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: <Widget>[
            Positioned(
              left: 20.0,
              right: 20.0,
              height: 60.0,
              bottom: 70.0,
              child: Row(
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Expanded(
                    child: ListView.builder(
                      scrollDirection: Axis.horizontal,
                      itemCount: 10, // Overflow when scroll.
                      itemBuilder: (BuildContext context, int index) {
                        return Padding(
                          padding: const EdgeInsets.symmetric(
                            horizontal: 3.0,
                          ),
                          child: Container(
                            width: 40.0,
                            height: 40.0,
                            color: Colors.red,
                            child: Center(child: Text("$index")),
                          ),
                        );
                      },
                    ),
                  ),
                  SizedBox(width: 10.0),
                  FloatingActionButton(
                    backgroundColor: Colors.blue,
                    onPressed: () {},
                    child: new Icon(
                      Icons.add,
                      color: Colors.black,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Ожидаемый результат:

Полоса

Фактический результат:

И видео о проблеме

1. можете ли вы добавить журналы ошибок? У меня нет никаких проблем с этим кодом

2. В журнале консоли @AmolG не отображается никаких ошибок, только ограничение максимальной ширины переполнения пользовательского интерфейса listview при прокрутке в моем эмуляторе. Пожалуйста, посмотрите новое видео , которое я загрузил, для получения дополнительной информации.

3. Единственное изменение, которое вы вносите для перехода от изображения 1 к изображению 2, это itemCount: 10 itemCount: 20 ? Есть ли какие-либо другие изменения между двумя кодами?

4. я попробовал ваш код, он не показывает переполнение, с 10 или 20, не могли бы вы показать, как вы вызываете BugPage

5. Попробуйте изменить на гибкий вместо расширенного

Ответ №1:

Я попробовал ваш код и тоже без проблем запускался с большим количеством элементов, но у меня есть совет, измените

SizedBox(width: 10.0)

для заполнения вокруг кнопки

 Padding(
  padding: const EdgeInsets.only(left: 10),
  child: FloatingActionButton(
    backgroundColor: Colors.blue,
    onPressed: () {},
    child: new Icon(
      Icons.add,
      color: Colors.black,
    ),
  )
)

Ответ №2:

Похоже, что эта ошибка появляется в старой версии flutter после обновления до новейшей версии, все в порядке.