我想创建类似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 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,
);
的可见性设置为false,并将Bottom Cart
的可见性设置为true
我也可以将Cart Screen
的可见性设置为false,但这会导致滚动动画出现错误,因此我将移动屏幕设置为仅显示Products List
和Bottom 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
向下移动,而不是使其不可见