Flutter橫向樹形選擇器實(shí)現(xiàn)效果及完整代碼
最近項(xiàng)目里需要做一個多級分類選擇，類似淘寶那種"電子產(chǎn)品 > 手機(jī) > iPhone"的效果。找了一圈沒看到合適的輪子，索性自己擼一個。
先看效果
大概就是這個樣子，點(diǎn)擊一級會展開下一級，頂部有面包屑導(dǎo)航可以回退，支持搜索。
為什么要橫向？
說實(shí)話一開始我是想用縱向折疊的方案的，但產(chǎn)品覺得層級多了以后太丑了，而且用戶不知道自己選到第幾層。后來看了一些競品，發(fā)現(xiàn)橫向展開+面包屑這個方案確實(shí)清晰很多，用戶一眼就知道自己選了什么。
核心思路
其實(shí)整個組件的核心就是維護(hù)兩個狀態(tài)：
_breadcrumbs- 面包屑路徑，記錄用戶點(diǎn)了哪些父級_currentOptions- 當(dāng)前顯示的選項(xiàng)列表
每次點(diǎn)擊一個有子項(xiàng)的選項(xiàng)，就把它加到面包屑里，然后把它的 children 設(shè)成當(dāng)前選項(xiàng)列表。點(diǎn)面包屑就反向操作，截取數(shù)組就行。
/// 導(dǎo)航到子項(xiàng)
void _navigateToChildren(T parent) {
setState(() {
_breadcrumbs.add(parent);
_currentOptions = parent.children?.map((child) => child as T).toList() ?? [];
});
}
/// 導(dǎo)航到面包屑指定位置
void _navigateToBreadcrumb(int index) {
setState(() {
_breadcrumbs = _breadcrumbs.sublist(0, index + 1);
_currentOptions = _breadcrumbs[index].children?.map((child) => child as T).toList() ?? [];
});
}
回顯這個坑
最麻煩的其實(shí)是回顯，就是用戶之前選過的值要顯示出來。這就需要在整棵樹里遞歸查找，找到后把完整路徑構(gòu)建出來：
/// 遞歸查找項(xiàng)目路徑
bool _findItemPath(List<T> options, T target, List<T> path) {
for (var option in options) {
path.add(option);
if (option.value == target.value) {
return true;
}
if (option.children != null && option.children!.isNotEmpty) {
List<T> children = option.children!.map((child) => child as T).toList();
if (_findItemPath(children, target, path)) {
return true;
}
}
path.removeLast(); // 回溯
}
return false;
}
這個回溯算法挺經(jīng)典的，找到了就一路返回 true，沒找到就把剛加的節(jié)點(diǎn)刪掉繼續(xù)找下一個。
搜索功能
搜索功能也是后來加的，需求是只搜葉子節(jié)點(diǎn)（最終可選的項(xiàng)），然后顯示完整路徑讓用戶知道這個選項(xiàng)在哪。
void _searchInTree(List<T> options, String query, List<T> results, List<T> path) {
for (var option in options) {
final bool isLeaf = option.children == null || option.children!.isEmpty;
final bool nameMatches = option.name?.toLowerCase().contains(query) == true;
if (isLeaf && nameMatches) {
results.add(option);
}
// 遞歸搜索子項(xiàng)
if (option.children != null && option.children!.isNotEmpty) {
List<T> newPath = List.from(path)..add(option);
List<T> children = option.children!.map((child) => child as T).toList();
_searchInTree(children, query, results, newPath);
}
}
}
數(shù)據(jù)結(jié)構(gòu)設(shè)計
為了通用性，我定義了一個抽象類，業(yè)務(wù)方繼承一下就能用：
abstract class OptionChildrenItem {
String? name;
String? value;
List<OptionChildrenItem>? children;
OptionChildrenItem({this.name, this.value, this.children});
}
也提供了一個默認(rèn)實(shí)現(xiàn) OptionChildrenItemImpl，不想自定義可以直接用。
使用方式
用起來很簡單，調(diào)一個方法就行：
final result = await showHorizontalTreePopup(
context: context,
options: _demoOptions,
title: '請選擇分類',
themeColor: Colors.blue,
showSearch: true, // 要不要搜索框
showConfirmButton: true, // 要不要確定按鈕，false 的話選中直接返回
onConfirm: (selectedItem) {
print('選中了: ${selectedItem?.name}');
},
);
一些細(xì)節(jié)處理
底部安全區(qū) - iPhone 那個小橫條要留出來，用
MediaQuery.of(context).padding.bottom泛型支持 - 整個組件是泛型的，
T extends OptionChildrenItem，這樣業(yè)務(wù)方自己的數(shù)據(jù)模型也能用兩種模式 -
showConfirmButton為 true 時需要點(diǎn)確定才返回，為 false 時點(diǎn)擊葉子節(jié)點(diǎn)直接返回，適合不同場景
總結(jié)
整體下來代碼量不大，700 多行，核心邏輯就是維護(hù)面包屑和當(dāng)前列表這兩個狀態(tài)。最坑的地方是泛型轉(zhuǎn)換，Dart 的泛型協(xié)變有點(diǎn)坑，children 那里需要手動 map 轉(zhuǎn)一下類型。
有需要的可以直接用，pub.dev 搜 horizontal_tree_selector 就行：
dependencies: horizontal_tree_selector: ^0.0.1
到此這篇關(guān)于Flutter橫向樹形選擇器實(shí)現(xiàn)效果及完整代碼的文章就介紹到這了,更多相關(guān)Flutter橫向樹形選擇器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
昨天在完善項(xiàng)目的時候，需要進(jìn)行單元測試，在Eclipse環(huán)境中進(jìn)行是很簡單的，但是在Android Studio環(huán)境中進(jìn)行單元測試，在國內(nèi)找了很多資料，大都是人云亦云，本文發(fā)布出來供大家學(xué)習(xí)參考。2016-08-08
ERROR/AndroidRuntime(17121)的問題解決
ERROR/AndroidRuntime(17121)的問題解決，需要的朋友可以參考一下2013-05-05
本篇文章是對Android中的對話列表管理進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-05-05
Kotlin構(gòu)造函數(shù)與成員變量和init代碼塊執(zhí)行順序詳細(xì)講解
這篇文章主要介紹了Kotlin構(gòu)造函數(shù)與成員變量和init代碼塊執(zhí)行順序，kotlin里面的構(gòu)造函數(shù)分為主構(gòu)造函數(shù)和次構(gòu)造函數(shù)。主構(gòu)造函數(shù)只能有一個，次構(gòu)造函數(shù)個數(shù)不限制，可以有一個或者多個2022-11-11
Android中new Notification創(chuàng)建實(shí)例的最佳方法
這篇文章主要介紹了Android中new Notification創(chuàng)建實(shí)例的最佳方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
這篇文章主要給大家介紹了關(guān)于Android為View添加拖放效果的相關(guān)資料,實(shí)現(xiàn)View的拖拽其實(shí)原理很簡單,無非就是獲取手指的位移信息,然后view根據(jù)手指的位移信息,移動對應(yīng)的位置,需要的朋友可以參考下2022-02-02
如何使用SurfaceView實(shí)現(xiàn)魚兒游動動畫
這篇文章主要教大家如何使用SurfaceView實(shí)現(xiàn)魚兒游動動畫，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
這篇文章主要介紹了Android handler的相關(guān)資料,涉及到handler相關(guān)知識，需要的朋友可以參考下2016-02-02
這篇文章主要介紹了Android編程獲取手機(jī)屏幕分辨率大小的方法,涉及Android基于getWindowManager()方法獲取手機(jī)屏幕相關(guān)信息的使用技巧,需要的朋友可以參考下2016-02-02
Android仿QQ復(fù)制昵稱效果的實(shí)現(xiàn)方法
這篇文章主要介紹了Android仿QQ復(fù)制昵稱效果的實(shí)現(xiàn)方法，主要依賴的是一個開源項(xiàng)目,需要的朋友可以參考下2019-05-05