A method and system for implementing a page in a user interface

Abstract

The present invention discloses a method and system for implementing pages in a UI interface. In an embodiment of the present invention, a UI view controller is created in a terminal, namely, an iOS-based Flutter view controller or an Android-based Flutter view controller. The iOS-based Flutter view controller or the Android-based Flutter view controller serves as a container to control and manage multiple pages loaded by the terminal, and the multiple pages are run by a set UI engine. In this way, even if multiple pages are loaded simultaneously on the terminal platform, they are controlled and run by an iOS-based Flutter view controller or an Android-based Flutter view controller and a corresponding UI engine set as a container. The communication between multiple pages is also implemented in the iOS-based Flutter view controller or the Android-based Flutter view controller. Pages are implemented across terminal platforms under the premise of reducing memory consumption and opening time.

Description

Technical Field

[0001] The present invention relates to a user interface (UI) processing technology, and in particular to a method and system for implementing a page in a UI. Background Art

[0002] With the popularization of mobile networks, users have higher and higher requirements for the UI design of the terminals they use, especially the design of UI views. In order to enable terminals with different platforms to load the same UI view created, various tools can be used to create UI views, among which Flutter is used to create UI views. Flutter is an open source toolkit from Google that helps developers efficiently build cross-platform application (APP) views through a set of code libraries. The UI views created by Flutter can be directly implemented on terminal platforms with different operating systems such as Android or iOS. Here, the UI view created by Flutter is called a Flutter page. The following takes the implementation of a Flutter page as an example to specifically explain the process of implementing a page in the UI.

[0003] When implementing a Flutter page in a terminal, if the terminal uses iOS, an iOS-based UI view controller, namely the UIViewController tool, is used; if the terminal uses the Android system, an Android-based UI view controller, namely the Activity tool, is used. UIViewController or Activity is used to control the loading, display, and unloading of Flutter pages, and to communicate and coordinate with UIViewController or Activity of other Flutter pages. For each Flutter page opened in the terminal, a UIViewController or Activity is created to control and maintain the Flutter page that processes data in a stack in memory.

[0004] For each UIViewController or Activity, an engine is created. The engine is actually a thread running in the terminal. If multiple Flutter pages are opened in the terminal, there are corresponding multiple UIViewControllers or Activities for maintenance and control, and corresponding multiple engines are created.

[0005] This implementation method of Flutter pages has disadvantages: first, the terminal consumes a lot of memory. The execution of the engine itself consumes a lot of memory, and each engine has a Flutter page and maintains it. The memory resources of each Flutter page are not shared, which makes the memory grow exponentially, which is easy to cause memory leakage and the risk of Flutter page crash, affecting the user experience; second, it takes a long time to open a Flutter page, because opening a Flutter page creates a corresponding engine, and the initialization process of the engine on the terminal is a time-consuming process, so it increases the time to open the Flutter page; third, the communication management is chaotic. The jump between Flutter pages requires communication, and the communication is implemented by the UIViewController or Activity of the Flutter page. If communication is performed between multiple Flutter pages, the sending and receiving of messages are implemented between different UIViewControllers or Activities, and the management is chaotic. Summary of the invention

[0006] In view of this, an embodiment of the present invention provides a method for implementing a page in a UI, which can implement the page across terminal platforms while reducing memory consumption and opening time.

[0007] An embodiment of the present invention also provides a system for implementing pages in a UI, which can implement pages across terminal platforms while reducing memory consumption and UI view opening time.

[0008] The embodiment of the present invention is implemented as follows:

[0009] A method for implementing a page in a user interface, comprising:

[0010] Set a user interface UI view controller, which acts as a container to manage multiple pages loaded by the terminal in the UI;

[0011] A UI engine corresponding to the UI view controller is set, and the UI engine runs multiple UI pages managed by the UI view controller.

[0012] The UI is set in Flutter mode;

[0013] When the system platform of the terminal is ios, the UI view controller is a Flutter view controller based on ios; when the system platform of the terminal is an Android system, the UI view controller is a Flutter view controller based on the Android system;

[0014] The Flutter view control controller is declared as a singleton, and the Flutter engine is declared as a singleton.

[0015] Also includes:

[0016] When one of the multiple pages jumps to other pages, the UI view controller releases the one page and loads and manages the other pages.

[0017] The UI view controller manages the multiple pages in the memory in the form of a stack, and an internal stack push or stack pop function of each of the multiple pages is disabled;

[0018] The UI view controller communicates with the view controller of the current system platform of the terminal using a set UI method channel;

