Перетаскиваемый и съемный контейнер в флаттере

Question

Я новичок в трепетании и ищу способ реализовать простую функцию. Перетаскиваемый контейнер.

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

Как бы я поступил так?

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

Изображение № 1

Изображение № 2

Как видите, изображения № 1 и № 2 отличаются только в нижней части моего дизайна. Я уже создал все необходимые элементы интерфейса и обернул их в виджет Container. Теперь единственное, что мне нужно, - это возможность переходить из одной группы в другую. Также было бы неплохо, если бы существовал метод обратного вызова, который мог бы обновлять кнопки выше при переходе из одной группы в другую.

Заранее спасибо!

Answer 1

Есть много возможностей для достижения этой цели, в зависимости от ваших точных пожеланий, вот 3 идеи:

1. Используя TabBarView для прокрутки всего экрана, Tab1 будет первым экраном, который выпоказал, и Tab2 будет второй экран - только содержимое.(вы, вероятно, не хотели этого, но просто поместили его туда).

2. Разделение контейнера на 2 части (по вертикали) и размещение TabBarView в нижней части, имеющей 2 вкладки: 1 с сегодняшней частью и одна с еженедельной.(Есть несколько примеров, например: разделить экран на две равные части во флаттере ).

Вы также можете настроить метод сборки, чтобы изменить что-либо(например, верхний индикатор), основанный на текущем индексе вкладки (как задано здесь и получено ответом: Как получить текущий индекс вкладки в Flutter )

Для более индивидуального решения вы можете использовать:

GestureDetector обернут вокруг вашего контейнера и обрабатывает OnHorizontDragX (где X - «Начало», «Конец» и т. Д.) Для выполнения любых пользовательских операций - возможно, изменяя состояние и вызывая перестройку с новым образом