- 原文地址:Building a Custom Slider in Flutter with GestureDetector
- 原文作者:RJS Tech
- 譯文出自:掘金翻譯計劃
- 本文永久連結:github.com/xitu/gold-m…
- 譯者:ALVINYEH
- 校對者:
Flutter 的一大優點是,可以輕鬆建立自定義 UI。在本教程中,我們將看到這一點。
首先,我們先停下來思考一下,需要構建什麼內容。我們應該有一個滑塊,並在其頂部顯示填充的百分比。
在此之前,很明顯我們需要維護一個控制元件,它顯示一個已填充的給定百分比的進度條。在構建 UI 時,最好考慮一下這些控制元件,它們不具有任何狀態,但會顯示父級控制元件所提供的內容。
所以,讓我們開始宣告控制元件
這個控制元件非常簡單,我們接收完成的百分比值,以及正面和背面部分的顏色。主 Container
將背面顏色作為背景,我們將繪製正面部分去覆蓋它。它的子節點是 Row
,雖然它只包含一個子節點,但我保留了它,方便你新增另一個 Container
,它可以顯示背面的部分或其中的一些資訊(例如,剩餘的百分比)。通過從 Container
的總寬度中取相同的百分比,計算並顯示已完成百分比的 Container
的 width
。
接下來,我們從主要的 App 類開始。
顯然,現在我們必須宣告 MyHomePage
類,現在這個類應該能夠使用我們上面編寫的 CustomSlider
控制元件,並處理手勢檢測部分,其中使用者可以拖動來增加和減少滑塊顯示的百分比。
這個控制元件必須是有狀態的,因為要追蹤其百分比。在這裡,我們宣告瞭控制元件的顏色,並將初始百分比保持為 0.0。另外還要注意,現在我們有一個顯示舍入百分比的 Text
,它與 CustomSlider
一起在螢幕上居中。
現在,請注意我們用 GestureDetector
控制元件包圍住了 CustomSlider
控制元件。我們接下來的工作就是,給控制元件注入活力,使用 GestureDetector
控制元件來捕獲使用者的拖動事件。
讓我們看看實現這部分的程式碼。
這是新增了拖動部分的完整程式碼。GestureDetector
控制元件加入了 onPanStart
、onPanUpdate
和 onPanEnd
屬性來處理拖動的手勢。我希望這些命名能表明其各自的用途。
為了知道使用者拖動了多少,我們儲存了拖動開始的位置,每次使用者移動他/她的手指時,都會在 onPanUpdate
方法中計算距離。接著將距離除以滑塊的寬度 200。然後我們簡單地將計算完的距離新增到百分比的位置,設定值為 0.0 到 100.0 之間。該值不會超過滑動塊的邊界,這對於百分比的值來說是自然而然的事情。
這裡只給出一個我們自定義的滑塊……請用這個來展示一下你做了什麼改變吧。
點選這裡 獲得不同可以複製/貼上的程式碼版本。
喜歡你讀的東西嗎?給 RJS Tech 一點掌聲。
從為之歡呼到起立鼓掌,拍手錶示你是多麼喜歡這篇文章。
如果發現譯文存在錯誤或其他需要改進的地方,歡迎到 掘金翻譯計劃 對譯文進行修改並 PR,也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。
掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群,文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域,想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。