Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "how to solve Flutter user-side problems", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to solve Flutter user-side problems" article.

Background

Nowadays, app basically provides an entrance for users to feedback questions, but there are generally two ways to provide feedback to users:

Directly input the expression in text, or take a screenshot

Direct recording video feedback

These two forms of feedback often lead to the following complaints:

User: it takes a lot of time and effort to enter text

Developer 1: what does user feedback mean if you don't understand it?

Developer 2: I probably understand what the user means, but I can't reproduce it offline.

Developer 3: watched the video recorded by the user, but I couldn't reproduce it offline, and I couldn't locate the problem.

So: in order to solve the above problems, we use a new set of ideas to design the online problem playback system.

Basic knowledge of Flutter gestures

If we want to record and play back flutter ui events, we must first understand the fundamentals of flutter ui gestures.

1. Flutter UI touch raw data Pointer

We can understand the gesture system in Flutter into two layers of concepts. The first layer of concept is raw touch data (pointer), which describes the time, type, location and movement of pointers on the screen (for example, touch, mouse and stylus). The second layer is gesture, which describes the semantic action composed of one or more original moving data. In general, the original touch data alone does not make any sense.

The original touch data is transmitted by the system to native,native and then to flutter through flutter view channel.

The API for receiving raw data from native by flutter is as follows:

Void _ handlePointerDataPacket (ui.PointerDataPacket packet) {/ / We convert pointer data to logical pixels so that e.g. The touch slop can be / / defined in a device-independent manner. _ pendingPointerEvents.addAll (PointerEventConverter.expand (packet.data, ui.window.devicePixelRatio)); if (! locked) _ flushPointerEventQueue ();} 2. Flutter UI collision test

When the screen receives the touch, dart Framework performs a collision test on your application to determine which views (renderobject) exist where the touch meets the screen. The touch event is then distributed to the innermost renderobject. Starting from the innermost renderobject, these events are bubbled up in the renderobject tree, and all the renderobject are finally traversed through the bubble. From this delivery mechanism, it is conceivable that the last one in the renderobject list is WidgetsFlutterBinding (strictly speaking, WidgetsFlutterBinding is not renderobject), and WidgetsFlutterBinding will be introduced later.

Void _ handlePointerEvent (PointerEvent event) {assert (! locked); HitTestResult result; if (event is PointerDownEvent) {assert (! _ hitTests.containsKey (event.pointer)); result = HitTestResult (); hitTest (result, event.position); _ result; assert (() {if (debugPrintHitTestResults) debugPrint ('$event: $result'); return true;} ()) } else if (event is PointerUpEvent | | event is PointerCancelEvent) {result = _ hitTests.remove (event.pointer);} else if (event.down) {result = _ event.down [event.trends];} else {return; / / We currently ignore add, remove, and hover move events. } if (result! = null) dispatchEvent (event, result);}

The above code uses histTest () to detect which views are involved in the current touch pointer event.

Finally, the event is handled through dispatchEvent (event, result).

Void dispatchEvent (PointerEvent event, HitTestResult result) {assert (! locked); assert (result! = null); for (HitTestEntry entry in result.path) {try {entry.target.handleEvent (event, entry);} catch (exception, stack) {}

The above code is used to call the gesture recognizer for each view (RenderObject) separately to handle the current touch event (to decide whether to receive it or not).

Entry.target is the RenderObject corresponding to each widget. All RenderObject need to implements the interface of HitTestTarget class. There is handleEvent in HitTestTarget, so every RenderObject needs to implement the API handleEvent, which is used to deal with gesture recognition.

Abstract class RenderObject extends AbstractNode with DiagnosticableTreeMixin implements HitTestTarget

Except for the last WidgetsFlutterBinding, the other view RenderObject calls its own handleEvent to recognize the gesture. Its function is to determine whether the current gesture is to be abandoned, and if not, throw it into a router (this router is the gesture arena). Finally, WidgetsFlutterBinding calls handleEvent to decide who wins the gesture recognizer. So here WidgetsFlutterBinding.handleEvent is actually the unified processing interface, and its code is as follows:

Void handleEvent (PointerEvent event, HitTestEntry entry) {pointerRouter.route (event); if (event is PointerDownEvent) {gestureArena.close (event.pointer);} else if (event is PointerUpEvent) {gestureArena.sweep (event.pointer);}} 3. Flutter UI gesture resolution

From the above introduction, it can be concluded that a single touch event may trigger multiple gesture recognizers. The framework decides which gesture the user wants by adding a "gesture competition field" to each recognizer. "gesture Competition Field" uses the following rules to decide which gesture wins. It is very simple.

At any time, any recognizer can declare a failure and take the initiative to leave the "gesture competition". If there is only one recognizer left in the current "competition field", then the winner is left, and the winner means to receive the touch event alone and respond to the action.

At any time, any recognizer can declare victory by itself, and in the end, it will win, and all other recognizers remaining will fail.

4. Example of Flutter UI gesture

The following example shows that the screen window consists of an ABCDEFKG view, where view An is the root view, which is the bottom view. The red circle indicates the location of the touch point, and the touch falls in the middle of the G view.

According to the collision test, traverse the view path in response to this touch event:

WidgetsFlutterBinding

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.