可拖拽的首页

一个可拖动的 Flutter 小部件，可以更轻松地实现滑动和完全可拉伸！基于 Scaffold 和 Sliver。

Example Example Example

用法

请务必查看 示例 以获取更多详细信息。

安装

将以下行添加到pubspec.yaml

dependencies:
  draggable_home: ^1.0.2

基本设置

完整示例可在 此处 获取。

DraggableHome 需要您提供 title、headerWidget 和 body

  • title 小部件基本上用于 AppBar 中的标题。如果 AppBar 中不需要标题，只需传递一个空的 Container。
  • headerWidget 是在完全展开时位于 body 上方的展开小部件。
  • body 是 Column 的形式，需要一个 widget 列表或一个 widget。请勿添加任何垂直滚动小部件，否则您可能需要禁用滚动。
  physics: const NeverScrollableScrollPhysics()

示例代码

DraggableHome(
  title: Text("Title"),
  headerWidget: headerWidget(),
  body: [
    Container(...),
    (...),
  ]
);

参数

有几个选项可以提供更多控制

属性 描述
leading 在工具栏标题之前显示的小部件。
操作 在标题小部件之后以一行显示的小部件列表。
抽屉 抽屉通常与 Scaffold.drawer 属性一起使用。
居中标题 允许切换标题居中。默认情况下，标题位于中心。
Header展开高度 Header小部件的高度。高度是一个介于0.0和1.0之间的双精度数。默认高度为0.35，应小于stretchMaxHeight
Header小部件 在 body 上方显示 Header 的小部件。
始终显示前导和操作 这使得前导和操作始终可见。默认值为 false。
Header底部栏 AppBar 或工具栏类似的窗口小部件，位于 body 正上方。
backgroundColor 构成 DraggableHome body 的 Material 小部件的背景色。
弯曲的身体半径 创建 body 的左上角和右上角圆角。默认身体半径为20.0。如果不需要圆角，只需将值设置为0。
完全可拉伸 允许切换 DraggableHome 的完全展开拖拽性。将其设置为 true 可允许用户完全展开 header。
拉伸触发偏移量 完全展开 header 所需的过滚动偏移量。
展开的身体 在完全展开时作为 header 或 expandedBody 显示在 body 上方的小部件。
最大拉伸高度 expandedBody 小部件的高度。高度是一个介于0.0和0.95之间的双精度数。默认高度为0.9，应大于headerExpandedHeight
底部工作表 持久性底部工作表显示补充应用程序主要内容的信息。即使用户与应用程序的其他部分进行交互，持久性底部工作表也保持可见。
底部导航栏高度 使用自定义高度调整 body 高度时需要此项。这不会影响bottomNavigationBar。
底部导航栏 Snack bar 会从底部导航栏下方滑出，而底部工作表则叠在上面。
浮动操作按钮 浮动操作按钮是一个圆形图标按钮，悬浮在内容之上，以推广应用程序中的主要操作。
浮动操作按钮位置 一个根据 Scaffod 的 ScaffoldPrelayoutGeometry 为 FloatingActionButton 定义位置的对象。
浮动操作按钮动画器 用于在 FloatingActionButtonLocations 之间移动 FloatingActionButton 的动画提供程序。

ListView.builder 示例代码

DraggableHome(
  title: Text("Title"),
  headerWidget: headerWidget(),
  body: [
    Container(...),

    // shrinkWrap true required for ListView.builder()
    // disable the scroll for any vertically scrollable widget
    // provide top padding 0 to fix extra space in listView
    ListView.builder(
      padding: EdgeInsets.only(top: 0),
      physics: NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      itemCount: list.length,
      itemBuilder: (context, index) => Card(
        child: ListTile(
          title: Text("$index"),
        ),
      ),
    ),

    (...),
  ]
);

Example Example Example

请多多点赞❤️并收藏⭐仓库

GitHub followers GitHub followers

贡献

欢迎贡献！

如果您觉得缺少某个 hook，请随时提交一个 Pull Request。

为了让 hook 被合并，您需要做到以下几点

  • 描述用例。

  • 开一个 issue，解释我们为什么需要这个 hook，如何使用它……这一点很重要，因为如果一个 hook 不能吸引大量用户，它将不会被合并。

  • 如果您的 hook 被拒绝，请不要担心！拒绝并不意味着它将来不会被合并，如果更多人对此感兴趣的话。在此期间，您可以随时在 https://pub.dev 上将您的 hook 作为包发布。

  • 除非 hook 经过充分测试，否则不会被合并，以避免将来意外破坏它。

GitHub

查看 Github