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

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

前言

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

FlutterUnit.apk 下载

FlutterUnit mac版 下载

Github仓库地址

由于数据库变动，下载新版前，手机中如有旧版，请先卸载。

一、收藏夹整体介绍

1. 收藏夹的操作

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

添加收藏集

修改收藏集

删除收藏集

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

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

删除与数据同步

组件加入收藏集

收藏集支持多选

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的问题，期待与你的交流与切磋。