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<Widget> children,
    bool looping = false,
  }) 
复制代码

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

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

  ValueChanged<int> 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基本类似。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值