Local refresh method and refresh device based on flutter dynamic page

By obtaining control identifiers and component relationships based on rendering operations in Flutter, establishing data structures, and implementing partial refresh, the problems of heavy code development workload and high performance consumption in the existing technology are solved, and fast partial refresh is achieved.

CN115586899BActive Publication Date: 2025-10-17BOE TECHNOLOGY GROUP CO LTD
View PDF 2 Cites 0 Cited by

Patent Information

Application Number
CN202211332961.3
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2022-10-28
Publication Date
2025-10-17
Estimated Expiration
2042-10-28

AI Technical Summary

Technical Problem

In Flutter development, when existing technologies implement partial page refresh through the registered observer pattern, the code development workload is large and the feasibility is poor, resulting in high performance consumption and slow refresh speed.

Method used

Based on Flutter rendering operations, by obtaining the correspondence between the control identifier of the view control and the control component, a data structure is established, and new control components are used for local refresh, avoiding the definition of global keywords and achieving local refresh.

Benefits of technology

The partial refresh of Flutter dynamic pages is achieved with less performance consumption and faster refresh speed, which reduces the workload of code development and improves feasibility.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN115586899B_ABST
    Figure CN115586899B_ABST
Patent Text Reader

Abstract

The application discloses a local refreshing method and device based on Flutter dynamic pages, wherein the local refreshing method of one embodiment comprises the following steps: forming a first layout description statement of a Flutter dynamic page according to a plurality of view controls set in a visual configurator; performing a rendering operation on the first layout description statement according to a Flutter rendering component, obtaining control identifiers, first control components and control elements of the view controls, and establishing a first data structure comprising the control identifiers and the control elements of the view controls; obtaining update data and forming an update description statement in response to user operation on the Flutter dynamic page, establishing second control components of to-be-updated view controls according to the update description statement, and performing local refreshing on the Flutter dynamic page in combination with the first data structure.
Need to check novelty before this filing date? Find Prior Art

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer application software, in particular to a local refresh method and device based on Flutter dynamic pages, a computer readable storage medium and a computer device. BACKGROUND

[0002] In the development process of Flutter, local refresh of a page is usually implemented by registering an observer mode. Specifically, an observed object is defined first, and then the observed object and a view control are associated by declaration. When the data of the observed object changes, the observed view control is notified to refresh the data of the view layer to implement local refresh of the page. However, this method is usually used in the development of a Flutter native page, and the function needs to be implemented when a DSL description language is interpreted, which increases the workload of code development and has poor implementability. SUMMARY

[0003] To solve at least one of the above problems, the first aspect of the present application provides a local refresh method based on Flutter dynamic pages, comprising:

[0004] forming a first layout description statement of the Flutter dynamic page according to a Flutter dynamic page including a plurality of view controls set in a visual configuration device;

[0005] performing a rendering operation on the first layout description statement according to a Flutter rendering component, obtaining a control identifier, a first control component and a control element of each view control, and establishing a first data structure including the control identifier and the control element of each view control;

[0006] obtaining update data and forming an update description statement in response to user operation on the Flutter dynamic page, establishing a second control component of each view control to be updated according to the update description statement, and performing local refresh on the Flutter dynamic page in combination with the first data structure.

[0007] Further, the rendering operation includes a first rendering operation and a second rendering operation, and the performing a rendering operation on the first layout description statement according to a Flutter rendering component, obtaining a control identifier, a first control component and a control element of each view control, and establishing a first data structure including the control identifier and the control element of each view control further includes:

[0008] According to the Flutter rendering component, a first rendering operation is performed on the first layout description statement to generate a first page view and establish a second data structure, wherein the second data structure includes control identifiers of view controls obtained from the first layout description statement and corresponding first control components;

[0009] According to the Flutter rendering component, a second rendering operation is performed on the first page view to generate a second page view, and control elements of view controls and corresponding third control components are obtained;

[0010] According to the second data structure, the control elements, and the corresponding third control components, the first data structure is established.

[0011] Further, the first rendering operation performed by the Flutter rendering component on the first layout description statement to generate the first page view and establish the second data structure further includes:

[0012] The second data structure having a key-value structure is established.

[0013] All first control components having control identifiers in the first layout description statement are traversed, and the control identifiers are stored as keys and the corresponding first control components are stored as values in the second data structure.

