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

最新推荐文章于 2024-11-28 20:52:20 发布

原创最新推荐文章于 2024-11-28 20:52:20 发布 · 599 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #前端 #javascript

程序员专栏收录该内容

440 篇文章

订阅专栏

文章介绍了如何在Flutter中创建一个可拖动的CustomSlider控件，涉及有状态组件的状态管理、颜色配置、手势检测（包括onPanStart、onPanUpdate和onPanEnd）以及百分比显示。作者还提供了相关代码示例和学习资源链接，针对Android开发者的技能提升和面试准备。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这个控件非常简单，我们接收完成的百分比值，以及正面和背面部分的颜色。主 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 之间。该值不会超过滑动块的边界，这对于百分比的值来说是自然而然的事情。

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

点击这里获得不同可以复制/粘贴的代码版本。