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

• 原文地址：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 之間。該值不會超過滑動塊的邊界，這對於百分比的值來說是自然而然的事情。

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

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

• JavaScript
• Flutter
• Gesturedetector
• Apps
• Dart

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

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

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

---

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