[0014] Further, the second rendering operation performed by the Flutter rendering component on the first page view to generate the second page view and obtain control elements of view controls and corresponding third control components further includes:

[0015] In response to listening to completion of the second rendering operation of the Flutter dynamic page, all control elements and corresponding third control components of the Flutter dynamic page are obtained by recursively calling the second page view.

[0016] Further, the first data structure is established according to the second data structure, the control elements, and the corresponding third control components further includes:

[0017] The first data structure having a key-value structure is established.

[0018] It is determined whether the third control component exists in the second data structure, and if so, the control identifier corresponding to the third control component is stored as a key and the control element corresponding to the third control component is stored as a value in the first data structure.

[0019] Furthermore, in response to the user's operation on the Flutter dynamic page, obtaining update data and forming an update description statement, establishing a second control component for each view control to be updated according to the update description statement, and partially refreshing the Flutter dynamic page in combination with the first data structure further includes:

[0020] In response to a user operation on the Flutter dynamic page, traverse the event list preset in the Flutter dynamic page to obtain update data and form an update description statement, where the update description statement includes a control identifier of a view control to be updated;

[0021] Creating a second control component for each view control to be updated according to the update description statement, where the second control component corresponds to the control identifier;

[0022] According to the control identifier corresponding to each second control component, the control element corresponding to each view control to be updated is obtained from the first data structure, and the second control component and control element of each view control to be updated are used to partially refresh the Flutter dynamic page.

[0023] Furthermore, after obtaining update data and forming an update description statement in response to the user's operation on the Flutter dynamic page, establishing a second control component for each view control to be updated according to the update description statement, and partially refreshing the Flutter dynamic page in combination with the first data structure, the local refresh method further includes:

[0024] A second layout description statement is obtained according to the Flutter dynamic page after partial refresh, and the first layout description statement is updated using the second layout description statement.

[0025] Furthermore, the first layout description statement and the update description statement are JSON strings.

[0026] A second aspect of the present invention provides a local refresh device based on a Flutter dynamic page, comprising:

[0027] A page setting unit, configured to form a first layout description statement of a Flutter dynamic page according to a Flutter dynamic page including multiple view controls set in a visualization configurator;

[0028] A control corresponding unit is used to render the first layout description statement according to the Flutter rendering component, obtain the control identifier, the first control component and the control element of each view control, and establish a first data structure including the control identifier and the control element of each view control;

[0029] A local refresh unit is configured to obtain update data and form an update description statement in response to user operation on the Flutter dynamic page, establish a second control component of each view control to be updated according to the update description statement, and perform local refresh on the Flutter dynamic page in combination with the first data structure.

[0030] The third aspect of the present application provides a computer readable storage medium, which stores a computer program, and the program is executed by a processor to implement the method of the first aspect.

[0031] The fourth aspect of the present application provides a computer device, which comprises a memory, a processor and a computer program stored in the memory and executable on the processor, and the processor implements the method of the first aspect when executing the program.

[0032] The present application has the following beneficial effects:

[0033] The present application is aimed at the existing problems, and formulates a local refresh method and a refresh device based on a Flutter dynamic page. The local refresh method is based on the characteristics of Flutter rendering operation, uses Flutter rendering operation to obtain the correspondence between control identifiers and control components of each view control, and obtain the correspondence between control elements and control components of each view control, and then establishes a data structure comprising control identifiers and control elements of each view control. Thus, after local refresh operation, the Flutter dynamic page is locally refreshed by establishing a new control component and using unchanged control identifiers to obtain corresponding control elements, so as to update the view control to be updated, thereby realizing local refresh of the Flutter dynamic page with small performance consumption and fast refresh speed, and being able to make up for the problems in the prior art and having wide application prospects. BRIEF DESCRIPTION OF DRAWINGS

[0034] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings needed in the embodiment description will be briefly introduced. Obviously, the drawings in the following description are only some embodiments of the present application, and other drawings can be obtained by those skilled in the art without creative effort.

[0035] Figure 1 A flow chart of the local refresh method according to an embodiment of the present application is shown;

[0036] Figure 2 A structural block diagram of the local refresh device according to another embodiment of the present application is shown;

