Flutter开发之Widget自定义总结
前言
在Flutter实际开发中,大家可能会遇到flutter框架中提供的widget达不到我们想要的效果,这时就需要我们去自定义widget,从Flutter构建、布局、绘制三部曲中我们了解到,实际的测量、布局、绘制操作都在RenderObject中,我们是可以进行继承相关的RenderObject来实现自定义的。但是其实flutter框架在设计之初就给我们预留出了自定义的入口,方便我们进行自定义。
CustomPaint自定义绘制
例:圆形进度条
思路:使用CustomPaint绘制需要的效果
CustomSingleChildLayout对单一child进行布局
例:实现对child约束成正方形
思路:使用CustomSingleChildLayout对child进行布局,并约束为正方形
CustomSingleChildLayout对多个child进行布局
例:实现网格布局
思路:使用CustomSingleChildLayout对child进行布局、定位,使其成为网格的布局
组合自定义
一般情况,组合自定义应该是我们最经常用的方式,通过继承自StatelessWidget或StatefulWidget,把多个Widget组合起来,从而达到我们需要的效果。
例:下拉刷新,上拉加载
实现一:通过自带的RefreshIndictor和ScrollController组合实现
思路:通过对滚动进行监听来触发加载更多
实现二:通过NotificationListener监听scroll的整体状态,让后结合平移、动画来实现
思路:通过监听用户overscroll的距离来平移内容区域,从而达到下拉刷新,上拉加载的效果
例:上下左右滑动的layout
实现:通过GestureDetector监听手势滑动,然后通过平移来达到效果
思路:主要处理滑动边界,以及开关的零界点
以上的完整代码在这flutter知识点整理
Flutter学习总结
对Flutter的学习也有一段时间了,从最开始的Widget的使用,到后面的框架的一些研究,所有的心得与总结都会记录下来,主要是对自己知识点的整理,同样也为了能够与广大Flutter的学习者共同学习,相互探讨。
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对编程学习网的支持。