[0019] Each of the multiple pages is associated with a native page using a unique identifier;

[0020] When the UI view controller loads the other page, the view controller of the current system platform of the terminal notifies the UI view controller to execute through the UI method channel, and the view controller of the current system platform of the terminal is added to the native stack as a subpage by the associated native page;

[0021] When the UI view controller releases one of the pages, the view controller of the current system platform of the terminal notifies the UI view controller to execute through the UI method channel, and the view controller of the current system platform of the terminal deletes the associated native page from the native stack as a sub-page.

[0022] When the UI view controller of the current system platform of the terminal is a Flutter view controller based on iOS, the associated native page is added to the native stack as a subpage, including:

[0023] Creating an add child view controller for the associated native page, and having the add child view controller load the associated native page into the native stack as a subpage;

[0024] Deleting the associated native page from the native stack in a sub-page manner includes:

[0025] A view controller is created for the associated native page and deleted from the parent view. The view controller is used to delete the associated native page.

[0026] When the UI view controller of the current system platform of the terminal is a Flutter view controller based on the Android system, the associated native page is added to the native stack as a subpage, including:

[0027] Creating an additional view controller for the associated native page, and having the additional view controller load the associated native page into the native stack as a subpage;

[0028] Deleting the associated native page from the native stack in a sub-page manner includes:

[0029] A deletion controller is created for the associated native page, and the associated native page is deleted by the deletion controller.

[0030] Furthermore, it also includes:

[0031] In a dynamic process in which one of the multiple pages jumps to another page, when a page jump event is triggered, a screenshot of the current displayed page of the terminal is taken and the screenshot is displayed.

[0032] A system for implementing a page in a UI includes: a setting view controller unit and a setting engine unit, wherein:

[0033] Setting a view controller unit, used to set a UI view controller, the UI view controller acts as a container to manage multiple pages loaded by the terminal;

[0034] An engine setting unit is used to set a UI engine corresponding to the UI view controller, and the UI engine runs multiple pages managed by the UI view controller.

[0035] A device for implementing a page in a UI, comprising:

[0036] A memory; and a processor coupled to the memory, wherein the processor is configured to execute any of the above-mentioned methods for implementing a page in a UI based on instructions stored in the memory.

[0037] A computer-readable storage medium stores a computer program, which, when executed by a processor, implements any of the above methods for implementing a page in a UI.

[0038] As can be seen above, an embodiment of the present invention creates a UI view controller, that is, an iOS-based Flutter view controller or an Android-based Flutter view controller. The iOS-based Flutter view controller or the Android-based Flutter view controller serves as a container to control and manage multiple pages loaded by the terminal, and the multiple pages are run by a set UI engine. In this way, even if multiple pages are loaded simultaneously on the terminal platform, they are controlled and run by an iOS-based Flutter view controller or an Android-based Flutter view controller and a corresponding UI engine set as a container. The communication between multiple pages is also implemented in the iOS-based Flutter view controller or the Android-based Flutter view controller, and the pages are implemented across terminal platforms under the premise of reducing memory consumption and opening time. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] Figure 1 A flow chart of a method for implementing a page in a UI provided by an embodiment of the present invention;

[0040] Figure 2-1 A diagram showing how to implement multiple Flutter pages for background technology;

[0041] Figure 2-2 A diagram showing a method for implementing multiple Flutter pages provided in an embodiment of the present invention;

[0042] Figure 3 A schematic diagram of an implementation framework of a Flutter page provided in an embodiment of the present invention;

[0043] Figure 4 A schematic diagram of a system structure for implementing a page in a UI provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0044] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0045] The terms "first", "second", "third", "fourth", etc. (if any) in the specification and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein, for example. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product, or device that includes a series of steps or units is not necessarily limited to those steps or units that are clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products, or devices.

[0046] The technical solution of the present invention is described in detail with specific embodiments below. The following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described in detail in some embodiments.

[0047] From the background technology, it can be seen that when implementing pages across terminal platforms, the main reason for the large memory consumption of the terminal and the long time to open the page is that a UIViewController or Activity is established for each page for control and maintenance, and a corresponding engine is established for each page for operation. Furthermore, this will also make the communication process between Flutter pages cumbersome and confusing.

[0048] Therefore, in order to reduce memory consumption and page opening time, an embodiment of the present invention creates a UI view controller, that is, a Flutter view controller based on iOS or a Flutter view controller based on Android system. The Flutter view controller based on iOS or the Flutter view controller based on Android system serves as a container to control and manage multiple pages loaded by the terminal, and the multiple pages are run by a set UI engine.

