List item rendering method, device, computer program product and storage medium

Abstract

The present invention provides a method, device, computer program product and storage medium for rendering list items, the method comprising: in the case of list movement in an application based on a cross-platform user interface UI framework, rendering at least two placeholder views corresponding to at least two list items to be rendered in the current frame; wherein the at least two list items to be rendered correspond to the at least two placeholder views in a one-to-one correspondence; in at least two frames starting from the next frame of the current frame, rendering the at least two list items to be rendered corresponding to the at least two placeholder views respectively; wherein the at least two frames correspond to the at least two placeholder views in a one-to-one correspondence. The present invention can reduce the probability of a list freezing during scrolling, thereby improving the fluency of the list during scrolling.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a list item rendering method, device, computer program product and storage medium. Background Art

[0002] Cross-platform user interface (UI) frameworks, such as Flutter (the corresponding Chinese translation can be translated as vibration), use the 2D vector graphics processing function library (Skia) engine framework to directly draw the UI, without the need to rely on the component capabilities of platforms such as Android, IOS mobile operating systems and web pages. Developers can develop cross-platform mobile applications based on Flutter, that is, developers only need to develop a set of codes for mobile applications, and the mobile applications can run on platforms such as Android, IOS and Web.

[0003] In the prior art, when Flutter does not rely on the component capabilities of platforms such as Android, IOS, and Web, during the scrolling of some lists, Flutter will render multiple list items simultaneously in one frame; however, when the list items are more complex, it may take too long to build a frame during the scrolling process, resulting in a freeze during the sliding process. Summary of the invention

[0004] The present invention provides a list item rendering method, device, computer program product and storage medium, which are used to solve the defect of jamming during list scrolling in the prior art, reduce the probability of jamming during list scrolling, and improve the fluency of the list during scrolling.

[0005] The present invention provides a list item rendering method, comprising:

[0006] In the case of list movement in an application based on a cross-platform user interface UI framework, at least two placeholder views corresponding to at least two list items to be rendered are rendered in a current frame; wherein the at least two list items to be rendered and the at least two placeholder views Figure 1 One to one correspondence;

[0007] In at least two frames starting from the next frame of the current frame, respectively render at least two to-be-rendered list items corresponding to the at least two placeholder views; wherein the at least two frames are associated with the at least two placeholder views. Figure 1 One to one correspondence.

[0008] According to a list item rendering method provided by the present invention, in at least two frames starting from the next frame of the current frame, respectively rendering at least two to-be-rendered list items corresponding to the at least two placeholder views includes:

[0009] Add at least two tasks corresponding to the at least two placeholder views in the task queue; wherein the at least two tasks are associated with the at least two placeholder views. Figure 1 One-to-one correspondence; the at least two tasks corresponding to the at least two placeholder views include an operation of rendering at least two to-be-rendered list items corresponding to the at least two placeholder views;

[0010] In at least two frames starting from a next frame of the current frame, the at least two tasks in the task queue are scheduled and executed respectively.

[0011] According to a list item rendering method provided by the present invention, adding at least two tasks corresponding to the at least two placeholder views in a task queue includes:

[0012] When the number of tasks in the task queue is less than the maximum capacity of the queue, adding a task corresponding to one of the at least two placeholder views to the task queue;

[0013] Alternatively, when the number of tasks in the task queue is equal to the maximum capacity of the queue, and the maximum capacity of the queue is less than the number of list items that can be displayed on the application interface, the maximum capacity of the queue is updated to the number of list items that can be displayed on the application interface; and a task corresponding to one of the at least two placeholder views is added to the task queue;

[0014] Alternatively, when the number of tasks in the task queue is equal to the maximum capacity of the queue, and the maximum capacity of the queue is greater than or equal to the number of list items that can be displayed on the application interface, at least one task is removed from the task queue; and a task corresponding to one of the at least two placeholder views is added to the task queue.

[0015] According to a list item rendering method provided by the present invention, the at least two tasks in the task queue are respectively scheduled and executed within at least two frames starting from the next frame of the current frame, including:

[0016] In at least two frames starting from the next frame of the current frame, if the task queue is not empty, calling the target task from the task queue;

[0017] The to-be-rendered list items corresponding to the target task are rendered in at least one frame until at least two to-be-rendered list items corresponding to the at least two placeholder views are rendered.

[0018] According to a list item rendering method provided by the present invention, rendering the to-be-rendered list item corresponding to the target task in at least one frame includes:

[0019] When the priority of the target task is higher than the priority of the system task, the to-be-rendered list item corresponding to the target task is rendered in at least one frame.

[0020] According to a list item rendering method provided by the present invention, respectively rendering at least two to-be-rendered list items corresponding to the at least two placeholder views includes:

[0021] At least two to-be-rendered list items corresponding to the at least two placeholder views are rendered respectively using a target animation method.

[0022] According to a list item rendering method provided by the present invention, after rendering at least two placeholder views corresponding to at least two list items to be rendered in the current frame, the method further includes:

[0023] Based on the relative position relationship between the at least two list items to be rendered on the application interface, a processing order of the at least two placeholder views is determined.

[0024] The present invention also provides a list item rendering device, comprising:

[0025] The first rendering module is used to render at least two placeholder views corresponding to at least two list items to be rendered in the current frame when the list is moved in the application based on the cross-platform user interface UI framework; wherein the at least two list items to be rendered and the at least two placeholder views Figure 1 One to one correspondence;

[0026] The second rendering module is configured to render at least two to-be-rendered list items corresponding to the at least two placeholder views in at least two frames starting from the next frame of the current frame; wherein the at least two frames are parallel to the at least two placeholder views. Figure 1 One to one correspondence.

