Flutter - 控件之 Picker

选择器picker，简单用于性别、省市地区、日期等选择功能。

CupertinoPicker

iOS风格的选择器，与showCupertinoModalPopup配合使用，在屏幕底部模态的显示选择器。
1、参数解析：

	CupertinoPicker({
        Key key,
        this.diameterRatio = _kDefaultDiameterRatio, //选择器高度与模拟圆柱直径比，默认1.1，视觉上类似iOS中picker
        this.backgroundColor = _kDefaultBackground, //选择器背景色，默认iOS版中灰色，可设置为null
        this.offAxisFraction = 0.0, //轴偏离系数
        this.useMagnifier = false, //使用放大镜与否，配合magnification值
        this.magnification = 1.0, //当前选中item与其他item相比放大倍数
        this.scrollController,
        @required this.itemExtent, //行高
        @required this.onSelectedItemChanged, //当前选中值改变时回调
        @required List<Widget> children, //所有可选择项
        bool looping = false, //滚动到头部或尾部是否循环滚动
        })

2、代码示例：

		Container(
            height: 200,
            child: CupertinoPicker(
              diameterRatio: 1.5,
              offAxisFraction: 0.2, //轴偏离系数
              useMagnifier: true, //使用放大镜
              magnification: 1.5, //当前选中item放大倍数
              itemExtent: 50, //行高
              backgroundColor: Colors.amber, //选中器背景色
              onSelectedItemChanged: (value) {
                print("value = $value, 性别：${pickerChildren[value]}");
              },
              children: pickerChildren.map((data) {
                return Center(
                  child: Text(data),
                );
              }).toList(),
            ),
          ),

3、效果图:

应用示例：选择性别

CupertinoPicker配合showCupertinoModalPopup（弹出iOS风格的模态窗口）使用实现选择性别功能
1、创建选择器：

  List pickerChildren = [
    "男",
    "女",
    "保密",
  ];
  int selectedValue = 0;
  String selectedGender = "男"; 
    //选择性别
  Widget _buildGenderPicker() {
    return CupertinoPicker(
      itemExtent: 40,
      onSelectedItemChanged: (value) {
        print("选择性别：${pickerChildren[value]}");
        print("$value");
        setState(() {
          selectedValue = value;
        });
      },
      children: pickerChildren.map((data) {
        return Text(data);
      }).toList(),
    );
  }

2、模态弹出：

  //点击选择性别
  void _didClickSelectedGender() {
    selectedValue = 0;
    showCupertinoModalPopup(
        context: context,
        builder: (BuildContext context) {
          return Container(
            height: 250,
            child: Column(
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    FlatButton(
                      color: Colors.white,
                      onPressed: () {
                        Navigator.pop(context);
                      },
                      child: Text("Cancle"),
                    ),
                    FlatButton(
                      color: Colors.white,
                      onPressed: () {
                        Navigator.pop(context);
                        setState(() {
                          selectedGender = pickerChildren[selectedValue];
                        });
                      },
                      child: Text("OK"),
                    ),
                  ],
                ),
                Expanded(
                  child: DefaultTextStyle(
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: 22,
                    ),
                    child: _buildGenderPicker(),
                  ),
                ),
              ],
            ),
          );
        });
  }

3、效果预览：