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