【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<void> toggleCategory(int categoryId, int widgetId);

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

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

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

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

  //更新收藏集
  Future<bool> updateCategory(CategoryPo categoryPo);
  
  //删除收藏集
  Future<void> deleteCategory(int id);
  
  //查看某个组件在哪些收藏集中
  Future<List<int>> 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的问题，期待与你的交流与切磋。

@张风捷特烈 2020.04.024 未允禁转
我的公众号:编程之王
联系我--邮箱:1981462002@qq.com --微信:zdl1994328
~ END ~

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：cloud.tencent.com/developer/s…