On the mobile terminal, 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 pressing, finger moving, and finger lifting, while higher-level gestures (such as clicking, double-clicking, dragging, etc.) are based on these original events.
The Listener widget can be used in Flutter to listen for original touch events, which is also a functional widget.
Common properties of Listener
| property | type | illustrate |
|---|---|---|
| onPointerDown | (PointerDownEvent event){} | Triggered when finger presses |
| onPointerMove | (PointerDownEvent event){} | Triggered when the finger slides |
| onPointerUp | (PointerDownEvent event){} | Triggered when fingers leave the screen |
| onPointerCancel | (PointerDownEvent event){} | Triggered when untouched |
Listener({
Key key,
, //Press the callback with your finger , //Finger move callback ,//Finger lifts up to call back ,//Touch event cancel callback = , //How to perform during hit test Widget child
})
The usage is as follows:
Listener(
onPointerDown: (dowPointEvent){},
onPointerMove: (movePointEvent){},
onPointerUp: (upPointEvent){},
child: Container(
child: Text('Listener')
)
);
Use scenario 1: Pull down to refresh, pull up to load
If you implement a pull-down refresh, you must use RefreshIndicator to wrap a layer of RefreshIndicator outside the listview, and then implement the onRefresh method in RefreshIndicator. There are many types of monitoring methods, so I won’t explain them one by one. Here we will mainly talk about the two methods that are often used.
/// Pull down to refresh, async must be used here, otherwise an error will be reported Future<Null> _refresh() async {
final Completer<Null> completer = new Completer<Null>();
_dataList.clear(); // Clear data setState(() {
page = 1;
});
loadData(completer); // Load data return ;
}
Loading more requires listening to ListView, so the listener needs to be set and the listener is initialized in State.
ScrollController _scrollController = new ScrollController(); // Initialize the scroll listener，Load more use
1. Listen directly to the _scrollController, and determine whether more needs to be loaded based on whether it slides to the bottom.
_scrollController.addListener(() {
// If slide to the bottom if (_scrollController. == _scrollController.) {
// do something
}
});
RefreshIndicator(
onRefresh: _refresh, // Pull down to refresh child: (
padding: (bottom: (40)),
shrinkWrap: true,
controller: _scrollController,
physics: AlwaysScrollableScrollPhysics(),
itemCount: _dataList.length,
itemBuilder: (context, item) {
return listCard(_dataList[item]);
}
)
)
2. Use the Listener above to monitor, and monitor the sliding distance through Listener's onPointerMove (slide your finger on the screen), and load more data when it slides to the bottom.
new Listener(
onPointerMove: (event) {
var position = ;
var detal = position - lastDownY;
if (detal > 0) {
print("================Move down================");
} else {
// Length of touched point + sliding distance = length of IistView. It means that it reaches the bottom print("================Move up================");
print("scrollController==Sliding distance=======${(position - downY)}");
var scrollExtent = ;
print("scrollController==ListViewMaximum length===${scrollExtent}");
print("scrollController==Length of touched point===${}");
print("scrollController==The distance from the touched point===${position}");
var result = +(position - downY).abs();
if (result >= scrollExtent) {
print("scrollController====Arrive at the bottom");
lastListLength = scrollExtent;
loadMore(); // Load more data }
}
lastDownY = position;
},
child: new (
controller: scrollController,
itemCount: datas == null ? 0 : ,
itemBuilder: (BuildContext context, int index) {
return Container(child: Text('List${index}') )
}
)
);
Scenario 2: When sliding the screen, hide the keyboard
When using TextField in daily life, if the keyboard pops up, sometimes the keyboard does not automatically hide and closes, which can trigger the closing of the pop-up keyboard.
(context).requestFocus(FocusNode());
// orFocusNode _foucusNode = new FocusNode();
_foucusNode.unfocus();
use Listener monitor，Turn off the keyboard while sliding the screen
Listener(
onPointerMove: (movePointEvent){
_foucusNode.unfocus();
},
child: return SingleChildScrollView(
controller: _scrollController,
child: Column(
children: <Widget>[
// some widget
],
)
)
)
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.