[0037] Figure 3A schematic structural diagram of a computer device according to another embodiment of the present invention is shown. DETAILED DESCRIPTION

[0038] In order to more clearly illustrate the present invention, the present invention is further described below in conjunction with preferred embodiments and accompanying drawings. Similar components in the accompanying drawings are represented by the same reference numerals. It should be understood by those skilled in the art that the following detailed description is illustrative rather than restrictive and should not be used to limit the scope of protection of the present invention.

[0039] In the related art, partial refresh of Fluttter dynamic pages usually adopts the method of setting global keywords for view controls. However, view controls set with global keywords are usually used all the time and are not regenerated, so the state properties of the view controls are held by the global keywords. When the content of the view control changes, the latest data is transferred to the state properties held by the global keywords to refresh the content of the view control, thereby realizing the partial refresh function of the page. However, if global keywords are used extensively, it will have a negative impact on the refresh mechanism and refresh performance of the page, such as occupying a large amount of performance consumption and other problems.

[0040] In view of the above situation, if Figure 1 As shown, an embodiment of the present invention provides a local refresh method based on a Flutter dynamic page, including: forming a first layout description statement of the Flutter dynamic page according to a Flutter dynamic page including multiple view controls set in a visualization configurator; performing a rendering operation on the first layout description statement according to a Flutter rendering component, obtaining a control identifier, a first control component and a control element of each view control, and establishing a first data structure including the control identifier and the control element of each view control; obtaining update data and forming an update description statement in response to a user's operation on the Flutter dynamic page, establishing a second control component of each view control to be updated according to the update description statement, and locally refreshing the Flutter dynamic page in combination with the first data structure.

[0041] Compared with the above-mentioned manner of setting a global keyword for the view control to realize partial refresh, the embodiment does not need to define a global keyword. Based on the characteristics of the Flutter rendering operation, the embodiment utilizes the Flutter rendering operation to obtain the correspondence between the control identifiers and the control components of each view control, and to obtain the correspondence between the control elements and the control components of each view control, and then establishes a data structure including the control identifiers and the control elements of each view control. Thus, after the partial refresh operation, the Flutter dynamic page is refreshed locally by establishing a new control component and utilizing the unchanged control identifiers to obtain the corresponding control elements, so as to update the view control to be updated, thereby realizing partial refresh of the Flutter dynamic page with small performance consumption and fast refresh speed.

[0042] In one specific example, the completion of a partial refresh of a Flutter dynamic page is taken as an example for illustration, including:

[0043] Firstly, a first layout description statement of the Flutter dynamic page is formed according to the Flutter dynamic page including a plurality of view controls set in the visual configuration device.

[0044] In the embodiment, in the development process of Flutter, the page development is realized by view control configuration in the visual configuration device. Specifically, the view controls such as text box components, selection box components, picture components and button components required by the page are set in the visual configuration to generate the page, and the description statement of the page is formed according to the generated page, for example, the first layout description statement of the page in the embodiment is represented by a json string.

[0045] Secondly, the first layout description statement is rendered according to the Flutter rendering component, the control identifiers, the first control components and the control elements of each view control are obtained, and a first data structure including the control identifiers and the control elements of each view control is established.

[0046] In the embodiment, based on the characteristics of the Flutter rendering operation, the correspondence between the control identifiers, the control components and the control elements of each view control is obtained, and thus the data structure including the control identifiers and the control elements is established.

[0047] In one optional embodiment, the rendering operation includes a first rendering operation and a second rendering operation, and further includes:

[0048] Firstly, the Flutter rendering component performs a first rendering operation on the first layout description statement to generate a first page view and establish a second data structure including control identifiers of view controls obtained from the first layout description statement and corresponding first control components.

[0049] In this embodiment, the second data structure including control identifiers and corresponding first control components is established during development, i.e., widgetMap is established, for example, by modifying the parseWidget method of the page template project and adding a Map<String, Widget> widgetMap parameter. Then, the first rendering operation is performed on the json string of the first layout description statement to generate the first page view, for example, by calling a pre-set interface to obtain a json string representing page configuration, i.e., by calling the parseWidget method of the page template project to parse the json string, taking view controls with control identifiers as target controls, extracting first control components of the view controls, i.e., widgets of the view controls, and storing the control identifiers and first control components of the view controls in the second data structure as an item, for example, in a key-value structure with the control identifier as the key and the first control component as the value. During the parsing of the json string of the first layout description statement, all view controls of the json string are traversed, and all target controls are extracted and stored in the second data structure.