[0049] In this way, even if multiple pages are loaded simultaneously on the terminal platform, they are controlled and run by an iOS-based Flutter view controller or an Android-based Flutter view controller set as a container and a corresponding UI engine. The communication between multiple pages is also implemented within the iOS-based Flutter view controller or the Android-based Flutter view controller, thereby implementing pages across terminal platforms while reducing memory consumption and opening time.

[0050] In an embodiment of the present invention, the UI can be implemented in a Flutter manner, the provided UI view controller is a Flutter view controller, and the UI engine is a Flutter engine. The following takes the implementation of a Flutter page as an example to specifically describe the process of implementing a page in the UI.

[0051] Figure 1 A flow chart of a method for implementing a page in a UI provided by an embodiment of the present invention, wherein the specific steps are as follows:

[0052] Step 101: Set a Flutter view controller, where the Flutter view controller serves as a container to manage multiple Flutter pages loaded by the terminal.

[0053] Step 102: Set a Flutter engine corresponding to the Flutter view controller, and the Flutter engine runs multiple Flutter pages managed by the Flutter view controller.

[0054] Here, the Flutter view controller may be a UI view controller, and the Flutter engine may be a UI engine. This is just an example. When the UI is implemented in Flutter, the Flutter view controller and the Flutter engine are used.

[0055] In the present invention, when the system platform of the terminal adopts ios, the Flutter view controller is a Flutter view controller based on ios, that is, FlutterViewController. When the system platform of the terminal adopts the Android system, the Flutter view controller is a Flutter view controller based on the Android system, that is, FlutteNativerView.

[0056] In this way, the embodiment of the present invention adopts a shared engine approach to solve the problem of implementing multiple Flutter pages on a cross-terminal platform, the problem of non-sharing of resources and memory between multiple Flutter pages, the problem of large memory consumption of the terminal, the problem of long opening time of the Flutter page and the problem of chaotic communication management. Because multiple Flutter pages reuse memory under the operation of one Flutter engine, the memory consumption of the terminal is reduced, and the experience of the terminal user is improved.

[0057] Figure 2-1 This is a diagram showing how to implement multiple Flutter pages for background technology. Figure 2-2A diagram showing a method for implementing multiple Flutter pages provided in an embodiment of the present invention. As shown in the figure, opening n Flutter pages requires setting n engines, where n is a natural number; and using the solution provided in an embodiment of the present invention, an engine is set when opening n Flutter pages, and the n Flutter pages share the engine. In other words, the created FlutterViewController or FlutterNativeView is used as a canvas, and then UIViewController or Activity is used as the logical page control. Each time a Flutter page is opened, the FlutterViewController or FlutterNativeView is notified through communication to draw the current Flutter page, and the Flutter page is loaded into the FlutterViewController or FlutterNativeView.

[0058] In an embodiment of the present invention, multiple Flutter pages share a FlutterViewController or FlutterNativeView and an engine, so it is necessary to set the FlutterViewController or FlutterNativeView and the engine to singleton mode, and declare the FlutterViewController or FlutterNativeView and the engine as singletons in the settings. Singleton mode is a commonly used software setting mode. Its core structure only contains a special class called a singleton. The singleton mode can ensure that in the terminal platform, a class that applies this mode has only one instance, that is, a class has only one object instance, that is, there is only one FlutterViewControllerr or FlutterNativeView and an engine.

[0059] With the embodiment of the present invention, multiple Flutter pages share a FlutterViewController or FlutterNativeView engine, which will also bring problems, such as increasing the stack processing complexity of the Flutter page when processing data in memory. Jumps between Flutter pages require operations on the stack of the Flutter page in memory. In order to solve this problem, the embodiment of the present invention associates a native page with a unique identifier (ID) for each Flutter page, and the push stack (PUSH) and pop stack (pop) inside the Flutter page are prohibited. The associated native page is added to the native stack as a sub-page, or removed from the native stack. The native stack is controlled by a set sub-view controller.

[0060] exist Figure 1 The method further includes:

[0061] When one of the multiple Flutter pages jumps to another Flutter page, the Flutter view controller releases the one Flutter page and loads and manages the other Flutter pages. In this way, the experience effect of the Flutter page during the jump process can be guaranteed.

[0062] When jumping to a Flutter page, you also need to maintain the original experience, including:

