可拖拽的首页

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

example--1-

1

2

3

用法

请确保查看更多细节的示例。

安装

将以下行添加到pubspec.yaml

dependencies:
  draggable_home: ^1.0.0

基本设置

DraggableHome 要求您提供 title、headerWidget 和 body

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

示例代码

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

参数

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

属性 描述
leading 在工具栏标题之前显示的小部件。
操作 在标题小部件之后显示在一排中的小部件列表。
抽屉 抽屉通常与 Scaffold.drawer 属性一起使用。
居中文本 允许切换标题居中。默认情况下，标题是居中的。
headerExpandedHeight headerWidget 的高度。高度是介于 0.0 和 1.0 之间的双精度数。默认高度为 0.35，应小于 stretchMaxHeight
headerWidget 一个显示在 body 上方 Header 的小部件。
backgroundColor 构成 DraggableHome 主体的 Material 小部件的颜色。
curvedBodyRadius 为 body 创建左上角和右上角的圆角半径。body 的默认半径为 20.0。如果没有半径，只需将值设置为 0。
fullyStretchable 允许切换 DraggableHome 的完全展开拖拽性。将其设置为 true 以允许用户完全展开 Header。
stretchTriggerOffset 完全展开 Header 所需的过滚动偏移量。
expandedBody 在完全展开时作为 Header 或 expandedBody 显示在 body 上方的小部件。
stretchMaxHeight expandedBody 小部件的高度。高度是介于 0.0 和 0.95 之间的双精度数。默认高度为 0.9，应大于 headerExpandedHeight
floatingActionButton 浮动操作按钮是一个圆形图标按钮，它悬停在内容之上，以促进应用程序中的主要操作。
floatingActionButtonLocation 一个对象，该对象根据 Scaffold 的 ScaffoldPrelayoutGeometry 为 FloatingActionButton 定义位置。
floatingActionButtonAnimator 用于在 FloatingActionButtonLocations 之间移动 FloatingActionButton 的动画提供程序。


ListView.builder 的示例代码

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

    // shrinkWrap true required for ListView.builder()
    // disable the scroll for any verically scrollable widget
    ListView.builder(
      physics: NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      itemCount: list.length,
      itemBuilder: (context, index) => Card(
        child: ListTile(
          title: Text("$index"),
        ),
      ),
    ),

    (...),
  ]
);

GitHub

https://github.com/4-alok/draggable_home