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

news2024/11/6 21:04:51

前言

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();

  @override
  Widget 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 参数指定面板完全展开时的内容。