[0050] Secondly, the Flutter rendering component performs a second rendering operation on the first page view to generate a second page view, and obtains control elements of view controls and corresponding third control components.

[0051] In this embodiment, on the basis of the first rendering operation on the json string of the first layout description statement to obtain the first page view, the second rendering operation is performed on the first page view to generate the second page view, i.e., to present the Flutter dynamic page. During the second rendering operation, a callback function for listening to the end of the page rendering is listened to, for example, WidgetsBinding.instance.addPostFrameCallback is listened to, and after confirming the end of the rendering operation, a UI component instance such as Element.visitChildren is called, and all view control elements on the page are traversed through recursive calling, i.e., control elements of view controls and corresponding third control components are obtained.

[0052] Finally, the first data structure is established according to the second data structure, control elements and corresponding third control components.

[0053] In the embodiment, the various corresponding relationships obtained through the first rendering operation and the second rendering operation, such as the corresponding relationship between the control identifier and the first control component in the second data structure and the corresponding relationship between the control element and the third control component, are used to obtain the corresponding relationship between the control element and the control identifier and store in the established first data structure.

[0054] Specifically, the first data structure with a key-value structure is established first, and then it is determined whether each third control component exists in the second data structure, that is, whether the third control component is the same as a first control component in the second data structure. If it exists, the control element and the control identifier are corresponded through the control component with the same control component, that is, the control identifier and the corresponding control element are determined, and the control identifier corresponding to the third control component is stored in the first data structure as the key, and the control element corresponding to the third control component is stored as the value.

[0055] In the third step, the update data is obtained and the update description statement is formed in response to the operation of the user on the Flutter dynamic page, the second control component of each view control to be updated is established according to the update description statement, and the Flutter dynamic page is locally refreshed in combination with the first data structure.

[0056] In the embodiment, when the user uses a button or other operation to trigger an interactive instruction on the page, that is, when the user triggers an update on the Flutter page, the view control corresponding to the update event triggered by the current operation is obtained by traversing the list according to the event list preset by the Flutter dynamic page. In other words, after the user operation, the update data of the page is obtained, and the update description statement including the json string is formed according to the update data, the update description statement includes the control identifier of the view control to be updated, the first rendering operation is performed on the json string of the update description statement, that is, the second control component widget of each view control to be updated is established by parsing the json string of the update description statement, that is, the control identifier of the view control to be updated is obtained by newly establishing the widget of the view control to be updated. In other words, the control identifier of the view control to be updated is obtained by newly establishing the widget of the view control to be updated. Then, the control element corresponding to each view control to be updated is obtained from the first data structure according to the control identifier corresponding to each second control component, and the Flutter dynamic page is locally refreshed by using the second control component and the control element of each view control to be updated. That is, the newly established second control component widget and the control element are associated through the unchanged control identifier of each view control, and the update of the view control to be updated is realized through the control element, so as to realize the local refresh of the Flutter dynamic page.

[0057] It is worth noting that the update description statement includes information of each view control to be updated, and the number of view controls in the update description statement is less than or equal to the number of view controls in the first layout description statement.

[0058] In an optional embodiment, after the response to the user operation on the Flutter dynamic page to obtain update data and form an update description statement, a second control component of each view control to be updated is established according to the update description statement, and the Flutter dynamic page is partially refreshed in combination with the first data structure, the partial refresh method further comprises: obtaining a second layout description statement according to the Flutter dynamic page after the partial refresh, and updating the first layout description statement using the second layout description statement.

[0059] In this embodiment, in order to ensure the persistence of data, for example, after changing part of the view controls by partial refresh, for example, the Flutter dynamic page includes calendar information, and the initial state of the calendar information is January 2022, and the calendar information is set to October 2022 in the use process, in order to keep the calendar information as October 2022 after reloading the Flutter dynamic page, the data persistence is realized by saving the existing settings when reloading.

