[譯] 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前端後端區塊鏈產品設計人工智能等領域,想要查看更多優質譯文請持續關注 掘金翻譯計劃官方微博知乎專欄

相關文章
相關標籤/搜索