[译] Slidable:一个 Flutter 的故事

Slidable:一个 Flutter 的故事

概要

这是建立 Slidable 小部件背后的故事(点击这里)。他是一个当您向左侧或右侧滑动时,能够在列表项上添加上下文操做的小部件。html

这一切是如何开始的呢

我是一个充满激情的开发者。编码是我维持生活的来源,但它同时也是个人主要爱好 ❤️。有些人经过文字,图画,音乐表达本身,我经过代码表达本身。变量和函数比打球更能让我感到舒服。这就是我。前端

2018 年 7 月咱们在法国的布列塔尼,这里阳光充足☀️,有点热,但我不想享受阳光或者去海滩,我渴望学习新东西和编码。android

我是 Flutter 的忠实粉丝,我已经发布了一些软件包(flutter_staggered_grid_view, flutter_parallax, flutter_sticky_header)。全部这些都有一些共同之处:Slivers。 还记得吗?我想学习新的东西。因此我选了一个新主题:动画!ios

既然我有东西要学,我就须要一个想法,那就是用这些知识创造一些东西。我记得当我发现 Flutter 的时候,我考虑了 3 个当时不存在的小部件:交错的网格视图,粘性标题和一个容许用户在左右滑动时显示在列表项两侧的上下文菜单。我没有尝试过最后一个,因此就诞生了这个想法💡。git

从哪里开始呢

在一个已有的例子上创造老是更容易。这就是为何每次我想要创造一些东西时,我首先要研究是否有相似的我能够改进的东西。github

我开始在 Pub Dart 上搜索,看看是否有人尚未发布过那个,若是是这样的话,我会停下来去寻找一个新的想法。后端

在那里我找不到我想要的东西,因此我搜索了 StackOverflow 并找到了这个问题。用户 Remi Rousselet 给出了一个很是好的答案。 我阅读并理解了他的代码,这对我构建第一个原型有很大的帮助。因此 Remi 先生,若是您正在读着个人这篇文章,那么我在此很是感谢您当初的帮助 👏。函数

从原型到第一次发布

在我开发了使用一个动画的原型后,我马上想到让开发人员建立本身的动画。我想起一个让开发人员在网格中控制布局的工具 SliverDelegate,并决定建立相似的东西。工具

让开发人员自定义动画很棒,但我必须提供一些内置动画,以便任何开发人员均可以使用它们,或调整个人动画来建立他们的动画。布局

这就是为何我首先建立了 3 个表明:

SlidableBehindDelegate

使用这个对象,滑动操做在列表项后。

SlidableBehindDelegate 的例子

SlidableScrollDelegate

使用此对象,幻灯片操做将以与列表项相同的方向滚动。

SlidableScrollDelegate 的例子

SlidableStrechDelegate

使用此对象,当列表项滑动时,幻灯片操做正在增加。

SlidableStrechDelegate 的例子

SlidableDrawerDelegate

有了这个,滑动动做显示出一种视差效果,就像在 iOS 中同样。

SlidableDrawerDelegate 的例子

对于这个故事,当我向个人同事 Clovis Nicolas 展现前 3 位表明时,他告诉我,在 iOS 中拥有这样效果的应用会很棒。因为我不是 iOS 用户,我认为它更像是 SlidableStrechDelegate,但没有。 这就是 SlidableDrawerDelegate 如何诞生的过程。

Flutter 中的动画

我没有写过我在 Flutter 中学到的关于动画的内容,由于还有其余内容能够很好的解释它,就像这个

但我能够分享我对 Flutter 中动画的感觉:它们很是棒且易于处理 😍!

我很后悔以前没有使用过他们😃。

写在最后

完成这些内置对象后,我认为这将是一个很好的初始版本。因此我公开了个人 GitHub 代码库,并在 Dart Pub 上发布了它。

Slidable 部件预览

这就是 Slidable 部件如何诞生的过程。如今它须要一些发展。若是您想要一些新功能,欢迎您在 GitHub 上建立一个 issue并解释您想要的内容。若是它与我对这个包的见解一致,我将很乐意实现它!

您能够在代码库中找到一些文档,以及上面的示例

若是这个软件包对你有所帮助,你能够经过⭐️这个 repo,或者👏这个故事。你也能够在 Twitter 上关注我。

若是您使用此软件包构建应用程序,请告诉我😃。

若是发现译文存在错误或其余须要改进的地方,欢迎到 掘金翻译计划 对译文进行修改并 PR,也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。


掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 AndroidiOS前端后端区块链产品设计人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划官方微博知乎专栏

相关文章
相关标签/搜索