[0063] The Flutter view controller manages the multiple Flutter pages in the memory in the form of a stack, and an internal stack push or stack pop function of each of the multiple Flutter pages is prohibited;

[0064] The Flutter view controller communicates with the view controller of the current system platform of the terminal using a set Flutter method channel (FlutterMethodChannel);

[0065] Each of the multiple Flutter pages is associated with a native page using a unique identifier;

[0066] When the Flutter view controller loads the other Flutter pages, the view controller of the current system platform of the terminal notifies the Flutter view controller to execute through FlutterMethodChannel, and the view controller of the current system platform of the terminal is added to the native stack as a sub-page by the associated native page;

[0067] When the Flutter view controller releases one of the Flutter pages, the view controller of the current system platform of the terminal notifies the Flutter view controller to execute through FlutterMethodChannel, and the view controller of the current system platform of the terminal deletes the associated native page from the native stack as a sub-page.

[0068] Among them, when the view controller of the current system platform of the terminal is a Flutter view controller based on ios, the associated native page is added to the native stack as a subpage, including:

[0069] Create a Flutter view controller (addChildviewController) that adds ios for the associated native page, and addChildviewController loads the associated native page into the native stack as a child page;

[0070] Deleting the associated native page from the native stack in a sub-page manner includes:

[0071] A removeFromParentViewController is created for the associated native page, and the associated native page is deleted by the removeFromParentViewController.

[0072] When the view controller of the current system platform of the terminal is a Flutter view controller based on the Android system, the associated native page is added to the native stack as a subpage, including:

[0073] Create an addView controller for the associated native page, and addView loads the associated native page into the native stack as a subpage;

[0074] Deleting the associated native page from the native stack in a sub-page manner includes:

[0075] A remove controller (removecontroller) is created for the associated native page, and the removecontroller deletes the associated native page.

[0076] The specific instructions are as follows.

[0077] The engine set in the present invention is declared as a singleton, and UIViewController is declared as a singleton. Singletons for data communication are registered for the Flutter page and the associated native page, and FlutterMethodChannel is used for communication. The embodiment of the present invention defines a page jump (scheme) protocol as a communication protocol, including:

[0078] Protocol description: scheme: / / host / path…?params={…}

[0079] scheme:

[0080] ntv, native page

[0081] https\http, H5 page

[0082] flutter, flutter page

[0083] host:xstore.sevenfresh.inner

[0084] path: represents a specific page or function, which must be unique

[0085] params={…}, the specific data used, in JSON format

[0086] Let's take an example to illustrate, such as (internal jump) jump product information page agreement

[0087] Ntv: / / xstore.sevenfresh.inner / product / detail? params={“skuId”:123123,“StoreId”:999}.

[0088] like Figure 3 As shown, Figure 3 A schematic diagram of an implementation framework of a Flutter page provided by an embodiment of the present invention. Each Flutter page requires an associated native page controlled by a UI view controller to carry the basic operations and life cycle of the Flutter page, and manages the jump of the Flutter page through the push (pop) of the associated native page. When a Flutter page jumps, it is necessary to add the target Flutter page and delete the source Flutter page.

[0089] The specific process includes:

[0090] When adding the target Flutter page, UIViewController or Activity performs the adding operation of the native page associated with the target Flutter page, and uses FlutterMethodChannel to notify FlutterViewController or FlutterNativeView to perform the stack addition of the target Flutter page. Here, it is necessary to disable the stack push inside the target Flutter page, and use the set first child view controller (addChildViewController or addView) to treat the native page associated with the target Flutter page as a child page and add it to UIViewController or Activity;

[0091] When deleting the source Flutter page, when UIViewController or Activity executes the deletion of the source Flutter page, FlutterMethodChannel is used to notify FlutterViewController or FlutterNativeView to remove the source Flutter page from the stack, and the set second child view controller (removeFromParentViewController or removeView) is used to delete the native page associated with the source Flutter page from the UIViewController or Activity management as a child page;

[0092] Here, the Flutter page is associated with the native page using the set unique identifier.

[0093] In this way, the complete jump process of the Flutter page is realized, and the user experience will not be affected.

[0094] When the jump event of the Flutter page is triggered, during the jump process, the page displayed by the terminal is likely to include part of the source Flutter page and part of the target Flutter page, that is, the two Flutter pages will be reused. Because of the reuse, the terminal first displays the source Flutter page, and then displays the target Flutter page. This is a dynamic process. In this case, if the embodiment of the present invention is used to jump the Flutter page, the dynamic process of the jump cannot be displayed. Therefore, the embodiment of the present invention adopts a screenshot method to screenshot the Flutter page of the dynamic process of the jump and cache it in the memory. When the jump event of the Flutter page is triggered, the screenshot Flutter page is displayed until the target Flutter page is fully displayed, which solves this problem and allows users to reach an unaware state during use.

