当前位置:
首页
文章
前端
详情

Flutter设计一个长按自动步进的按钮

Flutter设计一个长按自动步进的按钮

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('+'),
    ),
  ),
),

免责申明:本站发布的内容(图片、视频和文字)以转载和分享为主,文章观点不代表本站立场,如涉及侵权请联系站长邮箱:xbc-online@qq.com进行反馈,一经查实,将立刻删除涉嫌侵权内容。