[譯] 教你如何用 Flutter 的 GestureDetector 構建自定義滑塊

ALVIN君發表於2018-07-09

Flutter 的一大優點是,可以輕鬆建立自定義 UI。在本教程中,我們將看到這一點。

首先,我們先停下來思考一下,需要構建什麼內容。我們應該有一個滑塊,並在其頂部顯示填充的百分比。

在此之前,很明顯我們需要維護一個控制元件,它顯示一個已填充的給定百分比的進度條。在構建 UI 時,最好考慮一下這些控制元件,它們不具有任何狀態,但會顯示父級控制元件所提供的內容。

所以,讓我們開始宣告控制元件

[譯] 教你如何用 Flutter 的 GestureDetector 構建自定義滑塊

這個控制元件非常簡單,我們接收完成的百分比值,以及正面和背面部分的顏色。主 Container 將背面顏色作為背景,我們將繪製正面部分去覆蓋它。它的子節點是 Row,雖然它只包含一個子節點,但我保留了它,方便你新增另一個 Container,它可以顯示背面的部分或其中的一些資訊(例如,剩餘的百分比)。通過從 Container 的總寬度中取相同的百分比,計算並顯示已完成百分比的 Containerwidth

接下來,我們從主要的 App 類開始。

[譯] 教你如何用 Flutter 的 GestureDetector 構建自定義滑塊

顯然,現在我們必須宣告 MyHomePage 類,現在這個類應該能夠使用我們上面編寫的 CustomSlider 控制元件,並處理手勢檢測部分,其中使用者可以拖動來增加和減少滑塊顯示的百分比。

[譯] 教你如何用 Flutter 的 GestureDetector 構建自定義滑塊

這個控制元件必須是有狀態的,因為要追蹤其百分比。在這裡,我們宣告瞭控制元件的顏色,並將初始百分比保持為 0.0。另外還要注意,現在我們有一個顯示舍入百分比的 Text,它與 CustomSlider 一起在螢幕上居中。

現在,請注意我們用 GestureDetector 控制元件包圍住了 CustomSlider 控制元件。我們接下來的工作就是,給控制元件注入活力,使用 GestureDetector 控制元件來捕獲使用者的拖動事件。

讓我們看看實現這部分的程式碼。

[譯] 教你如何用 Flutter 的 GestureDetector 構建自定義滑塊

這是新增了拖動部分的完整程式碼。GestureDetector 控制元件加入了 onPanStartonPanUpdateonPanEnd 屬性來處理拖動的手勢。我希望這些命名能表明其各自的用途。

為了知道使用者拖動了多少,我們儲存了拖動開始的位置,每次使用者移動他/她的手指時,都會在 onPanUpdate 方法中計算距離。接著將距離除以滑塊的寬度 200。然後我們簡單地將計算完的距離新增到百分比的位置,設定值為 0.0 到 100.0 之間。該值不會超過滑動塊的邊界,這對於百分比的值來說是自然而然的事情。

這裡只給出一個我們自定義的滑塊……請用這個來展示一下你做了什麼改變吧。

點選這裡 獲得不同可以複製/貼上的程式碼版本。

喜歡你讀的東西嗎?給 RJS Tech 一點掌聲。

從為之歡呼到起立鼓掌,拍手錶示你是多麼喜歡這篇文章。

如果發現譯文存在錯誤或其他需要改進的地方,歡迎到 掘金翻譯計劃 對譯文進行修改並 PR,也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。


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

相關文章