[0060] Specifically, the second layout description statement is obtained according to the Flutter dynamic page after the partial refresh, that is, the json string representing the updated state of the page is obtained, and then the json string is converted into a json object, the parameters of the object are written into the corresponding control identifier as static data by recursively querying the json object and saved, that is, the first layout description statement is replaced by the second layout description statement, so that the latest data is obtained when reloading the page.

[0061] At this point, the partial refresh of the Flutter dynamic page is completed. Based on the Flutter rendering operation, the data structure of the control identifier and the control component of each view control is established by using the first rendering operation of Flutter, and the corresponding relationship between the control element and the control component of each view control is obtained by using the second rendering operation of Flutter, so as to establish the data structure of the control identifier and the control element of each view control. Therefore, after the partial refresh operation, the corresponding view control to be updated in the partial refresh operation is updated by establishing a new control component using the corresponding control element to realize partial refresh, so as to realize partial refresh of the Flutter dynamic page with small performance consumption and fast refresh speed, which can make up for the problems in the prior art and has wide application prospect.

[0062] Corresponding to the partial refresh method provided by the above-mentioned embodiments, one embodiment of the present application also provides a partial refresh device for implementing the above-mentioned partial refresh method. Since the partial refresh device provided by the embodiment of the present application corresponds to the partial refresh method provided by the above-mentioned several embodiments, the previous embodiments are also applicable to the partial refresh device provided by the present embodiment, and will not be described in detail in the present embodiment.

[0063] As shown in Figure 2 one embodiment of the present application also provides a partial refresh device for implementing the above-mentioned partial refresh method, which comprises:

[0064] A page setting unit is configured to form a first layout description statement of a Flutter dynamic page according to a Flutter dynamic page including a plurality of view controls set in a visual configuration device;

[0065] A control corresponding unit is configured to perform a rendering operation on the first layout description statement according to a Flutter rendering component, to obtain a control identifier, a first control component and a control element of each view control, and to establish a first data structure including the control identifier and the control element of each view control;

[0066] A partial refresh unit is configured to obtain update data and form an update description statement in response to a user operation on the Flutter dynamic page, to establish a second control component of each view control to be updated according to the update description statement, and to perform a partial refresh on the Flutter dynamic page in combination with the first data structure.

[0067] The partial refresh device of the present embodiment is based on a Flutter rendering operation, uses a first rendering operation of Flutter to establish a data structure of the control identifier and the control component of each view control, uses a second rendering operation of Flutter to obtain a corresponding relationship between the control element and the control component of each view control, and thereby establishes a data structure of the control identifier and the control element of each view control. Thus, after the partial refresh operation, the corresponding view control to be updated is updated by establishing a new control component and using the corresponding control element to implement the partial refresh, so as to implement the partial refresh of the Flutter dynamic page with small performance consumption and fast refresh speed, which can make up for the problems in the prior art and has a wide application prospect.

[0068] Another embodiment of the present application provides a computer readable storage medium having a computer program stored thereon, which is executed by a processor to implement the partial refresh method based on the Flutter dynamic page.

[0069] In practical applications, the computer-readable storage medium can adopt any combination of one or more computer-readable media. The computer-readable medium can be a computer-readable signal medium or a computer-readable storage medium. The computer-readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or component, or any combination thereof. More specific examples (non-exhaustive list) of computer-readable storage media include: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In the present embodiment, the computer-readable storage medium can be any tangible medium containing or storing a program, which can be used by an instruction execution system, device or device or used in combination with it.

[0070] A computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, which carries computer-readable program code. Such propagated data signals may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium that can transmit, propagate, or transport a program for use by or in conjunction with an instruction execution system, apparatus, or device.

[0071] Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.

[0072] Computer program code for performing the operations of the present invention may be written in one or more programming languages, or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, C++, and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a stand-alone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., through the Internet using an Internet service provider).

[0073] like Figure 3As shown, another embodiment of the application provides a structural diagram of a computer device. Figure 3 The computer device 12 shown is only one example of a computer device and should not be taken as limiting the scope of functionality or use of embodiments of the application.

[0074] As Figure 3 The computer device 12 is shown in the form of a general purpose computer device. The components of the computer device 12 can include, but are not limited to, one or more processors or processing units 16, a system memory 28, and a bus 18 that couples various system components including the system memory 28 to the processing unit 16.

