Блог

Я хотел бы создать что-то вроде этого

У меня есть страница со списком товаров, и я хотел бы сделать видимой часть «Корзины» только при прокрутке до нижней части экрана и при нажатии на продукт и возможности прокрутки вверх для перехода к экрану корзины.

Решением может быть создание a Stack с двумя Container внутри и иметь переменную, которая представляет текущий% экрана первого контейнера (продуктов) и перемещает их с помощью виджета Positioned . Поэтому, когда я прокручиваю до самого низа, я могу поднять контейнер с продуктом и открыть контейнер с корзиной, и то же самое, когда я проведу пальцем вверх по первому контейнеру.

Это пример вертикального ящика с% и Positioned

Есть ли лучшее решение?

Редактировать

Я сделал это, но это не очень гладко

Структура:

 CustomScrollView()
|
|____SliverList()
|    |
|    |____Visibility() => Container() //Products list
|    |
|    |____Visibility() => Container() //Bottom Container with Borders
|
|____SliverList()
     |
     |____Visibility() => Container() //Bottom Cart part
     |
     |____Visibility() => Container() //Cart Screen
  

Начиная с только Products List видимого

Когда пользователь нажимает на продукт, Bottom Container и Bottom Cart будет виден

Я также вставил GestureDetector() Bottom Container и Bottom Cart .

С onVerticalDragUpdate помощью, если пользователь проводит пальцем вверх (details.delta.dy < 0) :

 _controller.animateTo(
                                             
    _controller.position.maxScrollExtent,
    duration: Duration(seconds: 1),
    curve: Curves.fastOutSlowIn,
);
  

И установите видимость Bottom Cart в false и установите Cart Screen видимость в true

Кроме того, я могу установить видимость Products List на false, но это приведет к ошибке в анимации прокрутки, поэтому я настроил отображение экрана мобильного устройства только Bottom Container Cart Screen с шириной экрана (я не тестировал его на других устройствах, это может быть ошибкой в пользовательском интерфейсе), а также блокирую прокруткус NeverScrollableScrollPhysics() помощью CustomScrollView

При пролистывании вниз Bottom Container я установил видимость Cart Screen в false, Bottom Cart в true и установил CustomScrollView физику AlwaysScrollableScrollPhysics() и сделал анимацию прокрутки:

 _controller.animateTo(
                                             
    _controller.position.maxScrollExtent,
    duration: Duration(seconds: 1),
    curve: Curves.fastOutSlowIn,
);
  

Это не очень гладко, потому что лучшей анимацией может быть перемещение вниз по Cart Screen с Positioned , вместо того, чтобы делать его невидимым