颤振垂直可滚动抽屉

时间:2020-09-23 13:49:30

标签: flutter flutter-layout flutter-dependencies flutter-animation

我想创建类似this

的内容

我有一个包含产品列表的页面,并且仅当我滚动到屏幕底部并且单击产品并能够向上滑动以导航到时,才希望显示“购物车”部分购物车屏幕。

一个解决方案可能是制作一个Stack,里面有两个Container,并具有一个变量,该变量代表第一个Container(产品)的当前屏幕百分比,并使用小部件{{1}移动它们}。因此,当我滚动到底部时,可以抬起产品容器,并在向上滑动第一个容器时露出购物车容器和相同的东西。

This是带有%和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 ListBottom 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, ); 的可见性设置为false,并将Bottom Cart的可见性设置为true

我也可以将Cart Screen的可见性设置为false,但这会导致滚动动画出现错误,因此我将移动屏幕设置为仅显示Products ListBottom Container屏幕宽度(我没有在其他设备上测试过,这可能是ui上的错误),并且我还在Cart Screen

中使用NeverScrollableScrollPhysics()阻止了滚动

在向下滑动CustomScrollView时,我将Bottom Container的可见性设置为false,将Cart Screen的可见性设置为Bottom Cart物理,将其设置为CustomScrollView滚动动画:

AlwaysScrollableScrollPhysics()

那不是很平滑,因为更好的动画可能是通过_controller.animateTo( _controller.position.maxScrollExtent, duration: Duration(seconds: 1), curve: Curves.fastOutSlowIn, ); 沿Cart Screen向下移动,而不是使其不可见

0 个答案:

没有答案