重大更新篇是有重大功能支援是的相關文章,進行介紹,文尾會附帶這段時間的更新情況
前言
經過一週的更新,解決了不少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…