如何在Flutter中实现自定义形状与动画效果的bottom sheet

现成第三方包方案 #

不同开发栈下都有成熟的开箱即用组件可以直接实现对应效果：

• Flutter开发：直接使用sliding_up_panel包，支持自定义顶部Shape、多状态停靠、拖拽进度回调，你要的滑动时形状联动效果可以直接通过监听拖拽进度动态修改Shape参数实现
• Android原生开发：官方Material Design组件库的ModalBottomSheet已经支持自定义形状配置，搭配ShapeAppearanceModel可以快速实现顶部圆弧切口效果，配合Transition动画即可实现滑动时的形状变化效果
• iOS原生开发：使用系统自带的UISheetPresentationController，配合自定义CALayer绘制顶部形状，监听sheet的展示进度实时更新形状路径即可

手动实现核心步骤 #

如果不想引入第三方依赖，可以按照下面的逻辑自行实现：

1. 自定义形状绘制

首先基于你要的效果定义形状路径：不管是哪个端，都可以通过路径绘制API实现顶部带圆弧的形状，将形状的圆弧曲率和底部sheet的展开进度做绑定，展开过程中动态调整圆弧大小，再重绘形状即可实现动效

2. 拖拽与动画联动

绑定拖拽手势监听器，将拖拽偏移量换算为0-1的动画进度，将进度和三个核心效果做联动：

• 底部sheet的整体高度变化
• 顶部形状的圆弧曲率变化
• sheet内部内容的位移、透明度渐变
  可以使用系统自带的动画插值器优化过渡效果，避免拖拽过程出现生硬跳变

3. 交互细节优化

• 配置多停靠状态：根据需求设置收起、半展开、全展开三个锚点，松手时根据拖拽速度和偏移量自动吸附到最近的锚点位置
• 处理滑动冲突：如果sheet内部嵌套了可滚动组件，需要做好手势分发判断，仅当内部内容滚动到顶部时才触发sheet的整体下滑收起逻辑

内容的提问来源于stack exchange，提问作者RoyalCoder