Flutter 底部容器向上滑动
Flutter Bottom Container Swipe Up
我正在制作一个应用程序,当在 Google 地图上单击某个地点时,它会显示地点详细信息。我可以在页面底部打开一个容器,但我想这样做,当用户将这个容器向上滑动并带有动画时,该容器将覆盖整个页面,我将获得有关该位置的额外信息并向用户展示。
我如何使用 Flutter 做到这一点?
我想 DragableScrollableSheet
符合您的需要。文档中有很好的解释here。
您可以使用DraggableScrollableSheet
此处提供文档和视频教程:
https://api.flutter.dev/flutter/widgets/DraggableScrollableSheet-class.html
您可以尝试使用这里的包:
https://pub.dev/packages/sliding_up_panel
但是,如果这不能满足您的要求,请尝试以下方法:使用 GestureDetector 和 AnimatedController 包裹您的 Widget:
double containerHeight = 0;
GestureDetector(
onVerticalDragEnd: (dragUpdateDetails) {
setState(){
containerHeight = //device height or use MediaQuery.of(context).size.height//
}
},
child: AnimatedContainer(
duration: Duration(milliseconds: //how long should it take//),
height: containerHeight,
child: //whatever you want//
)
),
AnimatedController 在属性更改之间自动设置动画。但是,您可能想尝试将 onVertivalDragEnd 更改为 onVerticalDragUpdate 之类的其他内容,以完全满足您的愿望。如果您希望全屏显示该行为,请使用 GestureDetector 包装您的第一个 return 小部件。
我正在制作一个应用程序,当在 Google 地图上单击某个地点时,它会显示地点详细信息。我可以在页面底部打开一个容器,但我想这样做,当用户将这个容器向上滑动并带有动画时,该容器将覆盖整个页面,我将获得有关该位置的额外信息并向用户展示。 我如何使用 Flutter 做到这一点?
我想 DragableScrollableSheet
符合您的需要。文档中有很好的解释here。
您可以使用DraggableScrollableSheet
此处提供文档和视频教程: https://api.flutter.dev/flutter/widgets/DraggableScrollableSheet-class.html
您可以尝试使用这里的包:
https://pub.dev/packages/sliding_up_panel
但是,如果这不能满足您的要求,请尝试以下方法:使用 GestureDetector 和 AnimatedController 包裹您的 Widget:
double containerHeight = 0;
GestureDetector(
onVerticalDragEnd: (dragUpdateDetails) {
setState(){
containerHeight = //device height or use MediaQuery.of(context).size.height//
}
},
child: AnimatedContainer(
duration: Duration(milliseconds: //how long should it take//),
height: containerHeight,
child: //whatever you want//
)
),
AnimatedController 在属性更改之间自动设置动画。但是,您可能想尝试将 onVertivalDragEnd 更改为 onVerticalDragUpdate 之类的其他内容,以完全满足您的愿望。如果您希望全屏显示该行为,请使用 GestureDetector 包装您的第一个 return 小部件。