flutter好用的Widget(一):CupertinoPicker

简介

Cupertino (库比蒂诺)是一个地名,苹果电脑的全球总公司所在地。CupertinoPicker是一个ios风格的齿轮滚动的选择器,常用于日期地址选择。

效果图

flutter好用的Widget(一):CupertinoPicker_第1张图片
flutter好用的Widget(一):CupertinoPicker_第2张图片

用法

CupertinoPicker(
                  itemExtent: 28,
                  onSelectedItemChanged: (position) {
                    print('The position is $position');
                  },
                  children: getListWidgets(10,Constants.default_min_cycle_day)),
            ),

简单的使用只需实现以上三个参数:

  1. itemExtent :子项高度,选中位置的高度。
  2. children: 子widget组。
  3. onSelectedItemChanged: 滚动选择的回调,每次滚动,都会触发此回调,会将选中的子widget的position返回。

其他参数:

  1. diameterRatio:直径比,double类型。
    flutter好用的Widget(一):CupertinoPicker_第3张图片
  2. backgroundColor,背景颜色。
  3. offAxisFraction,轴偏移,默认是0.0。控制选中的子widget的左右偏移
    flutter好用的Widget(一):CupertinoPicker_第4张图片
  4. useMagnifier: 放大效果,默认false。
  5. magnification: 放大倍数,需先开启放大效果,此参数才有作用。
  6. scrollController:控制器
  7. squeeze:压缩,这个控制的children之间的空隙,和diameterRatio的效果有相似之处。
    flutter好用的Widget(一):CupertinoPicker_第5张图片

总结

flutter作为跨平台UI框架,最出色的莫过于快速构建出想要的UI效果。这个CupertinoPicker使用简单,操作方便。

你可能感兴趣的:(Flutter开发)