[0027] The present invention also provides a computer program product, which includes a computer program stored on a non-transitory computer-readable storage medium, and the computer program includes program instructions. When the program instructions are executed by a computer, the computer can implement the steps of any of the above-mentioned list item rendering methods when executing the program instructions.

[0028] The present invention also provides a non-transitory computer-readable storage medium on which a computer program is stored. When the computer program is executed by a processor, the steps of any of the above-mentioned list item rendering methods are implemented.

[0029] The list item rendering method, device, computer program product and storage medium provided by the present invention pre-configure a simple placeholder view. When multiple list items need to be rendered simultaneously in one frame during the list scrolling process, multiple placeholder views corresponding to the multiple list items are first rendered. In each subsequent frame, one placeholder view is replaced with the list item corresponding to the placeholder view, so that only one list item is rendered in each frame. This can reduce the construction time of each frame and reduce the probability of the list being stuck during the scrolling process, thereby improving the smoothness of the list during the scrolling process. BRIEF DESCRIPTION OF THE DRAWINGS

[0030] In order to more clearly illustrate the technical solutions in the present invention or the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0031] Figure 1 This is one of the flowcharts of the list item rendering method provided by the present invention;

[0032] Figure 2 This is the second flowchart of the list item rendering method provided by the present invention;

[0033] Figure 3 is a schematic diagram of a placeholder view with a simple configuration provided by the present invention;

[0034] Figure 4 This is the third flowchart of the list item rendering method provided by the present invention;

[0035] Figure 5 This is a fourth flowchart of the list item rendering method provided by the present invention.

[0036] Figure 6 This is the fifth flowchart of the list item rendering method provided by the present invention;

[0037] Figure 7 This is the sixth flowchart of the list item rendering method provided by the present invention;

[0038] Figure 8 This is the seventh flowchart of the list item rendering method provided by the present invention;

[0039] Fig. 9 It is one of the structural schematic diagrams of the list item rendering device provided by the present invention;

[0040] Fig.10 This is the second structural schematic diagram of the list item rendering device provided by the present invention;

[0041] Fig.11 It is a structural schematic diagram of the electronic device provided by the present invention. DETAILED DESCRIPTION

[0042] In order to make the purpose, technical solution and advantages of the present invention clearer, the technical solution of the present invention will be clearly and completely described below in conjunction with the drawings of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0043] Combine the following Figure 1-Figure 8 The list item rendering method of the present invention is described.

[0044] Figure 1 This is one of the flowcharts of the list item rendering method provided by the present invention, such as Figure 1 As shown, the method includes:

[0045] Step 110, in the case where the list is moved in the application based on the cross-platform UI framework, at least two placeholder views corresponding to at least two list items to be rendered are rendered in the current frame; wherein the at least two list items to be rendered and the at least two placeholder views are Figure 1 One to one correspondence.

[0046] Optionally, a cross-platform UI framework is a UI development framework based on which users can quickly build high-quality native UIs on different platforms such as Android, IOS, and Web.

[0047] Optionally, the list may include one or more list items, and the number of list items in the list may be set according to actual user needs or may adopt a system default value. The list may be moved on the application interface.

[0048] Optionally, several simple placeholder views are pre-configured in the application. In the case where multiple list items to be rendered need to be rendered simultaneously within one frame during the list movement process, the present invention first renders placeholder views corresponding one to one to the list items to be rendered in the current frame to ensure that the application interface does not freeze. In other words, a placeholder view is rendered separately for each list item to be rendered in the current frame. The number of placeholder views depends on the number of multiple list items to be rendered that need to be rendered simultaneously within one frame; the display position of the placeholder view on the application interface is the same as the position to be rendered of the list item to be rendered on the application interface.

[0049] Step 120: Render at least two to-be-rendered list items corresponding to at least two placeholder views in at least two frames starting from the next frame of the current frame; wherein at least two frames correspond to at least two placeholder views. Figure 1 One to one correspondence.

[0050] Optionally, only one list item to be rendered corresponding to a placeholder view is rendered in any frame after the current frame, that is, the placeholder view is replaced with the list item corresponding to the placeholder view, and multiple complex list items are rendered one list item per frame instead of simultaneously. In this way, for the entire rendering process, each frame can be controlled within a preset fixed duration (for example, 16.6ms), thereby improving the smoothness of the list during scrolling.

[0051] Optionally, the rendering of the at least two frames on the application interface may be continuous or discontinuous.

[0052] Optionally, the implementation of rendering the at least two to-be-rendered list items corresponding to the at least two placeholder views respectively may include: using a target animation method to render the at least two to-be-rendered list items corresponding to the at least two placeholder views respectively.

[0053] Optionally, the target animation method includes at least one of the following: rotation animation, zoom animation, translation animation, transparency animation, etc. The present invention uses animation to replace the placeholder view with the list item to be rendered, which can improve the user's visual perception of the rendering process.

[0054] The method provided by the present invention pre-configures a simple placeholder view. When multiple list items need to be rendered simultaneously in one frame during the list scrolling process, multiple placeholder views corresponding to the multiple list items are first rendered. In each subsequent frame, one placeholder view is replaced with the list item corresponding to the placeholder view, so that only one list item is rendered per frame. This can reduce the construction time of each frame and reduce the probability of the list being stuck during the scrolling process, thereby improving the smoothness of the list during the scrolling process.

[0055] Optionally, Figure 2 The second flowchart of the list item rendering method provided by the present invention is as follows: Figure 2 As shown, the method includes:

