Listen for sliding events in the flitter

At the mobile end, the original pointer event model of each platform or UI system is basically the same, that is, a complete event is divided into three stages: finger press, finger move, and finger lift, and higher-level gestures (such as click, double click, drag, etc.) are based on these original events.

The listener widget can be used to listen to the original touch event in fluent. It is also a functional widget.

Common properties of listener

Listener({
 Key key,this.onPointerDown,//手指按下回调
 this.onPointerMove,//手指移动回调
 this.onPointerUp,//手指抬起回调
 this.onPointerCancel,//触摸事件取消回调
 this.behavior = HitTestBehavior.defertochild,//在命中测试期间如何表现
 Widget child
})

The usage is as follows:

Listener(
 onPointerDown: (dowPointEvent){},onPointerMove: (movePointEvent){},onPointerUp: (upPointEvent){},child: Container(
   child: Text('Listener的监听')
 )
);

Usage scenario 1: pull-down refresh and pull-up load

If the drop-down refresh is implemented, you must wrap a layer of refreshindicator outside the listview with the help of refreshindicator, and then implement the onrefresh method in the refreshindicator. There are many monitoring methods, so I won't elaborate them one by one. Here we mainly talk about the two methods often used.

 /// 下拉刷新，这里必须使用async，不然会报错
 Future<Null> _refresh() async {
  final Completer<Null> completer = new Completer<Null>();
  _dataList.clear(); // 清空数据
  setState(() {
   page = 1;
  });
  loadData(completer); // 加载数据
  return completer.future;
 }

To load more, you need to listen to the listview, so you need to set the listener and initialize the listener in the state.

ScrollController _scrollController = new ScrollController(); // 初始化滚动监听器，加载更多使用

1. Direct monitoring_ The scrollcontroller determines whether more data needs to be loaded according to whether it slides to the bottom

_scrollController.addListener(() {
   // 如果滑动到底部
   if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
      // do something
   }
 });

RefreshIndicator(
  onRefresh: _refresh,// 下拉刷新
  child: ListView.builder(
    padding: EdgeInsets.only(bottom: Adapt.px(40)),shrinkWrap: true,controller: _scrollController,physics: AlwaysScrollableScrollPhysics(),itemCount: _dataList.length,itemBuilder: (context,item) {
       return listCard(_dataList[item]);
     }
   )
)

2. Use the above listener to listen, monitor the sliding distance through the listener's onpointermove (finger sliding on the screen), and load more data when sliding to the bottom

new Listener(
  onPointerMove: (event) {
    var position = event.position.distance;
    var detal = position - lastDownY;
    if (detal > 0) {
     print("================向下移动================");
    } else {
      // 所摸点长度 +滑动距离 = IistView的长度 说明到达底部
      print("================向上移动================");
      print("scrollController==滑动距离=======${(position - downY)}");
      var scrollExtent = scrollController.position.maxScrollExtent;
      print("scrollController==ListView最大长度===${scrollExtent}");
      print("scrollController==所摸点长度===${scrollController.offset}");
      print("scrollController==所摸点离屏幕距离===${position}");
      var result = scrollController.offset +(position - downY).abs();
      if (result >= scrollExtent) {
        print("scrollController====到达底部");
         lastListLength = scrollExtent;
         loadMore(); // 加载更多数据
       }
    }
   lastDownY = position;
   },child: new ListView.builder(
    controller: scrollController,itemCount: datas == null ? 0 : datas.length,itemBuilder: (BuildContext context,int index) {
        return Container(child: Text('列表${index}') )
    }
   )
 );

Use scenario 2: hide the keyboard when sliding the screen

In daily use of textfield, if the pop-up keyboard is a button submission, sometimes the keyboard will not be automatically hidden and closed, which can trigger the closing of the pop-up keyboard.

FocusScope.of(context).requestFocus(FocusNode());
// 或者
FocusNode _foucusNode = new FocusNode();
_foucusNode.unfocus();
使用 Listener 监听，在滑动屏幕的时候关闭键盘

Listener(
  onPointerMove: (movePointEvent){
    _foucusNode.unfocus();
  },child: return SingleChildScrollView(
    controller: _scrollController,child: Column(
     children: <Widget>[
      // some widget
     ],)
  )
)

The above is the whole content of this article. I hope it will help you in your study, and I hope you will support us a lot.