重学Flutter
文章平均质量分 90
重学Flutter
andr_gale
船到桥头自然直
展开
-
07_Flutter使用NestedScrollView+TabBarView滚动位置共享问题修复
可以看到,上图中三个列表的滑动位置共享了,滑动其中一个列表,会影响到另外两个,这显然不符合要求,先来看下布局,再说明产生这个问题的原因:布局整体使用NestedScrollView,顶部banner和TabBar通过headerSliverBuilder创建,body为TabBarView,TabBarView中有三个列表,通过TabController与TabBar实现联动,同时每一个列表通过继承StatefulWidget构建并混入AutomaticKeepAliveClientMixin,重写want原创 2024-05-07 18:18:34 · 1698 阅读 · 0 评论 -
06_Flutter自定义锚点分类列表
categoryWidth: 左侧边栏的宽度,右侧区域的宽度填充剩余空间即可。itemCount: 总共有多少个分类项,也就是左侧边栏中有多少个字项。sticky: 滑动过程中,右侧标题是否吸顶。controller: 外部通过controller可以控制左侧边栏中子项的选中以及右侧列表滑动位置的联动,同时监听选中状态。categoryItemBuilder: 创建左侧边栏中的每一个分类项。sectionItemBuilder: 创建右侧滑动列表中的每一个标题项。原创 2024-04-30 17:30:00 · 1189 阅读 · 4 评论 -
05_Flutter屏幕适配
可以看到,ViewConfiguration对象的创建过程,会传递默认的像素比,以及确定默认的逻辑尺寸,这里就是我们第一个需要修改的地方,那么怎么修改,毫无疑问,需要把RendererBinding的renderView的值替换成我们自己创建的,这样我们就可以根据自己计算的逻辑尺寸和像素比去创建ViewConfiguration了。可以看到,这里在计算点击的触摸坐标时,还使用的是默认的像素比去计算的,因此,这里需要把默认的像素密度替换。因此,我们需要修改默认的逻辑尺寸,将逻辑宽度统一成375。原创 2024-04-19 19:14:49 · 1524 阅读 · 1 评论 -
04_Flutter自定义Slider滑块
既然要自定义滑块,毫无疑问需要从SliderThemeData的thumbShape入手。thumbShape;});因此我们可以定义一个类继承SliderComponentShape,并实现getPreferredSize和paint方法,getPreferredSize控制滑块大小,paint负责把滑块绘制到屏幕上。原创 2023-11-29 02:23:43 · 2245 阅读 · 0 评论 -
03_Flutter自定义下拉菜单
在Flutter的内置api中,可以使用showMenu实现类似下拉菜单的效果,或者使用PopupMenuButton组件,PopupMenuButton内部也是使用了showMenu这个api,但是使用showMenu时,下拉面板的显示已经被约定死了,只能放一个简单的列表,没有办法定制下来面板的ui,并且下拉面板的宽高需要通过指定constraints进行限制,下面是一个简单的showMenu的用法:接下来,我们将参照showMenu的源码,依葫芦画个瓢,自定义一个下拉菜单的api,并可自由定制下拉面板原创 2023-10-27 10:12:46 · 2051 阅读 · 0 评论 -
02_Flutter自定义Sliver组件实现分组列表吸顶效果
在使用SliverPersistentHeader时要求我们明确指定子控件的高度,不支持吸顶上推效果,使用起来不够灵活,所以我们参考并结合SliverToBoxAdapter和SliverPersistentHeader源码,自己实现一个自适应高度的吸顶Sliver组件,并在此基础上一步步实现吸顶上推效果。可以看到,所有的分组section都已经吸顶了,只不过吸顶位置都是0,并且前一个section把后一个section覆盖了,我们下一步实现上推功能后,这个问题自热而然的就解决了。原创 2023-09-11 01:58:26 · 2754 阅读 · 9 评论 -
01_Flutter之下拉刷新和上拉加载
);?false;} else {});});原创 2023-09-05 02:52:21 · 1415 阅读 · 3 评论