[0056] Step 210, in the case of list movement in the application based on the cross-platform UI framework, rendering at least two placeholder views corresponding to at least two list items to be rendered in the current frame; wherein the at least two list items to be rendered and the at least two placeholder views are Figure 1 One to one correspondence.

[0057] Optionally, the description and explanation of step 210 may refer to the above description and explanation of step 110, and the same technical effect can be achieved. To avoid repetition, they will not be repeated here.

[0058] Step 220: Add at least two tasks corresponding to at least two placeholder views to the task queue; wherein at least two tasks and at least two placeholder views Figure 1 One-to-one correspondence; at least two tasks corresponding to at least two placeholder views, including the operation of rendering at least two to-be-rendered list items corresponding to at least two placeholder views.

[0059] Optionally, the type of the task queue includes at least one of the following: a circular queue, a linked queue, a first in first out (FIFO) queue, and a bidirectional queue.

[0060] The present invention designs a task queue, and adds different tasks corresponding to different placeholder views in the task queue. The task queue needs to meet the following characteristics: 1) cyclic execution: when the task queue is not empty, after each frame rendering is completed, a task in the task queue will be taken out, and the task will be executed according to the set conditions; wherein, the task queue can be a FIFO queue; 2) conditional execution: a task with a higher priority may be run in the system. In order not to affect the execution of the task with a higher priority in the system, a priority is set for the task in the task queue. If there is a task with a higher priority than itself in the system, the task will not be executed, which will cause the task queue to be blocked; 3) frame execution: each frame will only execute one task in the task queue; 4) expansion: the capacity of the task queue is expandable. If the list capacity is too large, the corresponding list items are more, which will lead to more tasks, and some tasks with lower priority or unnecessary execution will still exist in the task queue, resulting in the task queue being blocked; if the capacity of the task queue is too small, and the list corresponding to the list items is more, the corresponding tasks will be more. In this case, the capacity of the task queue may not meet the actual usage requirements.

[0061] Specifically, the task queue includes: the task implementation class TaskEntry, and the task queue implementation class SeparateFramingTaskQueue. In the task queue, you can add tasks to the task queue by calling SeparateFramingTaskQueue.instantce.scheduleTask. This method requires two required parameters and two optional parameters. Among them, the two required parameters are: task VoidCallBack type and priority (Priority) enumeration type; task VoidCallBack represents the actual execution method; Priority enumeration types include: idle, animation, touch, among which idle represents idle state; animation represents animation; touch represents touch; idle, animation, touch can represent the priority of the task, among which idle has the lowest priority and touch has the highest priority. In addition, maxTaskSize represents the maximum capacity of the task queue, and the task queue can be expanded by modifying this value.

[0062] Step 230 , in at least two frames starting from the next frame of the current frame, respectively schedule and execute at least two tasks in the task queue.

[0063] Optionally, during the scrolling of the list, at least two simple placeholder views are first rendered for the current frame, and the at least two simple placeholder views correspond one-to-one to at least two list items to be rendered. At this time, the rendering time of the current frame is within a fixed time (for example, 16.6ms), and no lag occurs. The processing order of the at least two placeholder views is determined in turn according to the relative position relationship of the at least two list items to be rendered on the application interface for the rendering of each frame after the current frame, and the rendering operation is performed on one of the at least two tasks in the scheduling task queue after the scheduling is completed.

[0064] Figure 3 A diagram for configuring a simple placeholder view, such as Figure 3As shown, there are 4 list items to be rendered. Through the frame queue designed above, in the process of scrolling the list, 4 placeholder views are first rendered in the first frame, and the list items to be rendered corresponding to the first placeholder view are rendered in the second frame. The list items to be rendered corresponding to the second placeholder view are rendered in the third frame. The list items to be rendered corresponding to the third placeholder view are rendered in the fourth frame. The list items to be rendered corresponding to the fourth placeholder view are rendered in the fifth frame. At this time, all 4 list items to be rendered are rendered. It should be noted that in the process of rendering the list items to be rendered from the second frame to the fifth frame, the position of the placeholder view on the application interface corresponds to the position of the list item on the application interface one by one, and the rendering order of the placeholder views is in accordance with the order of the list items to be rendered on the application interface.

[0065] The method provided by the present invention sequentially adds multiple tasks corresponding to multiple placeholder views in a task queue, so that in each subsequent frame, one task in the task queue is scheduled and the list item corresponding to the task is rendered, thereby rendering only one list item per frame, thereby reducing the rendering time of each frame and reducing the probability of freezes in the list during scrolling, thereby improving the smoothness of the list during scrolling.

[0066] Optionally, Figure 4 The third flowchart of the list item rendering method provided by the present invention is as follows: Figure 4 As shown, the method includes:

[0067] Step 410: In the case where a list is moved in an application based on a cross-platform UI framework, at least two placeholder views corresponding to at least two list items to be rendered are rendered in the current frame; wherein the at least two list items to be rendered and the at least two placeholder views are Figure 1 One to one correspondence.

[0068] Optionally, the description and explanation of step 410 may refer to the above description and explanation of step 110, and the same technical effect can be achieved. To avoid repetition, they will not be repeated here.

[0069] Step 420: When the number of tasks in the task queue is less than the maximum capacity of the queue, add a task corresponding to one of the at least two placeholder views to the task queue;

[0070] Alternatively, when the number of tasks in the task queue is equal to the maximum capacity of the queue, and the maximum capacity of the queue is less than the number of list items that can be displayed on the application interface, the maximum capacity of the queue is updated to the number of list items that can be displayed on the application interface; and a task corresponding to one of the at least two placeholder views is added to the task queue;

