Flutter滑动面板插件flutter_sliding_panel的使用

flutter_sliding_panel 是一个功能强大且易于使用的Flutter插件，它允许开发者轻松创建具有平滑滑动和智能锚定行为的可滑动面板。本文将介绍如何在Flutter项目中使用该插件，并提供完整的示例代码。

添加依赖

首先，在你的 pubspec.yaml 文件中添加 flutter_sliding_panel 依赖：

dependencies:
  flutter_sliding_panel: ^latest_version

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

dart pub add flutter_sliding_panel

导入包

在需要使用 flutter_sliding_panel 的文件中导入该包：

import 'package:flutter_sliding_panel/flutter_sliding_panel.dart';

示例Demo

基本示例：非滚动内容的滑动面板

这是一个最基本的滑动面板示例，展示了如何创建一个简单的滑动面板：

SlidingPanel(
  controller: SlidingPanelController(),
  config: SlidingPanelConfig(
    anchorPosition: MediaQuery.of(context).size.height / 2,
    expandPosition: MediaQuery.of(context).size.height - 200,
  ),
  panelContent: Text(
    '\nDRAG ME!',
    textAlign: TextAlign.center,
    style: TextStyle(
      fontSize: 40,
      letterSpacing: -1,
      fontWeight: FontWeight.bold,
      fontStyle: FontStyle.italic,
      color: Theme.of(context).colorScheme.onSurface,
    ),
  ),
);

滚动内容的滑动面板

当面板内容为可滚动的内容时，可以使用 SlidingPanel.scrollableContent() 方法：

SlidingPanel.scrollableContent(
  controller: SlidingPanelController(),
  config: SlidingPanelConfig(
    anchorPosition: MediaQuery.of(context).size.height / 2,
    expandPosition: MediaQuery.of(context).size.height - 200,
  ),
  panelContentBuilder: (controller, physics) => ListView.builder(
    controller: controller,
    physics: physics,
    itemBuilder: (context, index) => Container(
      height: 50,
      alignment: Alignment.center,
      child: Text('$index'),
    ),
  ),
);

多个滚动内容的滑动面板

如果需要在面板中包含多个滚动视图，可以使用 SlidingPanel.multiScrollableContent() 方法：

SlidingPanel.multiScrollableContent(
  controller: SlidingPanelController(),
  scrollableChildCount: 2,
  config: SlidingPanelConfig(
    anchorPosition: MediaQuery.of(context).size.height / 2,
    expandPosition: MediaQuery.of(context).size.height - 200,
  ),
  panelContentBuilder: (controller, physics) => TabBarView(
    controller: tabController,
    children: List.generate(
      2,
      (index) => MultiScrollableChildTab(
        controller: controller[index],
        physics: physics[index],
        tabIndex: index,
      ),
    ),
  ),
);

显示刷新指示器

为了在面板过度滚动时显示刷新指示器，可以传递 SlidingPanelRefresherConfig 到 dragToRefreshConfig 参数：

SlidingPanel(
  controller: SlidingPanelController(),
  config: SlidingPanelConfig(
    anchorPosition: MediaQuery.of(context).size.height / 2,
    expandPosition: MediaQuery.of(context).size.height - 200,
  ),
  dragToRefreshConfig: SlidingPanelRefresherConfig(
    onRefresh: () async {
      // 实现刷新逻辑
      await Future.delayed(const Duration(milliseconds: 1500), () {});
    },
  ),
  panelContent: Text(
    '\nDRAG ME!',
    textAlign: TextAlign.center,
    style: TextStyle(
      fontSize: 40,
      letterSpacing: -1,
      fontWeight: FontWeight.bold,
      fontStyle: FontStyle.italic,
      color: Theme.of(context).colorScheme.onSurface,
    ),
  ),
);

完整示例代码

下面是一个完整的示例代码，包含了基本的滑动面板、带有滚动内容的滑动面板以及带有多个滚动内容的滑动面板：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Sliding Panel Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final controller = SlidingPanelController();
  int slidingPanelTypeChoice = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Sliding Panel')),
      floatingActionButton: FloatingActionButton(
        child: ValueListenableBuilder<SlidingPanelDetail>(
          valueListenable: controller,
          builder: (_, detail, __) {
            return Icon(
              detail.status == SlidingPanelStatus.anchored
                  ? Icons.keyboard_arrow_up_rounded
                  : Icons.keyboard_arrow_down_rounded,
            );
          },
        ),
        onPressed: () {
          if (controller.status == SlidingPanelStatus.anchored) {
            controller.expand();
          } else {
            controller.anchor();
          }
        },
      ),
      body: _slidingPanelWidget(
        ListView.builder(
          itemCount: 3,
          padding: const EdgeInsets.all(20),
          itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.only(bottom: 8),
            child: ElevatedButton(
              onPressed: () => setState(() => slidingPanelTypeChoice = index),
              child: Text(_getTypeFromIndex(index)),
            ),
          ),
        ),
      ),
    );
  }

  String _getTypeFromIndex(int index) {
    switch (index) {
      case 0:
        return 'Non-Scrollable';
      case 1:
        return 'Scrollable';
      case 2:
        return 'Multi Scrollable';
      default:
        return '';
    }
  }

  Widget _slidingPanelWidget(Widget body) {
    switch (slidingPanelTypeChoice) {
      case 0:
        return SlidingPanelExample(controller: controller, body: body);
      case 1:
        return ScrollableContentSlidingPanelExample(controller: controller, body: body);
      case 2:
        return MultiScrollableContentSlidingPanelExample(controller: controller, body: body);
      default:
        return const SizedBox();
    }
  }
}

// 其他类定义（如SlidingPanelExample, ScrollableContentSlidingPanelExample等）请参考上面的示例代码。