Flutter持久顶部弹窗插件 persistent_top_sheet 的使用

概述

persistent_top_sheet 是一个用于在 Flutter 应用中添加可自定义的顶部弹窗的插件。该插件允许用户通过手势或控制器控制弹窗的打开、关闭和拖动操作，并且提供了平滑的动画效果。

特性

• 完全可自定义的顶部弹窗，适用于各种使用场景。
• 提供平滑的打开、关闭和拖动交互动画。

快速开始

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 persistent_top_sheet 包：

dependencies:
  persistent_top_sheet: ^latest_version

然后运行以下命令来获取包：

flutter pub get

2. 导入包

在 Dart 文件中导入该包：

import 'package:persistent_top_sheet/persistent_top_sheet.dart';

使用方法

创建控制器

你可以创建一个 PersistentTopSheetController 来控制弹窗的打开、关闭和切换状态：

final controller = PersistentTopSheetController();

使用 PersistentTopSheet

接下来，使用 PersistentTopSheet 组件来创建顶部弹窗：

PersistentTopSheet(
    maxHeight: 500, // 最大高度
    minHeight: 50,  // 最小高度
    controller: controller, // 控制器
    childBuilder: (currentHeight) => SheetBody(currentHeight: currentHeight), // 弹窗内容构建器
    handleBuilder: (currentHeight) => const DragHandle(), // 拖动手柄构建器
    onStateChanged: (state) => debugPrint('isOpen: $state'), // 状态变化回调
);

示例代码

下面是一个完整的示例代码，展示了如何在应用中使用 persistent_top_sheet 插件：

import 'package:flutter/material.dart';
import 'package:persistent_top_sheet/persistent_top_sheet.dart';

void main() {
  runApp(MainApp());
}

class MainApp extends StatelessWidget {
  final controller = PersistentTopSheetController();

  MainApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.grey,
        appBar: AppBar(
          title: const Text('Persistent Top Sheet Example'),
          backgroundColor: Colors.blue,
        ),
        body: Stack(
          children: [
            LayoutBuilder(builder: (context, constraints) {
              return PersistentTopSheet(
                maxHeight: constraints.maxHeight - 48,
                minHeight: 50,
                controller: controller,
                childBuilder: (currentHeight) =>
                    SheetBody(currentHeight: currentHeight),
                handleBuilder: (currentHeight) => const DragHandle(),
                onStateChanged: (state) => debugPrint('isOpen: $state'),
              );
            }),
            Center(
              child: ElevatedButton(
                onPressed: controller.toggle, // 切换打开/关闭
                child: const Text('Toggle open/close'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class SheetBody extends StatelessWidget {
  const SheetBody({
    super.key,
    required this.currentHeight,
  });

  final double currentHeight;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      color: Colors.amber,
      child: Padding(
        padding: const EdgeInsets.only(top: 8),
        child: Align(
          alignment: Alignment.topCenter,
          child: Text('height: ${currentHeight.round()}'),
        ),
      ),
    );
  }
}

class DragHandle extends StatelessWidget {
  const DragHandle({
    super.key,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MouseRegion(
      child: Container(
        height: kMinInteractiveDimension,
        decoration: BoxDecoration(
          color: Theme.of(context).colorScheme.surface,
          borderRadius: const BorderRadius.vertical(bottom: Radius.circular(24)),
        ),
        child: Center(
          child: Container(
            height: 4,
            width: 32,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(2),
              color: Theme.of(context).dividerColor,
            ),
          ),
        ),
      ),
    );
  }
}