最后
如果你看到了这里,觉得文章写得不错就给个赞呗?如果你觉得那里值得改进的,请给我留言。一定会认真查询,修正不足。谢谢。
最后针对Android程序员,我这边给大家整理了一些资料,包括不限于高级UI、性能优化、移动架构师、NDK、混合式开发(ReactNative+Weex)微信小程序、Flutter等全方面的Android进阶实践技术;希望能帮助到大家,也节省大家在网上搜索资料的时间来学习,也可以分享动态给身边好友一起学习!
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
- 原文地址: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
控件来捕获用户的拖动事件。
让我们看看实现这部分的代码。
最后
题外话,我在一线互联网企业工作十余年里,指导过不少同行后辈。帮助很多人得到了学习和成长。
我意识到有很多经验和知识值得分享给大家,也可以通过我们的能力和经验解答大家在IT学习中的很多困惑,所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限,很多程序员朋友无法获得正确的资料得到学习提升,故此将并将重要的Android进阶资料包括自定义view、性能优化、MVC与MVP与MVVM三大框架的区别、NDK技术、阿里面试题精编汇总、常见源码分析等学习资料。
【Android思维脑图(技能树)】
知识不体系?这里还有整理出来的Android进阶学习的思维脑图,给大家参考一个方向。
【Android进阶学习视频】、【全套Android面试秘籍】
希望我能够用我的力量帮助更多迷茫、困惑的朋友们,帮助大家在IT道路上学习和发展
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**