基於 Flutter 的CityPickers 城市選擇器

寫在前面

最近在跟着flutter-go項目學習研究, 發現有一位同窗提出了一條建議

@songshitong 有flutter的城市選擇組件(city picker)嗎 android和iOS風格的？ 相似於這個

我就在本地簡單的去模擬實現了一下. 發現代碼邏輯部份比較簡單. 因此就簡單的封裝成一個package. 發佈到了Dart Pub上邊, 歡迎你們扔板磚~

效果

暫時實現了三種

• ios風格, 底部彈窗
• android&ios 全屏三級聯動選擇器
• 支持右側菜單字母分類篩選的城市級選擇器

功能

• 支持配置主題顏色
• 支持初始化選擇地區, 能夠是省市縣任何層級
• 支持配置顯示模式, 能夠只選擇省,只選擇市...六種顯示方式

使用方法

最初設計的時候. 想着以Widget的方式, 扔給你們使用. 但是試了幾種方式, 使用起來都比較麻煩. 後來借鑑了一下函數式編程的思想, 最終定爲經過靜態函數調用:

import 'package:city_pickers/city_pickers.dart';
...
show() async {
    Result result = await CityPickers.showCityPicker(
      context: context,
    );
    // type 2
    Result result2 = await CityPickers.showFullPageCityPicker(
      context: context,
    );
}
複製代碼

CityPickers 靜態方法

Name	Type	Desc
showCityPicker	Function	呼出彈出層,顯示多級選擇器
showFullPageCityPicker	Function	呼出一層界面, 顯示多級選擇器
showCitiesSelector	Function	呼出一層, 顯示支持字母定位城市選擇器

showCityPicker 參數說明

Name	Type	Default	Desc
context	BuildContext	null	上下文對象
theme	ThemeData	Theme.of(context)	主題, 能夠自定義
locationCode	String	110000	初始化地址信息, 能夠是省, 市, 區的地區碼
height	double	300	彈出層的高度, 太高或者太低會致使容器報錯
showType	ShowType	ShowType.pca	三級聯動, 顯示類型
barrierOpacity	double	0.5	彈出層的背景透明度, 應該是大於0, 小於1
barrierDismissible	bool	true	是否能夠經過點擊彈出層背景, 關閉彈出層

showFullPageCityPicker 參數說明

Name	Type	Default	Desc
context	BuildContext	null	上下文對象
theme	ThemeData	Theme.of(context)	主題, 能夠自定義
locationCode	String	110000	初始化地址信息, 能夠是省, 市, 區的地區碼
showType	ShowType	ShowType.pca	三級聯動, 顯示類型

具體使用方式, 能夠參考本地運行示例git:city_pickers

what is flutter-go

flutter-go:flutter 開發者幫助 APP，包含 flutter 經常使用 140+ 組件的demo 演示與中文文檔