Flutter选择器插件flutter_picker的使用

flutter_picker

flutter_picker 是一个Flutter插件，包含数字选择器（NumberPicker）、日期时间选择器（DateTimePicker）、数组选择器（ArrayPicker）以及默认的联动选择器（linkage Picker）。它提供了灵活的参数以满足各种需求。同时，你可以通过自定义适配器来扩展更多功能。

支持平台

• Android
• iOS
• Windows
• macOS
• Linux
• Web

如何使用

1. 添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_picker:
    git: git://github.com/yangyxd/flutter_picker.git

2. 导入库

在 Dart 文件中导入 flutter_picker 库：

import 'package:flutter_picker/flutter_picker.dart';

3. 使用示例

3.1 基础使用

void showPicker(BuildContext context) {
  Picker picker = new Picker(
    adapter: PickerDataAdapter<String>(pickerdata: new JsonDecoder().convert(PickerData)),
    changeToFirst: true,
    textAlign: TextAlign.left,
    columnPadding: const EdgeInsets.all(8.0),
    onConfirm: (Picker picker, List value) {
      print(value.toString());
      print(picker.getSelectedValues());
    }
  );
  picker.show(_scaffoldKey.currentState);
}

3.2 模态框使用

void showPickerModal(BuildContext context) {
  new Picker(
    adapter: PickerDataAdapter<String>(pickerdata: new JsonDecoder().convert(PickerData)),
    changeToFirst: true,
    hideHeader: false,
    onConfirm: (Picker picker, List value) {
      print(value.toString());
      print(picker.adapter.text);
    }
  ).showModal(this.context);
}

3.3 图标选择器

void showPickerIcons(BuildContext context) {
  new Picker(
    adapter: PickerDataAdapter(data: [
      new PickerItem(text: Icon(Icons.add), value: Icons.add, children: [
        new PickerItem(text: Icon(Icons.more)),
        new PickerItem(text: Icon(Icons.aspect_ratio)),
        new PickerItem(text: Icon(Icons.android)),
        new PickerItem(text: Icon(Icons.menu)),
      ]),
      new PickerItem(text: Icon(Icons.title), value: Icons.title, children: [
        new PickerItem(text: Icon(Icons.more_vert)),
        new PickerItem(text: Icon(Icons.ac_unit)),
        new PickerItem(text: Icon(Icons.access_alarm)),
        new PickerItem(text: Icon(Icons.account_balance)),
      ]),
      // 其他图标项...
    ]),
    title: new Text("Select Icon"),
    onConfirm: (Picker picker, List value) {
      print(value.toString());
      print(picker.getSelectedValues());
    }
  ).show(_scaffoldKey.currentState);
}

3.4 数字选择器

void showPickerNumber(BuildContext context) {
  new Picker(
    adapter: NumberPickerAdapter(data: [
      NumberPickerColumn(begin: 0, end: 999),
      NumberPickerColumn(begin: 100, end: 200),
    ]),
    delimiter: [
      PickerDelimiter(child: Container(
        width: 30.0,
        alignment: Alignment.center,
        child: Icon(Icons.more_vert),
      ))
    ],
    hideHeader: true,
    title: new Text("Please Select"),
    onConfirm: (Picker picker, List value) {
      print(value.toString());
      print(picker.getSelectedValues());
    }
  ).showDialog(context);
}

3.5 日期选择器

void showPickerDate(BuildContext context) {
  Picker(
    hideHeader: true,
    adapter: DateTimePickerAdapter(),
    title: Text("Select Data"),
    selectedTextStyle: TextStyle(color: Colors.blue),
    onConfirm: (Picker picker, List value) {
      print((picker.adapter as DateTimePickerAdapter).value);
    }
  ).showDialog(context);
}

3.6 日期时间选择器

void showPickerDateTime(BuildContext context) {
  Picker(
    adapter: DateTimePickerAdapter(
      type: PickerDateTimeType.kMDYHM_AP,
      isNumberMonth: true,
      yearSuffix: "年",
      monthSuffix: "月",
      daySuffix: "日",
      hourSuffix: "時",
      minuteSuffix: "分",
      secondSuffix: "秒",
      minValue: DateTime.now(),
      minuteInterval: 30,
    ),
    title: Text("Select DateTime"),
    textAlign: TextAlign.right,
    selectedTextStyle: TextStyle(color: Colors.blue),
    delimiter: [
      PickerDelimiter(
          column: 5,
          child: Container(
            width: 16.0,
            alignment: Alignment.center,
            child: Text(':', style: TextStyle(fontWeight: FontWeight.bold)),
            color: Colors.white,
          ))
    ],
    footer: Container(
      height: 50.0,
      alignment: Alignment.center,
      child: Text('Footer'),
    ),
    onConfirm: (Picker picker, List value) {
      print(picker.adapter.text);
    },
    onSelect: (Picker picker, int index, List selected) {
      setState(() {
        stateText = picker.adapter.toString();
      });
    }
  ).showBottomSheet(context);
}

PickerData 示例

数组

const PickerData2 = '''
[
    [
        1,
        2,
        3,
        4
    ],
    [
        11,
        22,
        33,
        44
    ],
    [
        "aaa",
        "bbb",
        "ccc"
    ]
]
''';

联动

const PickerData = '''
[
    {
        "a": [
            {
                "a1": [
                    1,
                    2,
                    3,
                    4
                ]
            },
            {
                "a2": [
                    5,
                    6,
                    7,
                    8
                ]
            },
            {
                "a3": [
                    9,
                    10,
                    11,
                    12
                ]
            }
        ]
    },
    {
        "b": [
            {
                "b1": [
                    11,
                    22,
                    33,
                    44
                ]
            },
            {
                "b2": [
                    55,
                    66,
                    77,
                    88
                ]
            },
            {
                "b3": [
                    99,
                    1010,
                    1111,
                    1212
                ]
            }
        ]
    },
    {
        "c": [
            {
                "c1": [
                    "a",
                    "b",
                    "c"
                ]
            },
            {
                "c2": [
                    "aa",
                    "bb",
                    "cc"
                ]
            },
            {
                "c3": [
                    "aaa",
                    "bbb",
                    "ccc"
                ]
            }
        ]
    }
]
''';