[译] 教你如何用 Flutter 的 GestureDetector 构建自定义滑块

原文地址：Building a Custom Slider in Flutter with GestureDetector

原文做者：RJS Tech

译文出自：掘金翻译计划

本文永久连接：github.com/xitu/gold-m…

译者：ALVINYEH

校对者：

Flutter 的一大优势是，能够轻松建立自定义 UI。在本教程中，咱们将看到这一点。javascript

首先，咱们先停下来思考一下，须要构建什么内容。咱们应该有一个滑块，并在其顶部显示填充的百分比。前端

在此以前，很明显咱们须要维护一个控件，它显示一个已填充的给定百分比的进度条。在构建 UI 时，最好考虑一下这些控件，它们不具备任何状态，但会显示父级控件所提供的内容。java

因此，让咱们开始声明控件android

这个控件很是简单，咱们接收完成的百分比值，以及正面和背面部分的颜色。主 Container 将背面颜色做为背景，咱们将绘制正面部分去覆盖它。它的子节点是 Row，虽然它只包含一个子节点，但我保留了它，方便你添加另外一个 Container，它能够显示背面的部分或其中的一些信息（例如，剩余的百分比）。经过从 Container 的总宽度中取相同的百分比，计算并显示已完成百分比的 Container 的 width。ios

接下来，咱们从主要的 App 类开始。git

显然，如今咱们必须声明 MyHomePage 类，如今这个类应该可以使用咱们上面编写的 CustomSlider 控件，并处理手势检测部分，其中用户能够拖动来增长和减小滑块显示的百分比。github

这个控件必须是有状态的，由于要追踪其百分比。在这里，咱们声明了控件的颜色，并将初始百分比保持为 0.0。另外还要注意，如今咱们有一个显示舍入百分比的 Text，它与 CustomSlider 一块儿在屏幕上居中。后端

如今，请注意咱们用 GestureDetector 控件包围住了 CustomSlider 控件。咱们接下来的工做就是，给控件注入活力，使用 GestureDetector 控件来捕获用户的拖动事件。markdown

让咱们看看实现这部分的代码。app

这是添加了拖动部分的完整代码。GestureDetector 控件加入了 onPanStart、onPanUpdate 和 onPanEnd 属性来处理拖动的手势。我但愿这些命名能代表其各自的用途。

为了知道用户拖动了多少，咱们存储了拖动开始的位置，每次用户移动他/她的手指时，都会在 onPanUpdate 方法中计算距离。接着将距离除以滑块的宽度 200。而后咱们简单地将计算完的距离添加到百分比的位置，设置值为 0.0 到 100.0 之间。该值不会超过滑动块的边界，这对于百分比的值来讲是天然而然的事情。

这里只给出一个咱们自定义的滑块……请用这个来展现一下你作了什么改变吧。

点击这里得到不一样能够复制/粘贴的代码版本。

喜欢你读的东西吗？给 RJS Tech 一点掌声。

从为之欢呼到起立鼓掌，拍手表示你是多么喜欢这篇文章。

若是发现译文存在错误或其余须要改进的地方，欢迎到掘金翻译计划对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

掘金翻译计划是一个翻译优质互联网技术文章的社区，文章来源为掘金上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注掘金翻译计划、官方微博、知乎专栏。