Flutter設計一個長按自動步進的按鈕

 

實現此功能需要3個觸發事件

1.識別長按開始

2.識別長按結束

3.在開始和結束之間,自動按時間間隔執行按鈕點按的操作

寫出對應的事件代碼

  final Observable timer =
      Observable.periodic(Duration(milliseconds: 100)).asBroadcastStream();
  final PublishSubject longPressGesBeganSignal = PublishSubject();
  final PublishSubject longPressGesEndedSignal = PublishSubject();

然后在initState中,對事件按需求進行變換

  @override
  void initState() {
    super.initState();

    longPressGesBeganSignal.flatMap((_) {
      return timer.takeUntil(longPressGesEndedSignal);
    }).listen(plusBtnOnclick);
  }

在build方法中,GestureDetector的實例需要在onLongPressStart和onLongPressEnd回調中,調用add方法為對應的PublishSubject實例添加事件

GestureDetector(
  behavior: HitTestBehavior.opaque,
  onTap: () {
    plusBtnOnclick(null);
  },
  onLongPressStart: (longPressEndDetails) {
    longPressGesBeganSignal.add('began');
  },
  onLongPressEnd: (longPressEndDetails) {
    longPressGesEndedSignal.add('end');
  },
  child: Container(
    child: Center(
      child: Text('+'),
    ),
  ),
),