Flutter создает бесконечный экран

Я представляю себе новый тип экрана, и я хотел бы сделать это с помощью Flutter, поскольку он очень эффективен для быстрого и плавного рендеринга.

Я хочу создать своего рода бесконечный экран с квадратом или зоной, в которую можно войти. Фактически в точности как карта (на самом деле не бесконечная, но очень большая), но где я могу:

  • Перетащи и переведи
  • Увеличивать и уменьшать масштаб
  • Щелкните и нажмите на другой компонент экрана (квадрат или что-то еще)

Я представляю, как использовать GestureDetector на моей «карте» виджетов в сочетании с transform на каждом компоненте insde и обновлять экран после каждого движения или перерисовывать каждый компонент с помощью draw, но я не уверен, что это лучший способ следовать этому.

Спасибо за помощь, если у вас есть идеи !!


flutter flutter-layout
person Ferdi    schedule 19.06.2018    source источник
comment
Вероятно, лучше использовать OverflowBox. Вероятно, поиграйте с offset.padding всего, что находится в этом поле, и используйте какой-то GridView для перемещения и рендеринга новых плиток по мере продвижения. Это примерно соответствует аналогии с картой.   -  person Charles Crete    schedule 08.08.2018

Ответы (2)


arrow_upward
2
arrow_downward

Я реализовал часть того, о чем вы просили, кроме «бесконечной карты». Код довольно объемный, поэтому я описал этот материал в статья на Medium. Это позволяет:

  • переместить карту перетаскиванием
  • размещать новые объекты на карте
  • увеличить / уменьшить
  • щелкните объекты

репозиторий GitHub.

person Alexander Arendar    schedule 02.07.2019

arrow_upward
1
arrow_downward

Интересное предложение. В конце концов, у меня нет реализации, это зависит от вас, но у меня есть несколько указателей.

Я полагаю, что с переводом легко справиться двумя вложенными ListView. Один, который прокручивает X, и другой, который прокручивается в направлении Y. ScrollController может быть запросом на получение любой информации.

Масштабирование также довольно просто при первом нажатии: вы можете обернуть весь экран Transform.scale() виджетом.

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

Примечание: в играх существует такое понятие, как расстояние отсечения. Разобраться, как это реализовать во Flutter, будет интересной задачей. Это позволяет вам не отображать те виджеты, которые слишком малы, например, вы сильно уменьшили масштаб. Сообщите мне, как это происходит! Любопытный.

person Daniel V.    schedule 28.06.2019