[0071] Alternatively, when the number of tasks in the task queue is equal to the maximum capacity of the queue, and the maximum capacity of the queue is greater than or equal to the number of list items that can be displayed on the application interface, at least one task is removed from the task queue; and a task corresponding to one of the at least two placeholder views is added to the task queue.

[0072] Optionally, when adding at least two tasks corresponding to at least two placeholder views to the task queue, first, the number of tasks in the task queue and the maximum capacity of the queue are judged. When the number of tasks in the task queue is less than the maximum capacity of the queue, the tasks corresponding to one of the at least two placeholder views are added to the task queue in sequence. Secondly, when the number of tasks in the task queue is equal to the maximum capacity of the queue, it is necessary to judge the maximum capacity of the queue and the number of list items that can be displayed on the application interface. When the maximum capacity of the queue is less than the number of list items that can be displayed on the application interface, it means that the queue capacity is too small and the queue needs to be expanded. The maximum capacity of the queue is increased to the number of list items that can be displayed on the application interface, and the maximum capacity of the queue is updated to the number of list items that can be displayed on the application interface; when the maximum capacity of the queue is greater than or equal to the number of list items that can be displayed on the application interface, at least one task is removed from the task queue. Finally, the task corresponding to one of the at least two placeholder views is added to the task queue.

[0073] Step 430 : Schedule and execute the at least two tasks in the task queue respectively within at least two frames starting from the next frame of the current frame.

[0074] Optionally, the description and explanation of step 430 may refer to the above description and explanation of step 230, and the same technical effect can be achieved. To avoid repetition, they will not be repeated here.

[0075] The method provided by the present invention compares the number of tasks in the task queue with the maximum capacity of the queue, and the maximum capacity of the queue with the number of list items that can be displayed on the application interface, and when certain conditions are met, adds multiple tasks corresponding to multiple placeholder views to the task queue, and schedules one task in the task queue in each subsequent frame, and renders the list item corresponding to the task, so that only one list item is rendered per frame, thereby reducing the rendering time of each frame and reducing the probability of freezes in the list during scrolling, thereby improving the smoothness of the list during scrolling.

[0076] Optionally, Figure 5 The fourth flowchart of the list item rendering method provided by the present invention is as follows: Figure 5 As shown, the method includes:

[0077] Step 510: In the case where a list is moved in an application based on a cross-platform UI framework, at least two placeholder views corresponding to at least two list items to be rendered are rendered in the current frame; wherein the at least two list items to be rendered and the at least two placeholder views are Figure 1 One to one correspondence.

[0078] Optionally, the description and explanation of step 510 may refer to the above description and explanation of step 110, and the same technical effect can be achieved. To avoid repetition, they will not be repeated here.

[0079] Step 520, determine whether the number of tasks in the task queue is less than the maximum capacity of the queue; when the number of tasks in the task queue is less than the maximum capacity of the queue, go to step 560; when the number of tasks in the task queue is equal to the maximum capacity of the queue, go to step 530.

[0080] It should be noted that, according to the task queue design method, at least two tasks corresponding to at least two placeholder views are added to the task queue; when the number of tasks in the task queue is less than the maximum capacity of the queue, all the tasks to be added can be added to the task queue in sequence, and only one task is added at a time, that is, a task corresponding to one placeholder view of at least two placeholder views can be added to the task queue. It should be noted that the number of tasks in the task queue can only be less than or equal to the maximum capacity of the queue.

[0081] Step 530, determine whether the maximum capacity of the queue is less than the number of list items that can be displayed on the application interface; when the maximum capacity of the queue is less than the number of list items that can be displayed on the application interface, go to step 540; when the maximum capacity of the queue is greater than or equal to the number of list items that can be displayed on the application interface, go to step 550.

[0082] Step 540 , update the maximum capacity of the queue to the number of list items that can be displayed on the application interface, and then go to step 560 .

[0083] Optionally, if the capacity of the task queue has reached the maximum capacity, a task in the task queue needs to be removed before the current task can be added to the task queue; if the capacity of the task queue has not reached the maximum capacity, the current task can be directly added to the task queue.

[0084] Optionally, the queue capacity can be expanded. The queue capacity can be reasonably set according to the number of list items to be rendered so that the maximum capacity of the queue can be fully utilized, thereby improving the rendering response speed of the list items. If the maximum capacity of the queue is less than the number of list items that can be displayed on the current application interface, it means that the queue capacity is too small and the queue needs to be expanded to increase the capacity of the queue to the number of list items that can be displayed on the application interface, that is, the maximum capacity of the queue is updated to the number of list items that can be displayed on the application interface. After the update is completed, add a task corresponding to one of the at least two placeholder views to the task queue.

[0085] Step 550 , remove at least one task from the task queue, and then go to step 560 .

[0086] Optionally, when the number of tasks in the task queue is equal to the maximum capacity of the queue, it means that the number of tasks in the task queue has just reached the maximum capacity of the queue. At this time, it is necessary to determine whether the maximum capacity of the queue is greater than the number of list items on the current screen. If the maximum capacity of the queue is greater than or equal to the number of list items that can be displayed on the application interface, it means that the queue capacity is large and does not need to be expanded. At this time, at least one task can be directly removed from the task queue, and then one of the at least two placeholder views can be added to the task queue.

[0087] Step 560: Add a task corresponding to one of the at least two placeholder views to the task queue.

