flutter_pickers

github：https://github.com/longer96/flutter_pickers

歡迎Fork & pr貢獻(xiàn)您的代碼十籍，大家共同學(xué)習(xí)

Example

Web版在線Demo

gif1.gif	gif2.gif
gif3.gif	gif4.gif

用法

1.Depend

dependencies: 
    flutter_pickers: ^1.0.0

2.Get

$ flutter packages get

3.Install

import 'package:flutter_pickers/pickers.dart';

目錄

• flutter_pickers
  • 地址選擇器
    • 簡單使用
    • 更多用法
    • 更多方法
  • 單項(xiàng)選擇器
    • 簡單使用
    • 內(nèi)置數(shù)據(jù)
  • 多項(xiàng)選擇器
  • 時間選擇器
    • 簡單使用
    • 更多方法
    • 參數(shù)說明
    • tip
  • 樣式
    • 內(nèi)置樣式
    • 自定義樣式

地址選擇器

Pickers.showAddressPicker()

• 區(qū)域數(shù)據(jù)來源
• 請戳我查看demo代碼

• 支持三級聯(lián)動
• 支持自定義顏色蛆封、大小等樣式
• 支持顯示 '全部' 選項(xiàng)
• 支持只選擇 省市 2級
• 支持查詢城市碼
• 實(shí)時回調(diào)

pic1.png	pic2.png
三級選擇器動圖	二級靜態(tài)圖

簡單使用

String initProvince = '四川省', initCity = '成都市', initTown = '雙流區(qū)';
Widget _checkLocation() {
return InkWell(
    onTap: () {
      Pickers.showAddressPicker(
        context,
        initProvince: initProvince,
        initCity: initCity,
        initTown: initTown,
        onConfirm: (p, c, t) {
          setState(() {
            initProvince = p;
            initCity = c;
            initTown = t;
          });
        },
      );
    },
    child: Text('$initProvince - $initCity - $initTown'));
}

• initTown : 不設(shè)置或者設(shè)置為null ，不顯示區(qū)級

更多用法

demo address_picker_page.dart

AddressPicker.showPicker(
  context,
  initProvince: locations2[0],
  initCity: locations2[1],
  initTown: locations2[2],
  showTitlebar: true,
  menu: _headMenuView,
  menuHeight: 36.0,
  title: title,
  cancelWidget: _cancelButton,
  commitWidget: _commitButton,
  headDecoration: headDecoration,
  addAllItem: false,
  textColor: Colors.white,
  backgroundColor: Colors.grey[800],
  onConfirm: (p, c, t) {},
);

pic3.png

更多方法

/// 根據(jù)城市名 查詢城市code(有先后順序)
List<String> cityCode =  Locations.getTownsCityCode("四川省","成都市","錦江區(qū)");
return [510000,510100,510104]  or  [510000,510000]  or [510000]  or  []


/// 通過城市code 查詢城市名(有先后順序)
List<String> cityName =  Locations.getCityNameByCode("510000","510100","510104");
return [四川省, 成都市, 錦江區(qū)]  or  [四川省, 成都市]  or [四川省] or []

單項(xiàng)選擇器

Pickers.showSinglePicker()請戳我查看demo代碼

• 單選和多選支持?jǐn)?shù)據(jù)源混傳 num string

pic4.png	pic5.png	pic6.png

簡單使用.

String initData = 'PHP';
Widget _demo() {
    return InkWell(
    onTap: () {
      Pickers.showSinglePicker(context,
          data: ['PHP', 'JAVA', 'C++', 'Dart', 'Python', 'Go'],
          selectData: initData,
          onConfirm: (p) {
            setState(() {
              initData = p;
            });
          }, onChanged: (p) => print('數(shù)據(jù)發(fā)生改變：$p'));
    },
    child: Text('$initData'));
}

內(nèi)置數(shù)據(jù)

可直接傳給 data:PickerDataType.sex

• sex // 性別
• education // 學(xué)歷
• subject // 學(xué)科
• constellation // 星座
• zodiac // 生肖
• ethnicity // 民族

多項(xiàng)選擇器

Pickers.showMultiplePicker() 請戳我查看demo代碼

pic7.png	pic8.png

示例代碼

  final timeData = [
    ['上午', '下午'],
    List.generate(12, (index) => (index + 1).toString()).toList(),
    List.generate(60, (index) => index.toString()).toList(),
    List.generate(60, (index) => index.toString()).toList(),
  ];

  void _showDemo(){
    Pickers.showMultiplePicker(
      context,
      data: timeData,
      selectData: timeData2Select,
      suffix: ['', '時', '分', '秒'],
      onConfirm: (p) {
        print('longer >>> 返回?cái)?shù)據(jù)類型：${p.map((x) => x.runtimeType).toList()}');
      },
    );
  }

時間選擇器

Pickers.showDatePicker() 請戳我查看demo代碼

• 16種模式「年月日時分秒」
• 自定義后綴
• 最大|最小 時間
• 自定義顯示樣式

pic9.png	pic10.png	pic11.png
pic12.png	pic13.png	pic14.png

簡單使用..

Widget demo() {
    return FlatButton(
    onPressed: () {
      Pickers.showDatePicker(
        context,
        onConfirm: (p) {
          print('longer >>> 返回?cái)?shù)據(jù)：$p');
        },
        // onChanged: (p) => print(p),
      );
    },
    child: Text('Demo'));
}

