• 原文地址：Slidable: A Flutter story
• 原文作者：Romain Rastel
• 譯文出自：掘金翻譯計劃
• 本文永久連結：github.com/xitu/gold-m…
• 譯者：YueYong
• 校對者：dayixinsheng

Slidable：一個 Flutter 的故事

概要

這是建立 Slidable 小部件背後的故事（點選這裡）。他是一個當您向左側或右側滑動時，可以在列表項上新增上下文操作的小部件。

這一切是如何開始的呢

我是一個充滿激情的開發者。編碼是我維持生活的來源，但它同時也是我的主要愛好 ❤️。有些人通過文字，圖畫，音樂表達自己，我通過程式碼表達自己。變數和函式比打球更能讓我感到舒服。這就是我。

2018 年 7 月我們在法國的布列塔尼，這裡陽光充足☀️，有點熱，但我不想享受陽光或者去海灘，我渴望學習新東西和編碼。

我是 Flutter 的忠實粉絲，我已經發布了一些軟體包（flutter_staggered_grid_view, flutter_parallax, flutter_sticky_header）。所有這些都有一些共同之處：Slivers。 還記得嗎？我想學習新的東西。所以我選了一個新主題：動畫！

既然我有東西要學，我就需要一個想法，那就是用這些知識創造一些東西。我記得當我發現 Flutter 的時候，我考慮了 3 個當時不存在的小部件：交錯的網格檢視，粘性標題和一個允許使用者在左右滑動時顯示在列表項兩側的上下文選單。我沒有嘗試過最後一個，所以就誕生了這個想法?。

從哪裡開始呢

在一個已有的例子上創造總是更容易。這就是為什麼每次我想要創造一些東西時，我首先要研究是否有類似的我可以改進的東西。

我開始在 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 連結。

---

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。