[0095] Figure 4 A schematic diagram of a system structure for implementing a page in a UI provided by an embodiment of the present invention includes: a setting view controller unit and a setting engine unit, wherein:

[0096] Setting a view controller unit, used to set a UI view controller, the UI view controller acts as a container to manage multiple pages loaded by the terminal;

[0097] An engine setting unit is used to set a UI engine corresponding to the UI view controller, and the UI engine runs multiple pages managed by the UI view controller.

[0098] The embodiment of the present application also provides a computer-readable medium, the computer-readable storage medium stores instructions, and the instructions can execute the steps in the method of implementing a page in a UI as described above when executed by a processor. In practical applications, the computer-readable medium may be included in the device / device / system described in the above embodiment, or it may exist alone without being assembled into the device / device / system. The above-mentioned computer-readable storage medium carries one or more programs, and when the above-mentioned one or more programs are executed, the implementation method of the Flutter page described in the above-mentioned embodiments can be implemented. According to the embodiment disclosed in the present application, the computer-readable storage medium may be a non-volatile computer-readable storage medium, for example, it may include but is not limited to: 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), a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above, but it is not used to limit the scope of protection of the present application. In the embodiment disclosed in the present application, the computer-readable storage medium may be any tangible medium containing or storing a program, which may be used by an instruction execution system, a device or a device or used in combination with it.

[0099] An embodiment of the present invention further provides an electronic device, in which a device for implementing the method according to an embodiment of the present application can be integrated.

[0100] Specifically:

[0101] The electronic device may include a processor with one or more processing cores, a memory of one or more computer-readable storage media, and a computer program stored in the memory and executable on the processor. When executing the program in the memory, the above-mentioned method of implementing a page in a UI may be implemented.

[0102] Specifically, in actual applications, the electronic device may also include components such as a power supply, an input unit, and an output unit. Those skilled in the art will appreciate that the structure of the electronic device in the embodiments of the present invention does not limit the electronic device, and may include more or fewer components than shown in the figure, or combine certain components, or arrange the components differently. Among them:

[0103] The processor is the control center of the electronic device. It uses various interfaces and lines to connect the various parts of the entire electronic device. It performs various functions of the server and processes data by running or executing software programs and / or modules stored in the memory, and calling data stored in the memory, thereby monitoring the electronic device as a whole.

[0104] The memory can be used to store software programs and modules, that is, the above-mentioned computer-readable storage medium. The processor executes various functional applications and data processing by running the software programs and modules stored in the memory. The memory may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function, etc.; the data storage area may store data created according to the use of the server, etc. In addition, the memory may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other volatile solid-state storage devices. Accordingly, the memory may also include a memory controller to provide the processor with access to the memory.

[0105] The electronic device also includes a power supply for supplying power to various components, which can be logically connected to the processor through a power management system, so as to manage charging, discharging, and power consumption through the power management system. The power supply can also include any components such as one or more DC or AC power supplies, recharging systems, power failure detection circuits, power converters or inverters, and power status indicators.

[0106] The electronic device may further include an input unit, which may be used to receive input digital or character information and generate keyboard, mouse, joystick, optical or trackball signal inputs related to user settings and function controls.

[0107] The electronic device may further include an output unit, which may be used to display information input by a user or information provided to a user and various graphical user interfaces, which may be composed of graphics, texts, icons, videos and any combination thereof.

[0108] The flow chart and block diagram in the accompanying drawings of the present application show the possible architecture, function and operation of the system, method and computer program product according to the various embodiments disclosed in the present application. In this regard, each box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the above-mentioned module, program segment or a part of a code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some implementations as replacements, the functions marked in the box can also occur in the order of the standards in different figures. For example, the boxes represented by two connections can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flow chart, and the combination of the boxes in the block diagram or flow chart can be implemented with a dedicated hardware-based system that performs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0109] Those skilled in the art will appreciate that the features described in the various embodiments and / or claims of the present disclosure may be combined and / or combined in a variety of ways, even if such combinations or combinations are not explicitly described in the present application. In particular, without departing from the spirit and teachings of the present application, the features described in the various embodiments and / or claims of the present application may be combined and / or combined in a variety of ways, and all of these combinations and / or combinations fall within the scope disclosed in the present application.