[0088] Step 570 , determining whether at least two tasks corresponding to at least two placeholder views are both added to the task queue; if so, proceeding to step 580 ; if not, proceeding to step 520 .

[0089] Step 580: Schedule and execute the at least two tasks in the task queue respectively within at least two frames starting from the next frame of the current frame.

[0090] Optionally, the description and explanation of step 580 may refer to the above description and explanation of step 230, and the same technical effect can be achieved. To avoid repetition, they will not be repeated here.

[0091] The method provided by the present invention compares the number of tasks in the task queue with the maximum capacity of the queue, and the maximum capacity of the queue with the number of list items that can be displayed on the application interface, and when certain conditions are met, adds multiple tasks corresponding to multiple placeholder views to the task queue, and schedules one task in the task queue in each subsequent frame, and renders the list item corresponding to the task, so that only one list item is rendered per frame, thereby reducing the rendering time of each frame and reducing the probability of freezes in the list during scrolling, thereby improving the smoothness of the list during scrolling.

[0092] Optionally, Figure 6 A fifth flowchart of the list item rendering method provided by the present invention is shown in FIG. Figure 6 As shown, the method includes:

[0093] Step 610: In the case where a list is moved in an application based on a cross-platform UI framework, at least two placeholder views corresponding to at least two list items to be rendered are rendered in the current frame; wherein the at least two list items to be rendered and the at least two placeholder views are Figure 1 One to one correspondence.

[0094] Optionally, the description and explanation of step 610 may refer to the above description and explanation of step 110, and the same technical effect can be achieved. To avoid repetition, they are not repeated here.

[0095] Step 620: Add at least two tasks corresponding to the at least two placeholder views to the task queue; wherein the at least two tasks are associated with the at least two placeholder views. Figure 1 One to one correspondence; the at least two tasks corresponding to the at least two placeholder views include an operation of rendering at least two to-be-rendered list items corresponding to the at least two placeholder views.

[0096] Optionally, the description and explanation of step 620 may refer to the above description and explanation of step 220, and the same technical effect can be achieved. To avoid repetition, they will not be repeated here.

[0097] Step 630 : within at least two frames starting from the next frame of the current frame, if the task queue is not empty, retrieve the target task from the task queue.

[0098] Optionally, when rendering the list items in at least two frames starting from the next frame of the current frame, at least two tasks corresponding to at least two placeholder views need to be retrieved from the task queue. When the task queue is not empty, at least two tasks corresponding to at least two placeholder views can be retrieved from the task queue in sequence and the rendering operation can be performed.

[0099] Step 640: Render the to-be-rendered list items corresponding to the target task in at least one frame until at least two to-be-rendered list items corresponding to the at least two placeholder views are rendered.

[0100] Optionally, when rendering list items at the beginning of the next frame of the current frame, the task corresponding to the list item to be rendered is retrieved from the task queue, and the list item to be rendered corresponding to the task is rendered. The list item to be rendered is in one-to-one correspondence with the list item to be rendered corresponding to the placeholder view. When rendering list items for the next next frame, the task corresponding to the list item for the next next frame is retrieved from the task queue, and the list item to be rendered corresponding to the task is rendered. The list item to be rendered is also in one-to-one correspondence with the list item to be rendered corresponding to the placeholder view. This process is repeated until at least two list items to be rendered corresponding to at least two placeholder views are rendered.

[0101] The method provided by the present invention first renders multiple placeholder views corresponding to multiple list items one by one, and then adds multiple tasks corresponding to the multiple placeholder views to a task queue. In each subsequent frame, one task in the task queue is scheduled to render the list items to be rendered corresponding to the task until the multiple list items to be rendered corresponding to the multiple placeholder views are rendered, thereby rendering only one list item per frame, reducing the rendering time of each frame, and reducing the probability of freezes in the list during scrolling, thereby improving the smoothness of the list during scrolling.

[0102] Optionally, the implementation of step 640 may include the following steps, wherein:

[0103] When the priority of the target task is higher than the priority of the system task, the to-be-rendered list item corresponding to the target task is rendered in at least one frame.

[0104] Specifically, when the priority of the target task called in the task queue is higher than the priority of the task currently being rendered by the system, the to-be-rendered list item corresponding to the called target task will be directly replaced with the placeholder view corresponding to the to-be-rendered list item in at least one frame within at least one frame. Then, the next target task is called in the task queue. When the priority of the next target task is also higher than the priority of the task currently being rendered by the system, the to-be-rendered list item corresponding to the called next target task will be directly replaced with the placeholder view corresponding to the to-be-rendered list item in the next frame of at least one frame within the next frame, and so on, until the corresponding to-be-rendered list items in all frames are rendered.

[0105] Optionally, Figure 7 The sixth flowchart of the list item rendering method provided by the present invention is as follows: Figure 7 As shown, the method includes:

[0106] Step 710: In the case where a list is moved in an application based on a cross-platform UI framework, at least two placeholder views corresponding to at least two list items to be rendered are rendered in the current frame; wherein the at least two list items to be rendered and the at least two placeholder views are Figure 1 One to one correspondence.

[0107] Optionally, the description and explanation of step 710 may refer to the above description and explanation of step 110, and the same technical effect can be achieved. To avoid repetition, they are not repeated here.

[0108] Step 720: Add at least two tasks corresponding to the at least two placeholder views to the task queue; wherein the at least two tasks are associated with the at least two placeholder views. Figure 1 One to one correspondence; the at least two tasks corresponding to the at least two placeholder views include an operation of rendering at least two to-be-rendered list items corresponding to the at least two placeholder views.

