一个可以通过 Flutter 拖动和滚动的窗口小部件

滑动表格

一个可以通过单个手势进行拖动和滚动并吸附到一系列范围的窗口小部件。

点击此处查看完整示例。

安装

将其添加到您的pubspec.yaml文件中

dependencies:
  sliding_sheet: ^0.3.7

从命令行安装软件包

flutter packages get

如果您喜欢此软件包，请考虑在GitHub上为其点赞，并在pub.dev上为其点赞 :heart

用法

您可以通过两种方式使用 SlidingSheet：将其作为永久（或持久）Widget 放置在您的
小部件树中，或作为 BottomSheetDialog 使用。

作为小部件

此方法可用于将 SlidingSheet 永久显示（通常在您的其他小部件之上），如示例所示。

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.grey.shade200,
    appBar: AppBar(
      title: Text('Simple Example'),
    ),
    body: SlidingSheet(
      elevation: 8,
      cornerRadius: 16,
      snapSpec: const SnapSpec(
        // Enable snapping. This is true by default.
        snap: true,
        // Set custom snapping points.
        snappings: [0.4, 0.7, 1.0],
        // Define to what the snappings relate to. In this case, 
        // the total available space that the sheet can expand to.
        positioning: SnapPositioning.relativeToAvailableSpace,
      ),
      // The body widget will be displayed under the SlidingSheet
      // and a parallax effect can be applied to it.
      body: Center(
        child: Text('This widget is below the SlidingSheet'),
      ),
      builder: (context, state) {
        // This is the content of the sheet that will get
        // scrolled, if the content is bigger than the available
        // height of the sheet.
        return Container(
          height: 500,
          child: Center(
            child: Text('This is the content of the sheet'),
          ),
        );
      },
    ),
  );
}

结果

作为BottomSheetDialog

此方法可通过调用 showSlidingBottomSheet 函数并返回 SlidingSheetDialog 的实例来将 SlidingSheet 显示为 BottomSheetDialog。

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, 'This is the result.'),
                  child: Padding(
                    padding: const EdgeInsets.all(16),
                    child: Text(
                      'This is the content of the sheet',
                      style: Theme.of(context).textTheme.body1,
                    ),
                  ),
                ),
              ),
            ),
          );
        },
      );
    }
  );

  print(result); // This is the result.
}

结果

吸附

SlidingSheet 可以吸附到多个高度，或者根本不吸附。您可以通过
将 SnapSpec 的实例传递给 SlidingSheet 来自定义吸附行为。

还有一些预制的吸附方式，您可以使用它们来吸附，例如标题或页脚，如示例所示。

SheetController

SheetController 可用于手动更改 SlidingSheet 的状态，只需将 SheetController 的实例传递给 SlidingSheet 即可。请注意，这些方法只能在 SlidingSheet 渲染后使用，但提前调用它们不会抛出异常。

请注意，您还可以使用静态 SheetController.of(context) 方法来获取最近的 SlidingSheet 的 SheetController 实例。即使您没有在 SlidingSheet 上显式分配 SheetController，此方法也有效。

标题和页脚

标题和页脚是 SlidingSheet 的 UI 元素，它们将分别显示在 SlidingSheet 的顶部或底部，并且不会滚动。然后，可滚动内容将位于标题和页脚之间（如果指定）。触摸事件委托给 SlidingSheet 已为您完成。示例

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.grey.shade200,
    appBar: AppBar(
      title: Text('Simple Example'),
    ),
    body: Stack(
      children: <Widget>[
        SlidingSheet(
          elevation: 8,
          cornerRadius: 16,
          snapSpec: const SnapSpec(
            snap: true,
            snappings: [112, 400, double.infinity],
            positioning: SnapPositioning.pixelOffset,
          ),
          builder: (context, state) {
            return Container(
              height: 500,
              child: Center(
                child: Text(
                  'This is the content of the sheet',
                  style: Theme.of(context).textTheme.body1,
                ),
              ),
            );
          },
          headerBuilder: (context, state) {
            return Container(
              height: 56,
              width: double.infinity,
              color: Colors.green,
              alignment: Alignment.center,
              child: Text(
                'This is the header',
                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(
                'This is the footer',
                style: Theme.of(context).textTheme.body1.copyWith(color: Colors.black),
              ),
            );
          },
        ),
      ],
    ),
  );
}

结果

ListViews 和 Columns

不允许 SlidingSheet 的子项具有无限（无边界）高度。因此，在使用 ListView 时，请确保将 shrinkWrap 设置为 true，并将 physics 设置为 NeverScrollableScrollPhysics。类似地，当使用 Column 作为 SlidingSheet 的子项时，请确保将 mainAxisSize 设置为 MainAxisSize.min。

反映变化

为了提高性能，SlidingSheet 的子项在滑动或滚动时不会重建。但是，您可以将回调函数传递给 SlidingSheet 的 listener 参数，该函数会在 SlidingSheet 滑动或滚动时使用当前的 SheetState 调用。然后，您可以通过调用 setState(() {})、(SheetController的实例).rebuild() 或通过其他状态管理解决方案来重建 UI 以重建表单。当使用 SlidingSheet 作为 bottomSheetDialog 时，您还可以使用 (SheetController的实例).rebuild() 来重建表单。

例如，当 SlidingSheet 向顶部拖动时，它会减小其圆角半径，并通过状态栏高度增加标题的顶部填充。由于这在 Material Bottom Sheets 中是很常见的行为，SlidingSheet 支持开箱即用，可以通过将 addTopViewPaddingOnFullscreen 参数设置为 true 并将 cornerRadiusOnFullscreen 设置为 0 来实现。

GitHub

https://github.com/bnxm/sliding_sheet