Автоматическое изменение размера изображений по размеру страницы и создание новых страниц

#flutter #dart

#трепетать #дротик

Вопрос:

У меня есть список из 12 изображений, которые я хотел бы отобразить на экране, однако я хотел бы ограничить количество изображений, которые могут поместиться на экране, 9, при этом пользователю нужно провести пальцем влево, чтобы увидеть оставшиеся 3 изображения.

В настоящее время я его жестко закодировал, но я хотел бы знать, есть ли способ написать его таким образом, чтобы максимум 9 изображений автоматически меняли размер, чтобы поместиться на странице, а будущие изображения отображались на следующем экране, на который пользователь может провести пальцем.

например, в будущем, если у меня будет 25 изображений, первые 9 поместятся на первом экране, пользователь может провести пальцем по второму экрану, чтобы увидеть следующие 9, и пользователь может снова провести пальцем, чтобы увидеть последние 7 — без жесткого кодирования 9, 9, 7 на экран соответственно.

Ответ №1:

Вы можете определить экран, на котором отображается список отображаемых изображений и начальный номер в этом списке.

Изображения могут отображаться с помощью виджета GridView.

Итак, для вашего примера из 25 изображений:

ShowImagesScreen([изображение 1, изображение 2 … image25], 0) отобразит экран с первыми 9 изображениями, 0 указывает, что экраны начинаются с первого изображения (индекс 0 в списке). Пролистывание этой страницы приведет к переходу на следующий экран. Который является одним и тем же виджетом экрана:

ShowImagesScreen([изображение 1, изображение 2 … изображение 25], 9) на этот раз показано изображение с 9 по 18. Проводя пальцем по этому экрану, можно перейти на предыдущую страницу или на следующую:

ShowImagesScreen([изображение 1, изображение 2 … изображение 25], 18)

На экране вы делаете логику, чтобы отключить прокрутку назад или вперед, когда это первая или последняя страница соответственно. Вам также необходимо проверить длину списка на каждой странице и проверить, находитесь ли вы в конце.

Комментарии:

1. Это сработало для меня, спасибо!