【Flutter Unit 重大更新 1 】超好用的组件收藏夹上线

时间:2022-07-27
本文章向大家介绍【Flutter Unit 重大更新 1 】超好用的组件收藏夹上线,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

重大更新篇是有重大功能支持是的相关文章,进行介绍,文尾会附带这段时间的更新情况


前言

经过一周的更新,解决了不少bug, 感谢大家的支持,项目star个数也已破千 Flutter Unit 于今日上线一个重要的功能模块组件收藏夹,丝滑的操作等你体验。 欢迎star : github.com/toly1994328…

FlutterUnit.apk 下载

FlutterUnit mac版 下载

Github仓库地址

FlutterUnit.apk 下载
FlutterUnit mac版 下载
Github仓库地址
由于数据库变动,下载新版前,手机中如有旧版,请先卸载。

一、收藏夹整体介绍

1. 收藏夹的操作

收藏夹设计的初衷是: Flutter中的组件非常多,分类页并不明确 作为集卡癖的我很想有个收藏的接口,让我能自由收藏分类。 应用中默认给出了12种分类方式,也就是12个收藏夹,且210+组件已录入相应收藏夹 当然你可以自由的创建、修改、删除它们。收藏集还可以指定颜色用以区分。

添加收藏集

修改收藏集

删除收藏集

添加收藏集
修改收藏集
删除收藏集

2. 组件的收藏与取消操作

数据库表采用widgetcategory一对多的结构,收录组件。 在每个详情页的右滑菜单中可以查看当前组件的收藏信息, 点击收藏夹名称时时可以切换该组件是否收录。在收藏夹里面可以左滑删除

删除与数据同步

组件加入收藏集

收藏集支持多选

删除与数据同步
组件加入收藏集
收藏集支持多选

3.整体效果

对收藏夹页面整体进行优化,效果如下,保留了默认收藏集。 点击收藏夹会进入收藏的内容,每个item也可以点击进入详情页。

滑动效果

长按右菜单滑页

详情内长按展示收藏菜单

滑动效果
长按右菜单滑页
详情内长按展示收藏菜单

4.彩蛋: 左右滑栏

很多朋友反映左右滑栏与系统的侧滑返回冲突,所以特意设置了滑栏的小彩蛋 主页长按底部左侧按钮可打开左侧滑栏 主页长按底部右侧按钮可打开右侧滑栏 详情页长按顶部房子按钮可打开右侧滑栏

长按左菜单滑页

长按右菜单滑页

详情内长按展示收藏菜单

长按左菜单滑页
长按右菜单滑页
详情内长按展示收藏菜单

二、收藏夹实现相关

1. 基于bloc 实现业务逻辑与界面的分离

  • 原始数据层面使用CategoryDao进行数据库的交互,即增删查改

  • CategoryRepository负责数据的存储和操作接口,CategoryDbRepository为数据库资源实现方式
  • 这样处理的好处是统一操作接口,未来如果使用线上数据,实现CategoryNetRepository即可,其他整体逻辑不需要改变,即方便拓展。
abstract class CategoryRepository {
  //切换一个组件在收藏夹中的状态
  Future toggleCategory(int categoryId, int widgetId);

  // 检查一个组件是否在收藏夹内
  Future check(int categoryId,int widgetId);

  // 获取一个收藏夹中的所有组件
  Future> loadCategoryWidgets({int categoryId = 0});

  // 获取所有收藏集
  Future> loadCategories();

  //添加收藏集
  Future addCategory(CategoryPo categoryPo);

  //更新收藏集
  Future updateCategory(CategoryPo categoryPo);
  
  //删除收藏集
  Future deleteCategory(int id);
  
  //查看某个组件在哪些收藏集中
  Future> getCategoryByWidget(int widgetId);
}

  • CategoryBloc负责收藏夹本身的业务操作,根据事件返回状态
  • CategoryWidgetBloc 负责收藏夹中组件的业务操作,根据事件返回状态
  • 最后界面根据事件映射出的状态进行显示,即可。
  • 这里涉及了很多状态的同步,用bloc就非常方便。(不引战,状态管理工具你爱用啥用啥。)
  • 核心差不多也就这些,其他的就是界面的设计,详细的东西还是自己看看源码吧

2.收藏的表结构

category表widget表是相对独立的,负责各自的信息记录 通过category_widget表来建议一对多的关系,剩下的就是sql的能力了。


三、更新记录 1

  • 2020-4-16
fixed "     修改样式无法点击的问题。 
fixed "     一些已知文案的错误。 
fixed "     hero动画闪现不同步问题。

  • 2020-4-17
fixed "     进入收藏页,再回到首页,顶部显示不同步的问题。 
fixed "     主页item双击黑屏问题。 


feature "   支持详情页【相关链接的栈管理】,
        "   即: 点击多个链接,不直接返回主页.

  • 2020-4-18
feature "   小彩蛋: 【长按】底部栏【最左侧按钮】,打开左边菜单栏
        "   【长按】底部栏【最右侧按钮】,打开右边菜单栏

fixed "     收藏集的AppBar背景色同主页选中色。 

  • 2020-4-19
optimize "   添加收录【LayoutBuilder】组件
optimize "   添加收录【IgnorePointer】组件
optimize "   添加收录【AbsorbPointer】组件
optimize "   添加收录【BackdropFilter】组件

  • 2020-4-21
feature "   使用Sliver优化收藏集的显示

  • 2020-4-24
feature "   完成组件收藏夹功能

尾声

欢迎Star和关注FlutterUnit 的发展,让我们一起携手,成为Unit一员。 另外本人有一个Flutter微信交流群,欢迎小伙伴加入,共同探讨Flutter的问题,期待与你的交流与切磋。