[0110] Specific embodiments are used herein to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only used to help understand the method of the present invention and its core ideas, and is not used to limit the present application. For those skilled in the art, changes can be made in the specific implementation methods and application scopes according to the ideas, spirits and principles of the present invention, and any modifications, equivalent substitutions, improvements, etc. made therein should be included in the scope of protection of this application.

Claims

1. A method for implementing a page in a user interface, characterized in that: include: Set a user interface UI view controller, which acts as a container to manage multiple pages loaded by the terminal in the UI; Setting a UI engine corresponding to the UI view controller, wherein the UI engine runs multiple UI pages managed by the UI view controller; When one of the multiple pages jumps to another page, the UI view controller releases the one page and loads and manages the other page; The UI view controller manages the multiple pages in the memory in the form of a stack, and an internal stack push or stack pop function of each of the multiple pages is disabled; The UI view controller communicates with the view controller of the current system platform of the terminal using a set UI method channel; Each of the multiple pages is associated with a native page using a unique identifier; When the UI view controller loads the other page, the view controller of the current system platform of the terminal notifies the UI view controller to execute through the Flutter method channel, and the view controller of the current system platform of the terminal is added to the native stack as a sub-page by the associated native page; When the UI view controller releases one of the pages, the view controller of the current system platform of the terminal notifies the UI view controller to execute through the Flutter method channel, and the view controller of the current system platform of the terminal deletes the associated native page from the native stack as a sub-page.

2. The method according to claim 1, characterized in that The UI is set in Flutter mode; When the system platform of the terminal is ios, the UI view controller is a Flutter view controller based on ios; when the system platform of the terminal is an Android system, the UI view controller is a Flutter view controller based on the Android system; The Flutter view controller is declared as a singleton, and the Flutter engine is declared as a singleton.

3. The method according to claim 1, characterized in that When the UI view controller of the current system platform of the terminal is a Flutter view controller based on iOS, the associated native page is added to the native stack as a subpage, including: Creating an add child view controller for the associated native page, and having the add child view controller load the associated native page into the native stack as a subpage; Deleting the associated native page from the native stack in a sub-page manner includes: A view controller is created for the associated native page and deleted from the parent view. The view controller is used to delete the associated native page.

4. The method according to claim 1, characterized in that When the UI view controller of the current system platform of the terminal is a Flutter view controller based on the Android system, the associated native page is added to the native stack as a subpage, including: Creating an additional view controller for the associated native page, and having the additional view controller load the associated native page into the native stack as a subpage; Deleting the associated native page from the native stack in a sub-page manner includes: A deletion controller is created for the associated native page, and the associated native page is deleted by the deletion controller.

5. The method according to claim 1, characterized in that Also includes: In a dynamic process in which one of the multiple pages jumps to another page, when a page jump event is triggered, a screenshot of the current displayed page of the terminal is taken and the screenshot is displayed.

6. A system for implementing a page in a UI, characterized in that: include: Set the view controller unit and set the engine unit, where: Setting a view controller unit, used to set a UI view controller, the UI view controller acts as a container to manage multiple pages loaded by the terminal; An engine unit is set, which is used to set a UI engine corresponding to a UI view controller, wherein the UI engine runs multiple pages managed by the UI view controller; when one of the multiple pages jumps to other pages, the UI view controller releases the one of the pages and loads and manages the other pages; the UI view controller manages the multiple pages in the memory in the form of a stack, and the internal push stack or pop stack function of each of the multiple pages is prohibited; the UI view controller communicates with the view controller of the current system platform of the terminal using a set UI method channel; each of the multiple pages is associated with a native page using a unique identifier; when the UI view controller loads the other pages, the view controller of the current system platform of the terminal notifies the UI view controller to execute through a Flutter method channel, and the view controller of the current system platform of the terminal will be added to the native stack by the associated native page as a sub-page; when the UI view controller releases one of the pages, the view controller of the current system platform of the terminal notifies the UI view controller to execute through a Flutter method channel, and the view controller of the current system platform of the terminal deletes the associated native page from the native stack as a sub-page.

7. A device for implementing a page in a UI, characterized in that: include: Memory; and a processor coupled to the memory, wherein the processor is configured to execute the method for implementing a page in a UI according to any one of claims 1 to 5 based on instructions stored in the memory.

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 for implementing a page in a UI according to any one of claims 1 to 5 is implemented.

Images