[0075] The bus 18 represents one or more of any of several types of bus structures, including a memory bus or memory controller, a peripheral bus, a graphics acceleration bus, a processor or local bus using any of a variety of bus architectures. By way of example, these architectures include Industry Standard Architecture (ISA) bus, Micro Channel Architecture (MAC) bus, Enhanced ISA bus, Video Electronics Standards Association (VESA) local bus, and Peripheral Component Interconnect (PCI) bus.

[0076] The computer device 12 typically includes a variety of computer system readable media. Such media can be any available media that is located either internally or externally to the computer device 12, including both volatile and nonvolatile media, removable and non-removable media.

[0077] The system memory 28 can include computer system readable media in the form of volatile memory, such as random access memory (RAM) 30 and / or cache memory 32. The computer device 12 can further include other removable / non-removable, volatile / non-volatile computer system storage media. By way of example only, a storage system 34 can be provided for reading from and writing to non-removable, non-volatile magnetic media (e.g., a "hard drive"). Figure 3 not shown, a magnetic hard disk drive for reading from and writing to non-removable, non-volatile magnetic media (e.g., a "hard drive"). Although not specifically shown, such computer system can further include other removable / non-removable, volatile / non-volatile computer system storage media including, but not limited to, a magnetic floppy disk drive for reading from and writing to a removable, non-volatile magnetic floppy disk, and an optical disk drive for reading from or writing to a removable, non-volatile optical disk such as a CD ROM or other optical media. Figure 3 In these instances, each drive can be connected to the bus 18 by one or more data media interfaces. The memory 28 can include at least one program product having a set (e.g., at least one) of program modules that are configured to carry out the functions of embodiments of the application.

[0078] Program / utility 40, having a set (at least one) of program modules 42, can be stored in memory 28 by way of example, such program modules 42 include an operating system, one or more application programs, other program modules, and program data, each of which or a combination thereof, can include implementation of a networking environment. Program modules 42 generally carry out the functions and / or methodologies of embodiments of the application as described herein.

[0079] Computer device 12 can also communicate with one or more external devices 14 such as a keyboard or pointing device, a display 24, etc. One or more devices enabling a user to interact with computer device 12 and / or one or more devices enabling computer device 12 to communicate with one or more other computing devices. Such communication can be via Input / Output (I / O) interface(s) 22. Additionally, computer device 12 can communicate with one or more networks such as a local area network (LAN), a general wide area network (WAN), and / or a public network such as the Internet via network adapter 20. As Figure 3 illustrated, network adapter 20 communicates with the other components of computer device 12 via bus 18. It should be understood that although not shown, other hardware and / or software components could be used in conjunction with computer device 12. Examples, include, but are not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data archival storage systems, etc. Figure 3

[0080] Processor unit 16 executes various program applications and data processing by running programs stored in system memory 28, such as implementing a Flutter dynamic page based partial refresh method provided by embodiments of the present application.

[0081] It is apparent that the above-described embodiments of the present application are only examples for clearly explaining the present application, and are not intended to limit the embodiments of the present application. For those skilled in the art, other different forms of changes or variations can be made on the basis of the above description, and it is impossible to enumerate all the embodiments here. Any obvious changes or variations derived from the technical solutions of the present application are still within the protection scope of the present application.​

Claims

1. A local refresh method based on Flutter dynamic page, characterized in that: include: Forming a first layout description statement of the Flutter dynamic page according to the Flutter dynamic page including multiple view controls set in the visualization configurator; Performing a rendering operation on the first layout description statement according to the Flutter rendering component, obtaining a control identifier, a first control component, and a control element of each view control, and establishing a first data structure including the control identifier and the control element of each view control, wherein the rendering operation includes a first rendering operation and a second rendering operation, further including: Performing a first rendering operation on the first layout description statement according to the Flutter rendering component to generate a first page view, and establishing a second data structure, where the second data structure includes a control identifier of each view control obtained from the first layout description statement and a corresponding first control component; Performing a second rendering operation on the first page view according to the Flutter rendering component to generate a second page view, and obtaining a control element of each view control and a corresponding third control component; Establishing the first data structure according to the second data structure, the control element and the corresponding third control component; In response to a user operation on the Flutter dynamic page, update data is obtained and an update description statement is formed, a second control component of each view control to be updated is established according to the update description statement, and a partial refresh of the Flutter dynamic page is performed in combination with the first data structure, further including: In response to a user triggering an update operation on the Flutter dynamic page, traversing a preset event list of the Flutter dynamic page to obtain update data and forming an update description statement, the update description statement including a control identifier of a view control to be updated; Performing a first rendering operation according to the update description statement to establish a second control component of each view control to be updated, where the second control component corresponds to the control identifier; According to the control identifier corresponding to each second control component, the control element corresponding to each view control to be updated is obtained from the first data structure, and the second control component and control element of each view control to be updated are used to partially refresh the Flutter dynamic page.