更多方法.

    Pickers.showDatePicker(
      context,
      // 模式惨篱，詳見下方
      mode: DateMode.HMS,
      // 后綴 默認(rèn)Suffix.normal()，為空的話Suffix()
      suffix: Suffix(hours: ' 小時', minutes: ' 分鐘', seconds: ' 秒'),
      // 樣式  詳見下方樣式
      pickerStyle: pickerStyle,
      // 默認(rèn)選中
      selectDate: PDuration(hour: 18, minute: 36, second: 36),
      minDate: PDuration(hour: 12, minute: 38, second: 3),
      maxDate: PDuration(hour: 12, minute: 40, second: 36),
      onConfirm: (p) {
        print('longer >>> 返回?cái)?shù)據(jù)：$p');
      },
      // onChanged: (p) => print(p),
    );

參數(shù)說明

• PDuration()

selectDate围俘，minDate砸讳，maxDate 和返回的數(shù)據(jù)類型 都是PDuration()

    // 可以自定義設(shè)置年月日時分秒
    PDuration(year: 2020, month: 1, day: 4, hour: 12, minute: 40, second: 36);
    // 設(shè)置DateTime類型
    PDuration.parse(DateTime.parse('20210139'));
    PDuration.now();

• DateMode
  時間選擇器所顯示樣式

  /// 時間選擇器 所顯示樣式
  enum DateMode {
    /// 【yyyy-MM-dd HH:mm:ss】年月日時分秒
    YMDHMS,
    /// 【yyyy-MM-dd HH:mm】年月日時分
    YMDHM,  
    /// 【yyyy-MM-dd HH】年月日時
    YMDH,  
    /// 【yyyy-MM-dd】年月日
    YMD,  
    /// 【yyyy-MM】年月
    YM,  
    /// 【yyyy】年
    Y,  
    /// 【MM-dd HH:mm:ss】月日時分秒
    MDHMS,  
    /// 【MM-dd HH:mm】月日時分
    MDHM,  
    /// 【MM-dd HH:mm】月日時
    MDH,  
    /// 【MM-dd】月日
    MD,  
    /// 【HH:mm:ss】時分秒
    HMS,  
    /// 【HH:mm】時分
    HM,  
    /// 【mm:ss】分秒
    MS,  
    /// 【ss】秒
    S,  
    /// 【MM】月
    M,  
    /// 【HH】時
    H
  }

tip

• 如果用到了日期，selectData需要傳入年界牡，不然無法計(jì)算簿寂，如果沒有，會默認(rèn)當(dāng)前年
• 當(dāng)只有單列數(shù)據(jù)宿亡，min|max限制不產(chǎn)生關(guān)聯(lián) 只針對單列item限制常遂，比如 maxDate: day=3, minDate: day=10, 那么day只顯示3-10之間
• 如果minDate:year: 2020, month: 2, day: 10, 只顯示2020年2月10日之后的
• minDate|maxDate 的YMD和HMS 沒有關(guān)聯(lián)！ 沒有關(guān)聯(lián)挽荠！比如設(shè)置maxDate:year: 2020, month: 2, day: 10, hour:8克胳，不是2020年2月10日8時之后的時間

樣式

內(nèi)置樣式

style_picker_page.dart 請戳我查看demo代碼
default_style.dart 源碼

• 以下4種樣式是使用 PickerStyle 類進(jìn)行封裝的。
• 都內(nèi)置了夜間模式圈匆，如 NoTitleStyle.dark()
• 除了NoTitleStyle, 其它的樣式可以傳入
  • haveRadius： 是否圓角
  • title： 標(biāo)題
  • color： 確定按鈕顏色

s1-1.png	s1-2.png
默認(rèn)樣式：DefaultPickerStyle()	默認(rèn)樣式(暗色)：DefaultPickerStyle.dark()
s2-1.png	s2-2.png
無標(biāo)題樣式：NoTitleStyle()	無標(biāo)題樣式(暗色)：NoTitleStyle.dark()
s3-1.png	s3-2.png
關(guān)閉按鈕樣式：ClosePickerStyle()	關(guān)閉按鈕樣式(暗色)：ClosePickerStyle.dark()
s4-1.png	s4-2.png
圓角按鈕樣式：RaisedPickerStyle()	圓角按鈕樣式(暗色)：RaisedPickerStyle.dark()

自定義樣式

style_picker_page.dart 請戳我查看demo代碼
picker_style.dart 樣式基類

style_mark.png

/// [showTitleBar] 是否顯示頭部（選擇器以上的控件） 默認(rèn)：true
/// [menu] 頭部和選擇器之間的菜單widget漠另，默認(rèn)null 不顯示
/// [title] 頭部 中間的標(biāo)題  默認(rèn)SizedBox() 不顯示
/// [pickerHeight] 選擇器下面 picker 的整體高度  固定高度：220.0
/// [pickerTitleHeight]  選擇器上面 title 確認(rèn)、取消的整體高度  固定高度：44.0
/// [pickerItemHeight]  選擇器每個被選中item的高度：40.0
/// [menuHeight]  頭部和選擇器之間的菜單高度  固定高度：36.0
/// [cancelButton]  頭部的取消按鈕
/// [commitButton]  頭部的確認(rèn)按鈕
/// [textColor]  選擇器的文字顏色 默認(rèn)黑色
/// [backgroundColor]  選擇器的背景顏色 默認(rèn)白色
/// [headDecoration] 頭部Container 的Decoration   默認(rèn)：BoxDecoration(color: Colors.white)

class PickerStyle {}