不过目前闲鱼很多业务场景都是在Flutter上进行实现的,当时Flutter官方只提供了ListView和GridView的实现,没有对瀑布流进行支持。 目前社区中有两个开源的解决方案,分别是WaterFallFlow和FlutterStaggeredGridView。但是在闲鱼的场景中都有一些无法满足的痛点。前者无法支持RecyclerView中StaggeredGridLayoutManager中setFullSpan这样...
目前RecyclerView和WaterFallFlow是采用这种方式的,在用户向下滑动时,正常布局,然后记录下没张卡片属于哪一列。然后在用户向上滑动时,对即将进行布局的卡片,先通过这个关系表得到它属于哪一列,然后将它布局在这一列最上面卡片的上方,这样就可以保证卡片的布局对于用户来说始终是一致的。但是这样的方式在混排瀑布流中,需要...
不过这里要注意,需要找支持 Sliver 的三方库 我们这里以 waterfall_flow 库为例 waterfall_flow | Flutter package (pub.dev) 把瀑布流部分替换成如下代码: SliverWaterfallFlow( gridDelegate: const SliverWaterfallFlowDelegateWithFixedCrossAxisCount( crossAxisCount: 2, // 设置列数为2 crossAxisSpacing: 10.0, /...
if(waterfallFlowItem == null) { waterfallFlowItem = new WaterfallFlowItem(frame: f,); isReUse = false; } block(waterfallFlowItem,isReUse); } 创建首屏全部可视瀑布流Widget单元组件 //渲染瀑布流item createWaterfallFlow(int index){ getMaxHeight(); //这里加点延迟,保证获取最大高度完成(不太严谨...
tip: WaterfallFlow.dart 瀑布流主页面;WaterfallFlowItem.dart 瀑布流单元item 效果展示: WaterfallFlowItem.dart 瀑布流item文件 classWaterfallFlowItemextendsStatefulWidget{Frame? _frame;WaterfallFlowItemState? _waterfallFlowItemState;WaterfallFlowItem({requiredFrameframe}){ ...
我们这里以 waterfall_flow 库为例 把瀑布流部分替换成如下代码: SliverWaterfallFlow( gridDelegate: const SliverWaterfallFlowDelegateWithFixedCrossAxisCount( crossAxisCount: 2, // 设置列数为2 crossAxisSpacing: 10.0, // 水平间距 mainAxisSpacing: 10.0, // 垂直间距 ), delegate: SliverChildBuilderDelegate(...
waterfall_flow: ^3.0.1 extended_image: any extended_sliver: any ff_annotation_route_library: any http_client_helper: any intl: any like_button: any loading_more_list: any pull_to_refresh_notification: any url_launcher: any 1.图片自适应: ...
WaterfallFlow.dart 主界面文件 builder 实现 @override Widget build(BuildContext context) { return new Container( //去掉scrollView顶部空白间隙 child: MediaQuery.removePadding( context: context, removeTop: true, child: Scrollbar( //isAlwaysShown: true, ...
目前社区中有两个开源的解决方案,分别是WaterFallFlow和FlutterStaggeredGridView。但是在闲鱼的场景中都有一些无法满足的痛点。前者无法支持RecyclerView中StaggeredGridLayoutManager中setFullSpan这样的横跨全屏的横条卡片混排能力能力,后者在不提前预设置卡片高度的情况下有比较严重的性能问题,以及在多Sliver的场景下会有滚动...
目前社区中有两个开源的解决方案,分别是WaterFallFlow和FlutterStaggeredGridView。但是在闲鱼的场景中都有一些无法满足的痛点。前者无法支持RecyclerView中StaggeredGridLayoutManager中setFullSpan这样的横跨全屏的横条卡片混排能力能力,后者在不提前预设置卡片高度的情况下有比较严重的性能问题,以及在多Sliver的场景下会有滚动...