[0109] Optionally, the description and explanation of step 720 may refer to the above description and explanation of step 220, and the same technical effect can be achieved. To avoid repetition, they will not be repeated here.

[0110] Step 730, determine whether the task queue is empty; if the task queue is not empty, go to step 740; if the task queue is empty, the process ends.

[0111] Step 740: retrieve the target task from the task queue.

[0112] Optionally, after adding at least two tasks corresponding to at least two placeholder views to the task queue, wait for the system to automatically schedule the tasks in the task queue. After the current system completes other rendering tasks, the tasks in the task queue are automatically scheduled for rendering.

[0113] Specifically, the system provides the endOffFrame interface, which can monitor the completion of each frame rendering in the system, execute the task queue after the system completes other rendering tasks, and automatically schedule the tasks in the task queue. When the system automatically schedules the task queue, it first determines whether the task queue is empty. If the task queue is empty, the scheduling ends; if the task queue is not empty, the target task is called from the task queue.

[0114] The priority is used to determine whether the target task meets the execution conditions. The execution condition refers to the priority set by the task queue for each task. The priority includes three values: idle, animation, and touch. Idle means idle state; animation means animation; and touch means touch. At the same time, idle, animation, and touch respectively represent the priority of the task, among which idle has the lowest priority and touch has the highest priority. If the target task meets the execution conditions, the target task will be executed after the system completes rendering of the current frame; if the priority of the target task is lower than that of other tasks being rendered in the system, the execution conditions are not met and the task continues to wait for system scheduling. At this time, the task queue is blocked because it is waiting for the next automatic scheduling of the task queue by the system until the system automatically schedules the target task in the task queue after completing the rendering again.

[0115] Step 750: Render the to-be-rendered list item corresponding to the target task in at least one frame.

[0116] Step 760 , determining whether at least two to-be-rendered list items corresponding to at least two placeholder views are rendered; if not, proceeding to step 730 ; if yes, the process ends.

[0117] The method provided by the present invention first renders multiple placeholder views corresponding to multiple list items one by one, and then adds multiple tasks corresponding to the multiple placeholder views to a task queue. In each subsequent frame, one task in the task queue is scheduled to render the list items to be rendered corresponding to the task until the multiple list items to be rendered corresponding to the multiple placeholder views are rendered, thereby rendering only one list item per frame, reducing the rendering time of each frame, and reducing the probability of freezes in the list during scrolling, thereby improving the smoothness of the list during scrolling.

[0118] Figure 8 The seventh flowchart of the list item rendering method provided by the present invention is as follows: Figure 8 As shown, the method includes:

[0119] Step 810: In the case where a list is moved in an application based on a cross-platform UI framework, at least two placeholder views corresponding to at least two list items to be rendered are rendered in the current frame; wherein the at least two list items to be rendered and the at least two placeholder views are Figure 1 One to one correspondence.

[0120] Step 820: Render at least two to-be-rendered list items corresponding to the at least two placeholder views in at least two frames starting from the next frame of the current frame; wherein the at least two frames are respectively rendered to the at least two placeholder views. Figure 1 One to one correspondence.

[0121] Optionally, the description and explanation of steps 810-820 may refer to the above description and explanation of steps 110-120, and the same technical effect can be achieved. To avoid repetition, they are not repeated here.

[0122] Step 830: Determine a processing order of the at least two placeholder views based on the relative position relationship of the at least two list items to be rendered on the application interface.

[0123] Optionally, the processing order of at least two placeholder views is determined based on the positional relationship between at least two list items to be rendered on the application interface, and the at least two placeholder views corresponding to the at least two list items to be rendered. Wherein, if the position of each of the at least two list items to be rendered on the application interface is arranged from top to bottom or from left to right, then the processing order of the at least two placeholder views corresponding to the at least two lists to be rendered is to render the list items to be rendered corresponding to the at least two placeholder views in sequence from top to bottom or from left to right. Optionally, the rendering order of the list items corresponding to the at least two frames corresponds one-to-one to the order of the placeholder views on the application interface.

[0124] The list item rendering method provided by the present invention first renders multiple placeholder views corresponding one-to-one to multiple list items. When rendering each subsequent frame, the processing order of the multiple placeholder views is determined according to the relative position relationship of the multiple list items to be rendered on the application interface. According to the processing order, one placeholder view is replaced each time with the list item corresponding to the placeholder view, so that only one list item is rendered per frame. This can reduce the construction time of each frame and reduce the probability of jamming in the list during scrolling, thereby improving the smoothness of the list during scrolling.

[0125] The list item rendering device provided by the present invention is described below. The list item rendering device described below and the list item rendering method described above can be referred to each other.

[0126] The present invention provides a list item rendering device. Fig. 9 This is one of the structural diagrams of the list item rendering device provided by the present invention, such as Fig. 9 As shown, the list item rendering device 900 includes: a first rendering module 901 and a second rendering module 902; wherein,

[0127] The first rendering module 901 is used to render at least two placeholder views corresponding to at least two list items to be rendered in the current frame when the list is moved in the application based on the cross-platform UI framework; wherein the at least two list items to be rendered and the at least two placeholder views Figure 1 One to one correspondence;

[0128] The second rendering module 902 is configured to render at least two to-be-rendered list items corresponding to the at least two placeholder views in at least two frames starting from the next frame of the current frame; wherein the at least two frames are respectively associated with the at least two placeholder views. Figure 1 One to one correspondence.

