这个控件非常简单,我们接收完成的百分比值,以及正面和背面部分的颜色。主 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工程师而言,想要提升技能,往往是自己摸索成长,不成体系的学习效果低效漫长且无助。下面资料部分截图是我花费几个月时间整理的,诚意满满:特别适合有3-5年开发经验的Android程序员们学习。
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**