Flutter滑动操作插件perceive_slidable的使用

插件简介

perceive_slidable 是一个用于实现可拖动和滚动的滑动面板的 Flutter 插件。它允许用户通过单个手势进行滑动和滚动操作，并且可以将滑动面板锁定到多个指定的扩展高度。

特性：

• 支持多种滑动模式（永久嵌入或底部弹出对话框）。
• 可自定义滑动面板的高度、样式及交互行为。
• 提供丰富的回调函数，支持动态更新界面。

安装方法

在 pubspec.yaml 文件中添加依赖：

dependencies:
  perceive_slidable: ^0.5.2

然后运行以下命令安装依赖：

flutter packages get

如果您喜欢这个包，别忘了给它一个 GitHub ⭐ 和 pub.dev ❤️！

使用方式

作为永久嵌入的 Widget

示例代码：

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.grey.shade200,
    appBar: AppBar(
      title: Text('简单示例'),
    ),
    body: SlidingSheet(
      elevation: 8, // 阴影深度
      cornerRadius: 16, // 圆角半径
      snapSpec: const SnapSpec( // 滑动锁定配置
        snap: true, // 启用锁定功能
        snappings: [0.4, 0.7, 1.0], // 锁定位置
        positioning: SnapPositioning.relativeToAvailableSpace, // 相对屏幕高度定位
      ),
      body: Center(
        child: Text('此部件位于滑动面板下方'),
      ),
      builder: (context, state) {
        return Container(
          height: 500, // 滑动面板内容高度
          child: Center(
            child: Text('这是滑动面板的内容'),
          ),
        );
      },
    ),
  );
}

结果展示：

作为底部弹出对话框

示例代码：

void showAsBottomSheet() async {
  final result = await showSlidingBottomSheet(
    context,
    builder: (context) {
      return SlidingSheetDialog(
        elevation: 8,
        cornerRadius: 16,
        snapSpec: const SnapSpec(
          snap: true,
          snappings: [0.4, 0.7, 1.0],
          positioning: SnapPositioning.relativeToAvailableSpace,
        ),
        builder: (context, state) {
          return Container(
            height: 400,
            child: Center(
              child: Material(
                child: InkWell(
                  onTap: () => Navigator.pop(context, '这是结果'),
                  child: Padding(
                    padding: const EdgeInsets.all(16),
                    child: Text(
                      '这是滑动面板的内容',
                      style: Theme.of(context).textTheme.body1,
                    ),
                  ),
                ),
              ),
            ),
          );
        },
      );
    }
  );

  print(result); // 打印返回的结果
}

结果展示：

滑动锁定机制

可以通过 SnapSpec 自定义滑动面板的锁定行为。

参数说明：

示例图片：

控制器（SheetController）

SheetController 可以手动控制滑动面板的状态。

常见方法：

头部和尾部

头部和尾部是滑动面板顶部和底部的固定区域，不会随内容滚动。

示例代码：

headerBuilder: (context, state) {
  return Container(
    height: 56,
    width: double.infinity,
    color: Colors.green,
    alignment: Alignment.center,
    child: Text(
      '这是头部',
      style: Theme.of(context).textTheme.body1.copyWith(color: Colors.white),
    ),
  );
},
footerBuilder: (context, state) {
  return Container(
    height: 56,
    width: double.infinity,
    color: Colors.yellow,
    alignment: Alignment.center,
    child: Text(
      '这是尾部',
      style: Theme.of(context).textTheme.body1.copyWith(color: Colors.black),
    ),
  );
},

结果展示：

列表和列布局

当使用 ListView 或 Column 作为滑动面板的子部件时，需要注意设置以下属性：

• 对于 ListView：设置 shrinkWrap: true 和 physics: NeverScrollableScrollPhysics()。
• 对于 Column：设置 mainAxisSize: MainAxisSize.min。

材料设计效果

通过监听滑动状态的变化，可以实现常见的 Material Design 效果，例如：

• 背景阴影变化。
• 面板圆角随高度变化。
• 内容滚动时头部抬升。

示例代码：

SheetListenerBuilder(
  buildWhen: (oldState, newState) => oldState.isAtTop != newState.isAtTop,
  builder: (context, state) {
    return AnimatedContainer(
      elevation: !state.isAtTop ? elevation : 0.0,
      duration: const Duration(milliseconds: 400),
      child: child,
    );
  },
);