2. The partial refresh method according to claim 1, wherein: The performing a first rendering operation on the first layout description statement according to the Flutter rendering component to generate a first page view and establishing a second data structure further includes: Establishing the second data structure having a key-value structure; The first layout description statement is traversed to obtain all first control components with control identifiers, and the control identifiers are used as keys and the corresponding first control components are used as values ​​and stored in the second data structure.

3. The local refresh method according to claim 2, wherein: The performing a second rendering operation on the first page view according to the Flutter rendering component to generate a second page view, and obtaining the control elements of each view control and the corresponding third control component further includes: In response to the completion of the monitored second rendering operation of the Flutter dynamic page, all control elements and corresponding third control components of the Flutter dynamic page are obtained by traversing the second page view through recursive calls.

4. The partial refresh method according to claim 3, wherein: The establishing of the first data structure according to the second data structure, the control element and the corresponding third control component further comprises: Establishing the first data structure having a key-value structure; Determine whether the third control component exists in the second data structure; if so, store the control identifier corresponding to the third control component as the key and the control element corresponding to the third control component as the value in the first data structure.

5. The local refresh method according to any one of claims 1 to 4, characterized in that: After obtaining update data and forming an update description statement in response to a user operation on the Flutter dynamic page, establishing a second control component for each view control to be updated according to the update description statement, and partially refreshing the Flutter dynamic page in combination with the first data structure, the local refresh method further includes: A second layout description statement is obtained according to the Flutter dynamic page after partial refresh, and the first layout description statement is updated using the second layout description statement.

6. The partial refresh method according to claim 1, wherein: The first layout description statement and the update description statement are JSON strings.

7. A local refresh device based on Flutter dynamic page, characterized in that: include: A page setting unit, configured to form a first layout description statement of a Flutter dynamic page according to a Flutter dynamic page including multiple view controls set in a visualization configurator; A control corresponding unit is configured to perform a rendering operation on the first layout description statement according to the Flutter rendering component, obtain a control identifier, a first control component, and a control element of each view control, and establish a first data structure including the control identifier and control element of each view control, wherein the rendering operation includes a first rendering operation and a second rendering operation, further including: Performing a first rendering operation on the first layout description statement according to the Flutter rendering component to generate a first page view, and establishing a second data structure, where the second data structure includes a control identifier of each view control obtained from the first layout description statement and a corresponding first control component; Performing a second rendering operation on the first page view according to the Flutter rendering component to generate a second page view, and obtaining a control element of each view control and a corresponding third control component; Establishing the first data structure according to the second data structure, the control element and the corresponding third control component; A local refresh unit, configured to obtain update data and form an update description statement in response to a user operation on the Flutter dynamic page, establish a second control component for each view control to be updated according to the update description statement, and perform a local refresh on the Flutter dynamic page in combination with the first data structure, further comprising: In response to a user triggering an update operation on the Flutter dynamic page, traversing a preset event list of the Flutter dynamic page to obtain update data and forming an update description statement, the update description statement including a control identifier of a view control to be updated; Performing a first rendering operation according to the update description statement to establish a second control component of each view control to be updated, where the second control component corresponds to the control identifier; According to the control identifier corresponding to each second control component, the control element corresponding to each view control to be updated is obtained from the first data structure, and the second control component and control element of each view control to be updated are used to partially refresh the Flutter dynamic page.

8. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 6 is implemented.

9. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the program, the method according to any one of claims 1 to 6 is implemented.

Citation Information

Patent Citations

  • Method and device for developing user interface, medium and electronic equipment

    CN111338623A

  • Data packet publishing method and device, dynamic updating method and device, equipment and medium

    CN111740948A