寫(xiě)在前面
最近在跟著flutter-go項(xiàng)目學(xué)習(xí)研究, 發(fā)現(xiàn)有一位同學(xué)提出了一條建議
@songshitong 有flutter的城市選擇組件(city picker)嗎 android和iOS風(fēng)格的冤荆？
類似于這個(gè)
我就在本地簡(jiǎn)單的去模擬實(shí)現(xiàn)了一下. 發(fā)現(xiàn)代碼邏輯部份比較簡(jiǎn)單. 所以就簡(jiǎn)單的封裝成一個(gè)package. 發(fā)布到了Dart Pub上邊, 歡迎大家扔板磚~
效果
暫時(shí)實(shí)現(xiàn)了二種
- ios風(fēng)格, 底部彈窗
- android&ios 全屏三級(jí)聯(lián)動(dòng)選擇器
功能
- 支持配置主題顏色
- 支持初始化選擇地區(qū), 可以是省市縣任何層級(jí)
- 支持配置顯示模式, 可以只選擇省,只選擇市...六種顯示方式
<image src="https://user-gold-cdn.xitu.io/2019/2/13/168e749c4b75b09d?w=329&h=687&f=gif" style="wdith: 150px" />
<image src="https://user-gold-cdn.xitu.io/2019/2/13/168e74b336a1f172?w=329&h=687&f=gif&s=1007" style="wdith: 150px" />
使用方法
最初設(shè)計(jì)的時(shí)候. 想著以Widget的方式, 扔給大家使用. 可是試了幾種方式, 使用起來(lái)都比較麻煩. 后來(lái)借鑒了一下函數(shù)式編程的思想, 最終定為通過(guò)靜態(tài)函數(shù)調(diào)用:
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 靜態(tài)方法
| Name | Type | Desc |
|---|---|---|
| showCityPicker | Function | 呼出彈出層,顯示多級(jí)選擇器 |
| showFullPageCityPicker | Function | 呼出一層界面, 顯示多級(jí)選擇器 |
showCityPicker 參數(shù)說(shuō)明
| Name | Type | Default | Desc |
|---|---|---|---|
| context | BuildContext | null | 上下文對(duì)象 |
| theme | ThemeData | Theme.of(context) | 主題, 可以自定義 |
| locationCode | String | 110000 | 初始化地址信息, 可以是省, 市, 區(qū)的地區(qū)碼 |
| height | double | 300 | 彈出層的高度, 過(guò)高或者過(guò)低會(huì)導(dǎo)致容器報(bào)錯(cuò) |
| showType | ShowType | ShowType.pca | 三級(jí)聯(lián)動(dòng), 顯示類型 |
| barrierOpacity | double | 0.5 | 彈出層的背景透明度, 應(yīng)該是大于0, 小于1 |
| barrierDismissible | bool | true | 是否可以通過(guò)點(diǎn)擊彈出層背景, 關(guān)閉彈出層 |
showFullPageCityPicker 參數(shù)說(shuō)明
| Name | Type | Default | Desc |
|---|---|---|---|
| context | BuildContext | null | 上下文對(duì)象 |
| theme | ThemeData | Theme.of(context) | 主題, 可以自定義 |
| locationCode | String | 110000 | 初始化地址信息, 可以是省, 市, 區(qū)的地區(qū)碼 |
| showType | ShowType | ShowType.pca | 三級(jí)聯(lián)動(dòng), 顯示類型 |
具體使用方式, 可以參考本地運(yùn)行示例git:city_pickers
what is flutter-go
flutter-go:flutter 開(kāi)發(fā)者幫助 APP酬核，包含 flutter 常用 140+ 組件的demo 演示與中文文檔