[0129] The list item rendering device provided by the present invention pre-configures a simple placeholder view. When multiple list items need to be rendered simultaneously in one frame during the list scrolling process, multiple placeholder views corresponding to the multiple list items are first rendered. In each subsequent frame, one placeholder view is replaced with the list item corresponding to the placeholder view, so that only one list item is rendered per frame. This can reduce the construction time of each frame and reduce the probability of the list being stuck during the scrolling process, thereby improving the smoothness of the list during the scrolling process.

[0130] Optionally, the second rendering module 902 is specifically configured to:

[0131] Add at least two tasks corresponding to the at least two placeholder views in the task queue; wherein the at least two tasks are associated with the at least two placeholder views. Figure 1 One-to-one correspondence; the at least two tasks corresponding to the at least two placeholder views include an operation of rendering at least two to-be-rendered list items corresponding to the at least two placeholder views;

[0132] In at least two frames starting from a next frame of the current frame, the at least two tasks in the task queue are scheduled and executed respectively.

[0133] Optionally, the second rendering module 902 is specifically configured to:

[0134] When the number of tasks in the task queue is less than the maximum capacity of the queue, adding a task corresponding to one of the at least two placeholder views to the task queue;

[0135] Alternatively, when the number of tasks in the task queue is equal to the maximum capacity of the queue, and the maximum capacity of the queue is less than the number of list items that can be displayed on the application interface, the maximum capacity of the queue is updated to the number of list items that can be displayed on the application interface; and a task corresponding to one of the at least two placeholder views is added to the task queue;

[0136] Alternatively, when the number of tasks in the task queue is equal to the maximum capacity of the queue, and the maximum capacity of the queue is greater than or equal to the number of list items that can be displayed on the application interface, at least one task is removed from the task queue; and a task corresponding to one of the at least two placeholder views is added to the task queue.

[0137] Optionally, the second rendering module 902 is specifically configured to:

[0138] In at least two frames starting from the next frame of the current frame, if the task queue is not empty, calling the target task from the task queue;

[0139] The to-be-rendered list items corresponding to the target task are rendered in at least one frame until at least two to-be-rendered list items corresponding to the at least two placeholder views are rendered.

[0140] Optionally, the second rendering module 902 is specifically configured to:

[0141] When the priority of the target task is higher than the priority of the system task, the to-be-rendered list item corresponding to the target task is rendered in at least one frame.

[0142] Optionally, the second rendering module 902 is specifically configured to:

[0143] At least two to-be-rendered list items corresponding to the at least two placeholder views are rendered respectively using a target animation method.

[0144] Optionally, Fig.10 The second structural diagram of the list item rendering device provided by the present invention is as follows Fig.10 As shown, the list item rendering device 1000 includes: a first rendering module 701, a second rendering module 702, and a determination module 1001; wherein,

[0145] The determination module 1001 is used to determine the processing order of the at least two placeholder views based on the relative position relationship between the at least two list items to be rendered on the application interface.

[0146] The list item rendering device provided by the present invention pre-configures a simple placeholder view. When multiple list items need to be rendered simultaneously in one frame during the list scrolling process, multiple placeholder views corresponding to the multiple list items are first rendered. In each subsequent frame, the processing order of the multiple placeholder views is determined according to the relative position relationship of the multiple list items to be rendered on the application interface, and each placeholder view is replaced with the list item corresponding to the placeholder view, so that only one list item is rendered per frame. This can reduce the construction time of each frame and reduce the probability of the list being stuck during the scrolling process, thereby improving the smoothness of the list during the scrolling process.

[0147] Fig.11 An example of a physical structure diagram of an electronic device is shown in FIG. Fig.11As shown, the electronic device 1100 may include: a processor 1110, a communication interface 1120, a memory 1130 and a communication bus 1140, wherein the processor 1110, the communication interface 1120 and the memory 1130 communicate with each other through the communication bus 1140. The processor 1110 may call the logic instructions in the memory 1130 to execute the list item rendering method, which includes: in the case of list movement in an application based on a cross-platform UI framework, rendering at least two placeholder views corresponding to at least two list items to be rendered in the current frame; wherein the at least two list items to be rendered and the at least two placeholder views Figure 1 one-to-one correspondence; in at least two frames starting from the next frame of the current frame, respectively rendering at least two to-be-rendered list items corresponding to the at least two placeholder views; wherein the at least two frames correspond to the at least two placeholder views Figure 1 One to one correspondence.

[0148] In addition, the logic instructions in the above-mentioned memory 1130 can be implemented in the form of software functional units and can be stored in a computer-readable storage medium when sold or used as an independent product. Based on such an understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art or the part of the technical solution, can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk and other media that can store program codes.

[0149] On the other hand, the present invention also provides a computer program product, the computer program product includes a computer program stored on a non-transitory computer-readable storage medium, the computer program includes program instructions, when the program instructions are executed by a computer, the computer can execute the list item rendering method provided by the above methods, the method comprising: in the case of list movement in an application based on a cross-platform UI framework, rendering at least two placeholder views corresponding to at least two list items to be rendered in the current frame; wherein, the at least two list items to be rendered and the at least two placeholder views Figure 1one-to-one correspondence; in at least two frames starting from the next frame of the current frame, respectively rendering at least two to-be-rendered list items corresponding to the at least two placeholder views; wherein the at least two frames correspond to the at least two placeholder views Figure 1 One to one correspondence.

