smooth_sheets

Sheet 小部件，具有流畅的动画和出色的灵活性

smooth_sheets 包为 Flutter 应用提供了模态和持久的表格小部件。主要特点是：

• 流畅的动画：表格响应用户交互，具有流畅、优雅的动画。
• 高度灵活：不受限于特定的设计。支持模态和持久风格，以及可滚动和不可滚动的小部件。
• 支持嵌套导航：表格可以包含多个页面，并在页面之间进行带有动画过渡的导航。
• 支持命令式和声明式导航器 API：无需特殊的导航机制。支持传统的 `Navigator.push` 等方式，并且可以与 go_route 等 Navigator 2.0 包配合使用。

展示

	AI 歌单生成器 一个 AI 助手，可以根据用户的偏好创建音乐歌单。更多详情请参阅 食谱。 使用的组件 NavigationSheet ModalSheetPage SheetContentScaffold SheetPhysics
	Airbnb 移动应用克隆 Airbnb 移动应用的局部克隆。用户可以向下拖动房屋列表以显示其背后的地图。更多详情请参阅 食谱。 使用的组件 ScrollableSheet SheetPhysics SheetController SheetDraggable ExtentDrivenAnimation

为何使用它？

pub.dev 上支持带有页面过渡动画的嵌套导航的包很少。用于此用例的出色选择之一是 wolt_modal_sheet，本项目受其启发。尽管 smooth_sheet 具有与 wolt_modal_sheet 类似的功能，但它并不打算取代该包。以下是这两个包之间的一些区别：

	wolt_modal_sheet	smooth_sheets
设计	基于 Wolt 的 设计指南	不限于特定设计，完全可定制
导航机制	在 ValueNotifier 中管理页面索引	与内置导航器 API（命令式和声明式）配合使用
可滚动内容	支持	支持
持久化表格	不支持	支持
屏幕尺寸适应	在大型屏幕上，表格显示为对话框	不支持

用法

有多种资源可用于学习此包的功能。

• 教程：请参阅 cookbook/lib/tutorial/ 了解核心组件的基本用法。
• 展示：更多实际示例可在 cookbook/lib/showcase/ 中找到。
• 文档：正在进行中！请暂时参阅源代码。

组成部分

本节提供每个核心组件的描述以及相关资源的链接，以便进一步学习。

Extent

Extent 表示表格的可见高度。它用于各种情况，例如，指定表格在首次构建时最初可见的区域大小，或限制表格拖动的范围。

DraggableSheet

一个可以拖动的表格。高度将等于内容的高度。表格在过度拖动或拖动不足时的行为由 SheetPhysics 决定。请注意，此小部件不能与可滚动小部件一起使用。相反，对于这种情况，请使用 ScrollableSheet。

另请参阅

• 有关基本用法，请参阅 draggable_sheet.dart。

ScrollableSheet

一个与 DraggableSheet 相似的表格，但专门设计用于与可滚动小部件集成。当内容过度滚动或滚动不足时，它将开始被拖动。

另请参阅

• 有关基本用法，请参阅 scrollable_sheet.dart。

NavigationSheet

一个能够拥有多个页面并在页面过渡时执行优雅动画的表格。它同时支持命令式导航器 API，如 `Navigator.push`，以及声明式 API（Navigator 2.0）。

另请参阅

• 有关使用 go_router 包与 Navigator 2.0 集成的教程，请参阅 declarative_navigation_sheet.dart。
• 有关与命令式导航器 API 集成的教程，请参阅 imperative_navigation_sheet.dart。

模态表格

可以使用 ModalSheetRoute 进行命令式导航，或使用 ModalSheetPage 进行声明式导航，将表格显示为模态表格。模态表格提供“下拉关闭”操作；用户可以通过向下滑动来关闭表格。

另请参阅

• 有关使用 go_router 包进行声明式导航集成的教程，请参阅 declarative_modal_sheet.dart。
• 有关与命令式导航器 API 集成的教程，请参阅 imperative_modal_sheet.dart。

SheetPhysics

物理属性决定了表格在过度拖动或拖动不足时，或用户停止拖动时的行为。有 3 种预定义的物理属性：

• ClampingSheetPhysics：阻止表格超出拖动范围
• StretchingSheetPhysics：允许表格超出拖动范围，然后将表格弹回边界
• SnappingSheetPhysics：在用户停止拖动时自动将表格吸附到特定范围

这些物理属性可以组合起来创建更复杂的行为（例如，拉伸行为 + 吸附行为）。

另请参阅

• 有关基本用法，请参阅 sheet_physics.dart。

SheetController

类似于可滚动小部件的 ScrollController，SheetController 可用于动画或观察表格的范围。

另请参阅

• 有关基本用法，请参阅 sheet_controller.dart。

SheetContentScaffold

一种特殊的 Scaffold，专为在表格中使用而设计。它具有类似 Scaffold 的应用栏和底部固定栏的插槽。然而，它的不同之处在于它的高度会缩小以适应内容小部件。

另请参阅

• 有关基本用法，请参阅 sheet_content_scaffold.dart。

SheetDraggable

SheetDraggable 使其子小部件能够充当表格的拖动手柄。通常，当在 ScrollableSheet 中放置不可滚动的小部件时，您会希望使用此小部件，因为它的工作原理是仅适用于可滚动小部件，因此您无法通过触摸不可滚动区域来拖动表格。尝试移除 SheetDraggable，您会发现拖动手柄无法正常工作。请注意，在使用 DraggableSheet 时不需要 SheetDraggable，因为它会自动包装子小部件。

另请参阅

• 有关基本用法，请参阅 sheet_draggable.dart。

ExtentDrivenAnimation

通过使用 ExtentDrivenAnimation，可以轻松创建由表格范围驱动的动画。ExtentDrivenAnimation 是一种特殊的 Animation，当表格范围从“startExtent”更改为“endExtent”时，其值从 0 变为 1。

另请参阅

• 有关基本用法，请参阅 extent_driven_animation。
• airbnb_mobile_app.dart，展示了 ExtentDrivenAnimation 如何用于在表格向下拖动时隐藏底部导航栏和 FAB，并在表格再次向上拖动时显示它们。

路线图

• doc：提供文档
• doc：添加更多展示
• feat：表格装饰；一种将额外小部件放置在表格上层的方法
• feat：提供一种中断模态路由弹出操作的方法
• feat：在 NavigationSheet 中支持共享应用栏
• feat：在表格范围更改时调度 Notification
• feat：实现适应 iOS 的模态表格路由

问题

如果您有任何疑问，请随时在 讨论页面 上提问。

贡献

贡献是开源社区成为学习、启发和创造的精彩场所的原因。您的任何贡献都不胜感激。

如果您有任何改进建议，请 fork 该仓库并创建拉取请求。您也可以简单地打开一个带有“enhancement”标签的问题。别忘了给项目点个星！再次感谢！

1. Fork 该项目
2. 创建您的特性分支（git checkout -b feature/AmazingFeature）
3. 提交您的更改（git commit -m 'Add some AmazingFeature'）
4. 推送到分支（git push origin feature/AmazingFeature）
5. 打开一个拉取请求

GitHub

查看 Github