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

Melrose發表於2019-03-12
FlutteriOS

  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,
  })
複製程式碼

  mode是CupertinoDatePickerMode中列出的模式之一，預設為CupertinoDatePickerMode.dateAndTime。

  onDateTimeChanged是在所選日期或時間更改時呼叫的回撥，且不能為null。

  initialDateTime是選擇器的初始日期時間。 預設為當前日期和時間，不得為null。 當前必須符合minimumDate，maximumDate，minimumYear和maximumYear中設定的區間。

  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,
    );
  });
}
複製程式碼

其使用方法和CupertinoPicker和CupertinoDatePicker基本類似。

相關文章