Flutter 插件 sliding_up_panel 实现从底部滑出的面板

前言

sliding_up_panel 是一个 Flutter 插件，用于实现从底部滑出的面板。它在设计上非常灵活，能够适应多种 UI 场景，比如从底部滑出的菜单、可拖动的弹出面板等。以下是 sliding_up_panel 的详细用法，包括常用的参数说明和示例代码。

请添加图片描述

1. 基础用法

在 pubspec.yaml 中添加依赖：

dependencies:sliding_up_panel: ^2.0.0+1  # 确保版本最新

安装

flutter pub add sliding_up_panel

2. 基本参数说明

参数	说明
`panel`	面板的主体内容，可以是任意 `Widget`。
`collapsed`	面板收起状态下的显示内容。若设置此属性，面板在最小高度时会显示此内容。
`minHeight`	面板的最小高度，默认是 100。
`maxHeight`	面板的最大高度，默认是屏幕高度。
`borderRadius`	面板顶部的圆角设置，通常使用 `BorderRadius.vertical` 来让顶部呈现圆角。
`controller`	`PanelController`，用于控制面板的开关、滚动状态。
`onPanelOpened`	当面板完全打开时触发的回调。
`onPanelClosed`	当面板完全关闭时触发的回调。
`parallaxEnabled`	是否启用视差效果。
`parallaxOffset`	视差偏移，默认 0.1，取值范围 0-1。用于设置背景视差滑动的距离。
`backdropEnabled`	是否在面板打开时显示背景遮罩。
`backdropOpacity`	背景遮罩的不透明度，默认是 0.5。
`snapPoint`	设置面板滚动的吸附点，取值范围 0-1。面板可以在指定比例的高度自动停靠。

3. 使用示例

以下是一个基础的 SlidingUpPanel 示例，其中展示了如何实现基本的拖拽、点击按钮控制面板开关、以及背景遮罩等功能。

import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';class SlidingUpPanelExample extends StatefulWidget {@override_SlidingUpPanelExampleState createState() => _SlidingUpPanelExampleState();
}class _SlidingUpPanelExampleState extends State<SlidingUpPanelExample> {final PanelController _panelController = PanelController();@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('Sliding Up Panel 示例'),),body: Stack(children: [// 主页面内容Center(child: ElevatedButton(onPressed: () {_panelController.isPanelOpen? _panelController.close(): _panelController.open();},child: Text('打开/关闭面板'),),),// 滑动面板SlidingUpPanel(controller: _panelController,minHeight: 100, // 面板最小高度maxHeight: MediaQuery.of(context).size.height * 0.8, // 最大高度为屏幕 80%borderRadius: BorderRadius.vertical(top: Radius.circular(16.0)),parallaxEnabled: true, // 启用视差效果parallaxOffset: 0.2, // 视差偏移量backdropEnabled: true, // 背景遮罩backdropOpacity: 0.5, // 背景遮罩不透明度panel: _buildPanelContent(), // 面板内容collapsed: _buildCollapsedContent(), // 收起时的显示内容onPanelOpened: () => print("面板已打开"),onPanelClosed: () => print("面板已关闭"),),],),);}// 面板展开时的内容Widget _buildPanelContent() {return Column(children: [// 拖拽提示条GestureDetector(onTap: () => _panelController.close(),child: Container(margin: EdgeInsets.symmetric(vertical: 10),height: 5,width: 50,decoration: BoxDecoration(color: Colors.grey[300],borderRadius: BorderRadius.circular(12),),),),Expanded(child: ListView.builder(itemCount: 30,itemBuilder: (context, index) {return ListTile(title: Text('Item $index'),);},),),],);}// 面板收起时的显示内容Widget _buildCollapsedContent() {return Container(decoration: BoxDecoration(color: Colors.blueAccent,borderRadius: BorderRadius.vertical(top: Radius.circular(16.0)),),child: Center(child: Text('向上滑动展开面板',style: TextStyle(color: Colors.white),),),);}
}

功能分析
• 面板展开/收起：点击主页面上的按钮可以控制面板的开关，通过 PanelController 实现。
• 视差效果：设置 parallaxEnabled: true 和 parallaxOffset 后，可以在面板拖动时实现背景内容的轻微移动，增添层次感。
• 背景遮罩：启用 backdropEnabled 后，面板打开时会显示半透明的遮罩层，可以通过 backdropOpacity 调整不透明度。
• 收起和展开状态的不同内容：collapsed 参数指定面板收起时显示的内容，而 panel 参数指定面板完全展开时的内容。