4、Flutter Widget(IOS Style) - CupertinoPicker、CupertinoDatePicker等;

  iOS风格的选择器。在滚动轮上显示其子窗口小部件以供选择,并在当前所选项目更改时回调。可以与showModalBottomSheet一起使用,以在屏幕底部以模态方式显示选择,和ListWheelScrollView功能基本一致。

CupertinoPicker

void _showCupertinoPicker(BuildContext cxt){
    final picker  = CupertinoPicker(itemExtent: 20,
        onSelectedItemChanged: (position){
         print('The position is $position');
        }, children: [
          Text("0"),
          Text("1"),
          Text("2"),
          Text("3"),
          Text("4"),
        ]);

    showCupertinoModalPopup(context: cxt, builder: (cxt){
      return Container(
        height: 200,
        child: picker,
      );
    });
  }
复制代码

  其构造方法如下:

      CupertinoPicker({
    Key key,
    this.diameterRatio = _kDefaultDiameterRatio,
    this.backgroundColor = _kDefaultBackground,
    this.offAxisFraction = 0.0,
    this.useMagnifier = false,
    this.magnification = 1.0,
    this.scrollController,
    @required this.itemExtent,
    @required this.onSelectedItemChanged,
    @required List children,
    bool looping = false,
  }) 
复制代码

  double diameterRatio:此拾取器高度与模拟圆柱直径之间的相对比率。较小的值在可滚动轮中产生更明显的曲率。详细信息ListWheelScrollView.diameterRatio,不能为null,默认为“1.1”以直观地模仿iOS。

  double itemExtent 所有子控件的均匀高度。所有孩子都将获得BoxConstraints以匹配这个确切的高度。 不能为空,必须大于0。

  ValueChanged onSelectedItemChanged滚动选中的回掉。

  children子Widget数组。

  looping参数决定子列表是否循环并且可以无限滚动。如果设置为true,滚动列表末尾将使列表循环回到开头。 如果设置为false,则列表将在到达结尾或开头时停止滚动。

CupertinoDatePicker

  构造一个iOS风格的日期选择器。

  void _showCupertinoDatePicker(BuildContext cxt){
    final picker =CupertinoDatePicker(onDateTimeChanged: (date){
      print("the date is ${date.toString()}");
    },
      initialDateTime: DateTime(1995),
    );

    showCupertinoModalPopup(context: cxt, builder: (cxt){
      return Container(
        height: 200,
        child: picker,
      );
    });
  }
复制代码

  其构造方法如下:

CupertinoDatePicker({
    this.mode = CupertinoDatePickerMode.dateAndTime,
    @required this.onDateTimeChanged,
    // ignore: always_require_non_null_named_parameters
    DateTime initialDateTime,
    this.minimumDate,
    this.maximumDate,
    this.minimumYear = 1,
    this.maximumYear,
    this.minuteInterval = 1,
    this.use24hFormat = false,
  })
复制代码

  modeCupertinoDatePickerMode中列出的模式之一,默认为CupertinoDatePickerMode.dateAndTime

  onDateTimeChanged是在所选日期或时间更改时调用的回调,且不能为null。

  initialDateTime是选择器的初始日期时间。 默认为当前日期和时间,不得为null。 当前必须符合minimumDatemaximumDateminimumYearmaximumYear中设置的区间。

  use24hFormat决定是否使用24小时格式。 默认为false。

CupertinoTimerPicker

void _showCupertinoTimerPicker(BuildContext cxt){
   final picker = CupertinoTimerPicker(onTimerDurationChanged: (duration){
     print('the time is $duration');
   });

  showCupertinoModalPopup(context: cxt, builder: (cxt){
    return Container(
      height: 200,
      child: picker,
    );
  });
}
复制代码

其使用方法和CupertinoPickerCupertinoDatePicker基本类似。

你可能感兴趣的:(4、Flutter Widget(IOS Style) - CupertinoPicker、CupertinoDatePicker等;)