基於 Flutter 的CityPickers 城市選擇器

美味的小布丁發表於2019-02-13
Flutter

寫在前面

最近在跟著flutter-go專案學習研究, 發現有一位同學提出了一條建議

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

我就在本地簡單的去模擬實現了一下. 發現程式碼邏輯部份比較簡單. 所以就簡單的封裝成一個package. 釋出到了Dart Pub上邊, 歡迎大家扔板磚~

效果

暫時實現了三種

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

功能

  • 支援配置主題顏色
  • 支援初始化選擇地區, 可以是省市縣任何層級
  • 支援配置顯示模式, 可以只選擇省,只選擇市...六種顯示方式
基於 Flutter 的CityPickers 城市選擇器 基於 Flutter 的CityPickers 城市選擇器 基於 Flutter 的CityPickers 城市選擇器

使用方法

最初設計的時候. 想著以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 演示與中文文件

相關文章