[0150] In another aspect, the present invention further provides a non-transitory computer-readable storage medium having a computer program stored thereon, which is implemented when the computer program is executed by a processor to perform the above-mentioned list item rendering method, the method comprising: in the case of list movement in an application based on a cross-platform UI framework, rendering at least two placeholder views corresponding to at least two list items to be rendered in a current frame; wherein the at least two list items to be rendered and the at least two placeholder views are Figure 1 one-to-one correspondence; in at least two frames starting from the next frame of the current frame, respectively rendering at least two to-be-rendered list items corresponding to the at least two placeholder views; wherein the at least two frames correspond to the at least two placeholder views Figure 1 One to one correspondence.

[0151] The device embodiments described above are merely illustrative, wherein the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. Ordinary technicians in this field can understand and implement it without paying creative labor.

[0152] Through the description of the above implementation methods, those skilled in the art can clearly understand that each implementation method can be implemented by means of software plus a necessary general hardware platform, and of course, it can also be implemented by hardware. Based on this understanding, the above technical solution is essentially or the part that contributes to the prior art can be embodied in the form of a software product, and the computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, a disk, an optical disk, etc., including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment or some parts of the embodiments.

[0153] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A method for rendering list items, characterized in that: include: In the case of list movement in an application based on a cross-platform user interface UI framework, at least two placeholder views corresponding to at least two list items to be rendered are rendered in a current frame; wherein the at least two list items to be rendered correspond to the at least two placeholder views one-to-one; and a display position of the placeholder view on the application interface is the same as a position to be rendered of the list items to be rendered on the application interface; In at least two frames starting from a frame next to the current frame, respectively rendering at least two to-be-rendered list items corresponding to the at least two placeholder views; wherein the at least two frames correspond one-to-one to the at least two placeholder views; The rendering of at least two to-be-rendered list items corresponding to the at least two placeholder views in at least two frames starting from the next frame of the current frame includes: Adding at least two tasks corresponding to the at least two placeholder views in a task queue; wherein the at least two tasks correspond to the at least two placeholder views one-to-one; and the at least two tasks corresponding to the at least two placeholder views include an operation of rendering at least two to-be-rendered list items corresponding to the at least two placeholder views; In at least two frames starting from a next frame of the current frame, the at least two tasks in the task queue are scheduled and executed respectively.

2. The list item rendering method according to claim 1, characterized in that: The adding at least two tasks corresponding to the at least two placeholder views into the task queue includes: When the number of tasks in the task queue is less than the maximum capacity of the queue, adding a task corresponding to one of the at least two placeholder views to the task queue; Alternatively, when the number of tasks in the task queue is equal to the maximum capacity of the queue, and the maximum capacity of the queue is less than the number of list items that can be displayed on the application interface, the maximum capacity of the queue is updated to the number of list items that can be displayed on the application interface; and a task corresponding to one of the at least two placeholder views is added to the task queue; Alternatively, when the number of tasks in the task queue is equal to the maximum capacity of the queue, and the maximum capacity of the queue is greater than or equal to the number of list items that can be displayed on the application interface, at least one task is removed from the task queue; and a task corresponding to one of the at least two placeholder views is added to the task queue.

3. The list item rendering method according to claim 1, characterized in that: The step of respectively scheduling and executing the at least two tasks in the task queue within at least two frames starting from the next frame of the current frame includes: In at least two frames starting from the next frame of the current frame, if the task queue is not empty, calling the target task from the task queue; The to-be-rendered list items corresponding to the target task are rendered in at least one frame until at least two to-be-rendered list items corresponding to the at least two placeholder views are rendered.

4. The list item rendering method according to claim 3, characterized in that: The rendering of the to-be-rendered list item corresponding to the target task in at least one frame includes: When the priority of the target task is higher than the priority of the system task, the to-be-rendered list item corresponding to the target task is rendered in at least one frame.

5. The list item rendering method according to any one of claims 1 to 4, characterized in that: The rendering of the at least two to-be-rendered list items corresponding to the at least two placeholder views respectively includes: At least two to-be-rendered list items corresponding to the at least two placeholder views are rendered respectively using a target animation method.

6. The list item rendering method according to any one of claims 1 to 4, characterized in that: After rendering at least two placeholder views corresponding to at least two list items to be rendered in the current frame, the method further includes: Based on the relative position relationship between the at least two list items to be rendered on the application interface, a processing order of the at least two placeholder views is determined.

7. A list item rendering device, characterized in that: include: A first rendering module is used to render at least two placeholder views corresponding to at least two list items to be rendered in a current frame when a list is moved in an application based on a cross-platform user interface UI framework; wherein the at least two list items to be rendered correspond to the at least two placeholder views in a one-to-one correspondence; and a display position of the placeholder view on the application interface is the same as a position to be rendered of the list item to be rendered on the application interface; A second rendering module, configured to render at least two to-be-rendered list items corresponding to the at least two placeholder views in at least two frames starting from a frame next to the current frame, respectively; wherein the at least two frames correspond to the at least two placeholder views in a one-to-one manner; The second rendering module is specifically used for: Adding at least two tasks corresponding to the at least two placeholder views in a task queue; wherein the at least two tasks correspond to the at least two placeholder views one-to-one; and the at least two tasks corresponding to the at least two placeholder views include an operation of rendering at least two to-be-rendered list items corresponding to the at least two placeholder views; In at least two frames starting from a next frame of the current frame, the at least two tasks in the task queue are scheduled and executed respectively.

8. A computer program product, characterized in that The computer program product includes a computer program stored on a non-transitory computer-readable storage medium, and the computer program includes program instructions. When the program instructions are executed by a computer, the computer can implement the steps of the list item rendering method as described in any one of claims 1 to 6 when executing the program instructions.

9. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the list item rendering method according to any one of claims 1 to 6 are implemented.

Images