User interface updating method and electronic device

Abstract

Provided in the present application are a user interface updating method and an electronic device. During user interface updating, the electronic device may update only data of interface components visible to a user, and for interface components invisible to the user, the electronic device may not update data of said interface components. During a user interface update, data of interface components that the electronic device is required to process is less, the efficiency of updating a user interface is higher, and the time consumption and time delay of refreshing the user interface are shorter, so that the energy consumption for displaying the user interface by means of the electronic device using the user interface updating method is lower, and the user experience is better.

Description

User interface updating method and electronic device

[0001] This application claims priority to the Chinese patent application filed with the State Intellectual Property Office of China on November 24, 2023, with application number 202311594096.4 and invention name “Method and electronic device for updating user interface”, the entire contents of which are incorporated by reference into this application. Technical Field

[0002] The present application relates to the field of terminal device software, and in particular, to a method for updating a user interface and an electronic device. Background Art

[0003] The size and weight of portable electronic devices, such as mobile phones and tablets, are significant factors affecting their portability and operability. To enhance the user's photography experience, more and larger lens modules are being installed within limited electronic devices. This, to a certain extent, limits the thinness and lightness of these devices. Therefore, it is important to consider how to implement more shooting functions within the same lens module, improve the imaging quality of a single lens module, and, on this basis, minimize the size of the lens module and reduce the internal space occupied by the lens module within the electronic device.

[0004] Summary of the Invention

[0005] The present application provides a method for updating a user interface. During the process of updating the user interface, the electronic device can only update the data of the interface components visible to the user, without updating the data of the interface components invisible to the user. The electronic device needs to process less data for a user interface update, and the delay of the user interface update is shorter.

[0006] In a first aspect, a method for updating a user interface is provided, which is applied to an electronic device, comprising: obtaining a target operation acting on a first user interface, the target operation being used to change the first user interface, the first user interface comprising a first interface component in a first state and a second interface component in a second state; in response to the target operation, displaying a second user interface, the second user interface comprising a first interface component in a third state and a second interface component in a second state, the first interface component in the third state being different from the first interface component in the first state; wherein the first interface component is a visible component on the interface, and the second interface component is an invisible component on the interface.

[0007] In some scenarios, interface components can also be called interface elements.

[0008] In some scenarios, the first interface component is a component visible on the interface, and the second interface component is a component invisible on the interface. It can also be understood that the first interface component is visible to the user, and the second interface component is invisible to the user. Here, "on the interface" can refer to the display interface of the electronic device.

[0009] In some scenarios, the first interface component is visible on the interface, while the second interface component is invisible. This can also be understood as: the node corresponding to the first interface component is in an active state, while the node corresponding to the second interface component is in an inactive state. When a component is in an inactive state, it can be understood that the component is frozen. The electronic device will not provide data notifications or refresh the UI for this component.

[0010] In one possible implementation, the target operation may be an operation acting on an interface component visible to the user on the first user interface, for example, an operation acting on the first interface component or an operation acting on other interface components visible to the user other than the first interface component.

[0011] In one possible implementation, the state of the interface component may include one or more of the following: the shape of the interface component, the size of the interface component, the color of the interface component, the transparency of the interface component, the position of the interface component, or the content of the interface component.

[0012] In some scenarios, the above technical solution can also be understood as: the electronic device can update the status of the first interface component visible to the user, but not update the status of the second interface component invisible to the user. In this way, during a user interface update, the electronic device needs to process less data of the interface components, and the electronic device takes less time to update the user interface and is more efficient. In addition, since the interface components without updated status are invisible to the user, from the perspective of user perception, the user interface update method provided by this technical solution improves the timeliness of the electronic device's response to user operations without losing the user's visual experience, thereby improving the user experience.

[0013] In combination with the first aspect, in certain implementations of the first aspect, the first interface component in the first state is determined based on a first state variable, and the first interface component in the third state is determined based on a second state variable, the first state variable is the state variable of the first interface component before the target operation, and the second state variable is the state variable of the first interface component after the target operation.

[0014] In a possible implementation, the state variables of the interface component may include variables decorated by one or more of the following state decorators: @State, @Link, or @Prop, etc.

[0015] It should be noted that the first state variable and the second state variable can be understood as different values ​​of the same state variable. For example, the first state variable may include the first value of state variable A, the first value of state variable B, and the first value of state variable C, and the second state variable may include the second value of state variable A, the second value of state variable B, and the second value of state variable C.

[0016] In a possible implementation, before displaying the second user interface, the electronic device may obtain the second state variable.

[0017] The status update of the interface components is driven by the update of the state variables. The state variables are processed by the back-end of the software, and the status of the interface components is processed by the front-end of the software. This technical solution specifically provides an implementation method for the user interface update method, and reasonably distributes the implementation of the technical solution to the back-end and front-end of the software, which is conducive to the implementation of the technical solution through computer software.

[0018] In combination with the first aspect, in certain implementations of the first aspect, displaying the second user interface in response to the target operation also includes: saving a third state variable, where the third state variable is used to determine the state of the second interface component after the target operation.

[0019] In a possible implementation, the above technical solution can also be understood as: saving the value of a state variable used to determine the state of the second interface component after the target operation.

[0020] For interface components that are invisible to the user, the electronic device can save the state variables corresponding to the interface components. When the interface components become visible to the user, the electronic device can use the saved state variables to update the state of the interface components. The implementation of this technical solution is conducive to improving the efficiency of user interface updates when the interface components that are invisible to the user become visible to the user.

[0021] In combination with the first aspect, in some implementations of the first aspect, the second interface component includes a first attribute, and the first attribute is used to indicate that the state of the second interface component in the second user interface is the same as the state of the second interface component in the first user interface.

[0022] In some scenarios, the first attribute may also be understood as indicating a state of “freezing” the second interface component.

[0023] In some scenarios, the second interface component includes the first attribute, which can also be understood as the node corresponding to the second interface component includes the first attribute.

[0024] In one possible implementation, for an interface component that is invisible to the user, the electronic device may execute multiple processing schemes. Different processing schemes may be indicated by different parameter values. The first attribute may be understood as one of the parameter values ​​for indicating the processing scheme.

[0025] The method for handling the status of interface components during the user interface update process is determined by the properties associated with the interface components. Different interface components can correspond to different processing methods. The implementation of this technical solution is conducive to improving the efficiency of electronic devices in updating complex user interfaces containing multiple interface components and reducing the time consumption of user interface updates.

[0026] In combination with the first aspect, in certain implementations of the first aspect, the second interface component includes a first subcomponent, the first subcomponent includes a second attribute, and the second attribute is used to indicate that the state of the first subcomponent in the second user interface is the same as the state of the first subcomponent in the first user interface.

[0027] In a possible implementation, the second attribute and the aforementioned first attribute may be indicated by the same parameter value.

[0028] For interface components corresponding to different nodes on the component tree or node tree, corresponding interface component status processing methods can be set. For user interfaces with complex hierarchical relationships, electronic devices can obtain status processing methods for interface components at different levels by traversing the node attributes of different nodes on the component tree. The implementation of this technical solution is conducive to improving the efficiency of electronic devices in updating complex user interfaces containing multiple interface components and reducing the time consumption of user interface updates.

[0029] In combination with the first aspect, in certain implementations of the first aspect, the second interface component includes a first subcomponent, the first subcomponent includes a second attribute, the second attribute is determined based on the first attribute, and when the first attribute indicates that the state of the second interface component in the second user interface is the same as the state of the second interface component in the first user interface, the second attribute indicates that the state of the first subcomponent in the second user interface is the same as the state of the first subcomponent in the first user interface.

[0030] It should be understood that the second interface component may also include a parent component, and the first attribute of the second interface component may also be determined according to the corresponding attribute of the parent component of the second interface component.

[0031] In some scenarios, the above technical solution can also be understood as: the second attribute can be determined according to the association relationship between the first sub-component and the second interface component.

[0032] By determining whether the status of interface components corresponding to multiple nodes in the node tree needs to be updated through the dependency, association or parent-child relationship between nodes at different levels in the node tree, this technical solution is conducive to improving the efficiency of electronic devices in determining whether the status of different interface components needs to be updated, and is conducive to improving the efficiency of electronic devices in updating user interfaces.

[0033] In combination with the first aspect, in certain implementations of the first aspect, in response to an update operation acting on the second user interface, the update operation is used to switch the second interface component to a component visible on the interface; and a third user interface is displayed, the third user interface including the second interface component in the fourth state, and the second interface component in the fourth state is different from the second interface component in the second state.

[0034] In a possible implementation, the second interface component in the fourth state can be determined according to the aforementioned saved third state variable.

[0035] When the second interface component switches from being invisible to the user to being visible to the user, the electronic device can display the second interface component after the status is updated. The implementation of this technical solution is conducive to improving the efficiency of the electronic device in updating the user interface when the interface component switches from being invisible to the user to being visible to the user.

[0036] In combination with the first aspect, in certain implementations of the first aspect, the first interface component is in an activated state and the second interface component is in an inactivated state, the activated state is determined based on the data contained in the first interface component, and the inactivated state is determined based on the data contained in the second interface component.

[0037] This technical solution can also be understood as the node corresponding to the first interface component is in an activated state, and the node corresponding to the second interface component is in an inactivated state.

[0038] The active and inactive states are determined based on the data contained in the interface components: user-visible interface components are in the active state, while user-invisible interface components are in the inactive state. By using the data of an interface component to determine whether it is visible to the user, the back-end data of the interface component is associated with the front-end state. This technical solution helps improve the efficiency of electronic devices in managing interface components on the user interface and improves the efficiency of user interface updates.

[0039] In combination with the first aspect, in certain implementations of the first aspect, the page stack associated with the first user interface includes multiple pages, the first interface component is located at the top page of the page stack, and the second interface component is not located at the top page of the page stack; or, the first user interface includes a list, the first interface component is a list item within the list range, and the second interface component is a list item outside the list range; or, the first user interface includes multiple tab contents, the first interface component is the tab content displayed by the first user interface, and the second interface component is the tab content not displayed by the first user interface; or, the first user interface includes a slider, the first interface component is located in the page displayed by the slider, and the second interface component is located in the page not displayed by the slider.

[0040] This technical solution specifically provides several scenarios that are applicable to the user interface updating method provided in this application. Electronic devices can apply the user interface updating method provided in this application according to specific scenarios.

[0041] For detailed explanations and beneficial effects of the following technical solutions, please refer to the relevant descriptions in the first aspect. For the sake of brevity, they will not be repeated below.

[0042] In a second aspect, a device for displaying a user interface is provided, which includes an acquisition module and a processing module. The acquisition module is used to: acquire a target operation acting on a first user interface, the target operation is used to change the first user interface, the first user interface includes a first interface component in a first state and a second interface component in a second state; the processing module is used to: display a second user interface in response to the target operation, the second user interface includes a first interface component in a third state and a second interface component in a second state, the first interface component in the third state is different from the first interface component in the first state; wherein the first interface component is a visible component on the interface, and the second interface component is an invisible component on the interface.

[0043] In combination with the second aspect, in certain implementations of the second aspect, the first interface component in the first state is determined based on a first state variable, and the first interface component in the third state is determined based on a second state variable, the first state variable is the state variable of the first interface component before the target operation, and the second state variable is the state variable of the first interface component after the target operation.

[0044] In combination with the second aspect, in some implementations of the second aspect, the processing module is further used to: save a third state variable, where the third state variable is used to determine the state of the second interface component after the target operation.

[0045] In combination with the second aspect, in some implementations of the second aspect, the second interface component includes a first attribute, and the first attribute is used to indicate that the state of the second interface component in the second user interface is the same as the state of the second interface component in the first user interface.

[0046] In combination with the second aspect, in certain implementations of the second aspect, the second interface component includes a first subcomponent, the first subcomponent includes a second attribute, and the second attribute is used to indicate that the state of the first subcomponent in the second user interface is the same as the state of the first subcomponent in the first user interface.

[0047] In combination with the second aspect, in certain implementations of the second aspect, the second interface component includes a first subcomponent, the first subcomponent includes a second attribute, the second attribute is determined based on the first attribute, and when the first attribute indicates that the state of the second interface component in the second user interface is the same as the state of the second interface component in the first user interface, the second attribute indicates that the state of the first subcomponent in the second user interface is the same as the state of the first subcomponent in the first user interface.

[0048] In combination with the second aspect, in certain implementations of the second aspect, in response to an update operation acting on the second user interface, the update operation is used to switch the second interface component to a component visible on the interface; the processing module is also used to: display a third user interface, the third user interface includes the second interface component in the fourth state, and the second interface component in the fourth state is different from the second interface component in the second state.

[0049] In combination with the second aspect, in certain implementations of the second aspect, the first interface component is in an activated state and the second interface component is in an inactivated state, the activated state is determined based on the data contained in the first interface component, and the inactivated state is determined based on the data contained in the second interface component.

[0050] In combination with the second aspect, in certain implementations of the second aspect, the page stack associated with the first user interface includes multiple pages, the first interface component is located at the top page of the page stack, and the second interface component is not located at the top page of the page stack; or, the first user interface includes a list, the first interface component is a list item within the list range, and the second interface component is a list item outside the range of the list; or, the first user interface includes multiple tab contents, the first interface component is the tab content displayed by the first user interface, and the second interface component is the tab content not displayed by the first user interface; or, the first user interface includes a slider, the first interface component is located in the page displayed by the slider, and the second interface component is located in the page not displayed by the slider.

[0051] In a third aspect, an electronic device is provided, which includes a processor and a memory, the memory being used to store program instructions, and the processor being used to: obtain a target operation acting on a first user interface, the target operation being used to change the first user interface, the first user interface including a first interface component in a first state and a second interface component in a second state; in response to the target operation, display a second user interface, the second user interface including a first interface component in a third state and a second interface component in a second state, the first interface component in the third state being different from the first interface component in the first state; wherein the first interface component is a visible component on the interface, and the second interface component is an invisible component on the interface.

[0052] In combination with the third aspect, in certain implementations of the third aspect, the first interface component in the first state is determined based on a first state variable, and the first interface component in the third state is determined based on a second state variable, the first state variable is the state variable of the first interface component before the target operation, and the second state variable is the state variable of the first interface component after the target operation.

[0053] In combination with the third aspect, in certain implementations of the third aspect, the processor is further used to: save a third state variable, where the third state variable is used to determine a state of the second interface component after the target operation.

[0054] In combination with the third aspect, in some implementations of the third aspect, the second interface component includes a first attribute, and the first attribute is used to indicate that the state of the second interface component in the second user interface is the same as the state of the second interface component in the first user interface.

[0055] In combination with the third aspect, in certain implementations of the third aspect, the second interface component includes a first subcomponent, the first subcomponent includes a second attribute, and the second attribute is used to indicate that the state of the first subcomponent in the second user interface is the same as the state of the first subcomponent in the first user interface.

[0056] In combination with the third aspect, in certain implementations of the third aspect, the second interface component includes a first subcomponent, the first subcomponent includes a second attribute, the second attribute is determined based on the first attribute, and when the first attribute indicates that the state of the second interface component in the second user interface is the same as the state of the second interface component in the first user interface, the second attribute indicates that the state of the first subcomponent in the second user interface is the same as the state of the first subcomponent in the first user interface.

[0057] In combination with the third aspect, in certain implementations of the third aspect, in response to an update operation acting on the second user interface, the update operation is used to switch the second interface component to a component visible on the interface; the processor is also used to: display a third user interface, the third user interface includes a second interface component in a fourth state, and the second interface component in the fourth state is different from the second interface component in the second state.

[0058] In combination with the third aspect, in certain implementations of the third aspect, the first interface component is in an activated state and the second interface component is in an inactivated state, the activated state is determined based on the data contained in the first interface component, and the inactivated state is determined based on the data contained in the second interface component.

[0059] In combination with the third aspect, in certain implementations of the third aspect, the page stack associated with the first user interface includes multiple pages, the first interface component is located at the top page of the page stack, and the second interface component is not located at the top page of the page stack; or, the first user interface includes a list, the first interface component is a list item within the list range, and the second interface component is a list item outside the range of the list; or, the first user interface includes multiple tab contents, the first interface component is the tab content displayed by the first user interface, and the second interface component is the tab content not displayed by the first user interface; or, the first user interface includes a slider, the first interface component is located in the page displayed by the slider, and the second interface component is located in the page not displayed by the slider.

[0060] In a fourth aspect, a method for updating an application interface is provided, which is applied to an electronic device, including: displaying a window of an application, the window being used to display a first page, the first page including a first component in a first state displayed in the window and a second component in a second state not displayed in the window; the first component is in an activated state, and the second component is in an inactivated state; in response to a target operation acting on the window, displaying a second page in the window, the second page including the first component in a third state displayed in the window and the second component in the second state not displayed in the window.

[0061] In combination with the fourth aspect, in certain implementations of the fourth aspect, the method further includes: in response to an update operation acting on the window, displaying a third page, the third page including a second component in a fourth state displayed in the window, the second component being in an activated state.

[0062] In combination with the fourth aspect, in certain implementations of the fourth aspect, the first component in the first state is determined based on a first state variable, and the first component in the third state is determined based on a second state variable, the first state variable is the state variable of the first component before the target operation, and the second state variable is the state variable of the first component after the target operation.

[0063] In combination with the fourth aspect, in certain implementations of the fourth aspect, in response to a target operation acting on the window, displaying a second page in the window also includes: saving a third state variable, the third state variable being used to determine the state of the second component after the target operation.

[0064] In combination with the fourth aspect, in some implementations of the fourth aspect, the second component includes a first attribute, and the first attribute is used to indicate that a state of the second component in the second page is the same as a state of the second component in the first page.

[0065] In combination with the fourth aspect, in certain implementations of the fourth aspect, the second component includes a first subcomponent, the first subcomponent includes a second attribute, and the second attribute is used to indicate that the state of the first subcomponent in the second page is the same as the state of the first subcomponent in the first page.

[0066] In combination with the fourth aspect, in certain implementations of the fourth aspect, the second component includes a first subcomponent, the first subcomponent includes a second attribute, the second attribute is determined based on the first attribute, and when the first attribute indicates that the state of the second component in the second page is the same as the state of the second component in the first page, the second attribute indicates that the state of the first subcomponent in the second page is the same as the state of the first subcomponent in the first page.

[0067] In a fifth aspect, a device for displaying an application interface is provided, the device including a processing module, the processing module being used to: display a window of an application, the window being used to display a first page, the first page including a first component in a first state displayed in the window and a second component in a second state not displayed in the window; the first component is in an activated state and the second component is in an inactivated state; in response to a target operation acting on the window, displaying a second page in the window, the second page including the first component in a third state displayed in the window and the second component in the second state not displayed in the window.

[0068] In combination with the fifth aspect, in certain implementations of the fifth aspect, the processing module is also used to: display a third page in response to an update operation acting on the window, the third page including a second component in a fourth state displayed in the window, and the second component is in an activated state.

[0069] In combination with the fifth aspect, in certain implementations of the fifth aspect, the first component in the first state is determined based on a first state variable, and the first component in the third state is determined based on a second state variable, the first state variable is the state variable of the first component before the target operation, and the second state variable is the state variable of the first component after the target operation.

[0070] In combination with the fifth aspect, in certain implementations of the fifth aspect, the processing module is further used to: save a third state variable, where the third state variable is used to determine the state of the second component after the target operation.

[0071] In combination with the fifth aspect, in some implementations of the fifth aspect, the second component includes a first attribute, and the first attribute is used to indicate that a state of the second component in the second page is the same as a state of the second component in the first page.

[0072] In combination with the fifth aspect, in certain implementations of the fifth aspect, the second component includes a first subcomponent, the first subcomponent includes a second attribute, and the second attribute is used to indicate that the state of the first subcomponent in the second page is the same as the state of the first subcomponent in the first page.

[0073] In combination with the fifth aspect, in certain implementations of the fifth aspect, the second component includes a first subcomponent, the first subcomponent includes a second attribute, the second attribute is determined based on the first attribute, and when the first attribute indicates that the state of the second component in the second page is the same as the state of the second component in the first page, the second attribute indicates that the state of the first subcomponent in the second page is the same as the state of the first subcomponent in the first page.

[0074] In a sixth aspect, an electronic device is provided, which includes a processor and a memory, the memory being used to store program instructions, and the processor being used to: display a window of an application, the window being used to display a first page, the first page including a first component in a first state displayed in the window and a second component in a second state not displayed in the window; the first component is in an activated state and the second component is in an inactivated state; in response to a target operation acting on the window, displaying a second page in the window, the second page including the first component in a third state displayed in the window and the second component in the second state not displayed in the window.

[0075] In combination with the sixth aspect, in certain implementations of the sixth aspect, the processor is further used to: in response to an update operation acting on the window, display a third page, the third page including a second component in a fourth state displayed in the window, and the second component is in an activated state.

[0076] In combination with the sixth aspect, in certain implementations of the sixth aspect, the first component in the first state is determined based on a first state variable, and the first component in the third state is determined based on a second state variable, the first state variable is the state variable of the first component before the target operation, and the second state variable is the state variable of the first component after the target operation.

[0077] In combination with the sixth aspect, in certain implementations of the sixth aspect, the processor is further used to: save a third state variable, where the third state variable is used to determine the state of the second component after the target operation.

[0078] In combination with the sixth aspect, in some implementations of the sixth aspect, the second component includes a first attribute, and the first attribute is used to indicate that the state of the second component in the second page is the same as the state of the second component in the first page.

[0079] In combination with the sixth aspect, in certain implementations of the sixth aspect, the second component includes a first subcomponent, the first subcomponent includes a second attribute, and the second attribute is used to indicate that the state of the first subcomponent in the second page is the same as the state of the first subcomponent in the first page.

[0080] In combination with the sixth aspect, in certain implementations of the sixth aspect, the second component includes a first subcomponent, the first subcomponent includes a second attribute, the second attribute is determined based on the first attribute, and when the first attribute indicates that the state of the second component in the second page is the same as the state of the second component in the first page, the second attribute indicates that the state of the first subcomponent in the second page is the same as the state of the first subcomponent in the first page.

[0081] In the seventh aspect, a computer program product is provided, which includes computer program code, and when the computer program code is run on a computer, the method in the first aspect and any possible implementation thereof or the method in the fourth aspect and any possible implementation thereof is executed.

[0082] In an eighth aspect, a computer-readable storage medium is provided, which stores a computer program code. When the computer program code runs on a computer, the method in the first aspect and any possible implementation thereof or the method in the fourth aspect and any possible implementation thereof is executed.

[0083] In the ninth aspect, a chip is provided, comprising a processor for reading instructions stored in a memory. When the processor executes the instructions, the chip implements the method in the first aspect and any possible implementation thereof or the method in the fourth aspect and any possible implementation thereof. BRIEF DESCRIPTION OF THE DRAWINGS

[0084] FIG1 is a schematic diagram of a hardware architecture of an electronic device applicable to an embodiment of the present application.

[0085] FIG2 is a schematic diagram of a software architecture of an electronic device applicable to an embodiment of the present application.

[0086] FIG3 is a schematic diagram of a user interface provided in an embodiment of the present application.

[0087] FIG4 is a schematic diagram of another user interface provided in an embodiment of the present application.

[0088] FIG. 5 is a schematic diagram of an updated user interface shown in FIG. 4 .

[0089] FIG. 6 is another schematic diagram of the user interface shown in FIG. 4 after being updated.

[0090] FIG. 7 is a schematic diagram of a node tree corresponding to the graphical user interface in FIG. 4 .

[0091] FIG8 is a method for updating a user interface provided in an embodiment of the present application.

[0092] FIG9 is a schematic diagram of a user interface display device provided in an embodiment of the present application.

[0093] FIG10 is a schematic diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0094] The technical solution in this application will be described below with reference to the accompanying drawings.

[0095] The terms used in the following embodiments are only for the purpose of describing specific embodiments and are not intended to limit the present application. As used in the specification of this application and the appended claims, the singular expressions "a", "an", "said", "above", "the" and "this" are intended to also include expressions such as "one or more", unless there is a clear contrary indication in the context. It should also be understood that in the following embodiments of the present application, "at least one", "one or more" refer to one, two or more. The term "and / or" is used to describe the association relationship of associated objects, indicating that three relationships can exist; for example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone, where A and B can be singular or plural. The character " / " generally indicates that the previous and subsequent associated objects are in an "or" relationship.

[0096] References to "one embodiment" or "some embodiments" in this specification mean that a particular feature, structure, or characteristic described in conjunction with that embodiment is included in one or more embodiments of the present application. Thus, phrases such as "in one embodiment," "in some embodiments," "in other embodiments," and "in yet other embodiments" appearing in various places in this specification do not necessarily refer to the same embodiment, but rather mean "one or more but not all embodiments," unless otherwise specifically emphasized. The terms "including," "comprising," "having," and variations thereof mean "including but not limited to," unless otherwise specifically emphasized.

[0097] 1 shows a schematic structural diagram of an electronic device 100. The electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display 194, and a subscriber identification module (SIM) card interface 195. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0098] It should be understood that the structures illustrated in the embodiments of the present application do not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may include more or fewer components than shown, or may combine or separate certain components, or arrange the components differently. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0099] The processor 110 may include one or more processing units. For example, the processor 110 may include an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU). The different processing units may be independent devices or integrated into one or more processors.

[0100] The controller may be the nerve center and command center of the electronic device 100. The controller may generate an operation control signal according to the instruction operation code and the timing signal to complete the control of fetching and executing instructions.

[0101] Processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in processor 110 is a cache memory. This memory can store instructions or data that have just been used or are being recycled by processor 110. If processor 110 needs to use the same instruction or data again, it can directly access the memory. This avoids duplicate accesses, reduces processor 110 latency, and thus improves system efficiency.

[0102] In some embodiments, the processor 110 may include one or more interfaces. The interfaces may include an inter-integrated circuit (I2C) interface, an inter-integrated circuit sound (I2S) interface, a pulse code modulation (PCM) interface, a universal asynchronous receiver / transmitter (UART) interface, a mobile industry processor interface (MIPI), a general-purpose input / output (GPIO) interface, a subscriber identity module (SIM) interface, and / or a universal serial bus (USB) interface.

[0103] The MIPI interface can be used to connect the processor 110 to peripheral devices such as the display 194 and the camera 193. MIPI interfaces include the camera serial interface (CSI) and the display serial interface (DSI). In some embodiments, the processor 110 and the camera 193 communicate via the CSI interface to implement the camera function of the electronic device 100. The processor 110 and the display 194 communicate via the DSI interface to implement the display function of the electronic device 100.

[0104] The USB interface 130 is an interface that complies with USB standards and may be a Mini USB interface, a Micro USB interface, a USB Type-C interface, or the like. The USB interface 130 can be used to connect a charger to charge the electronic device 100, or to transfer data between the electronic device 100 and peripheral devices. It can also be used to connect headphones to play audio. This interface can also be used to connect other electronic devices, such as augmented reality devices.

[0105] It is understood that the interface connection relationship between the modules illustrated in the embodiments of the present application is merely an illustrative illustration and does not constitute a structural limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may also adopt different interface connection methods from the above embodiments, or a combination of multiple interface connection methods.

[0106] The wireless communication function of the electronic device 100 can be implemented through the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor and the baseband processor.

[0107] Electronic device 100 implements display functionality through a GPU, display screen 194, and an application processor. A GPU is a microprocessor for image processing that connects display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. Processor 110 may include one or more GPUs that execute program instructions to generate or modify display information.

[0108] Display screen 194 is used to display images, videos, and the like. Display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a MiniLED, a MicroLED, a Micro-oLed, or a quantum dot light-emitting diode (QLED). In some embodiments, electronic device 100 may include one or N display screens 194, where N is a positive integer greater than one.

[0109] Electronic device 100 can implement a camera function using an ISP, camera 193, a video codec, a GPU, a display 194, and an application processor. The ISP processes data fed back by camera 193. Camera 193 is used to capture still images or video. The digital signal processor processes digital signals, and can process not only digital image signals but also other digital signals. The video codec compresses or decompresses digital video.

[0110] NPU is a neural-network (NN) computing processor. By drawing on the structure of biological neural networks, such as the transmission mode between neurons in the human brain, it can quickly process input information and can also continuously self-learn.

[0111] The external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 through the external memory interface 120 to implement a data storage function.

[0112] The internal memory 121 can be used to store computer executable program codes, which include instructions. The processor 110 executes various functional applications and data processing of the electronic device 100 by running the instructions stored in the internal memory 121. The internal memory 121 may include a program storage area and a data storage area. Among them, the program storage area can store an operating system, an application required for at least one function (such as a sound playback function, an image playback function, etc.), etc. The data storage area can store data created during the use of the electronic device 100 (such as audio data, a phone book, etc.), etc. In addition, the internal memory 121 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, a universal flash storage (UFS), etc.

[0113] The electronic device 100 can implement audio functions such as music playback and recording through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the headphone jack 170D, and the application processor.

[0114] The buttons 190 include a power button, a volume button, and the like. The buttons 190 may be mechanical buttons or touch buttons. The electronic device 100 may receive key inputs and generate key signal inputs related to user settings and function control of the electronic device 100.

[0115] Motor 191 can generate vibration prompts. Motor 191 can be used for incoming call vibration prompts and can also be used for touch vibration feedback.

[0116] The indicator 192 may be an indicator light, which may be used to indicate the charging status, power level changes, messages, missed calls, notifications, etc.

[0117] The software system of the electronic device 100 can adopt a layered architecture, an event-driven architecture, a micro-kernel architecture, a micro-service architecture, or a cloud architecture. In the embodiment of the present application, the Android system with a layered architecture is used as an example to illustrate the software structure of the electronic device 100.

[0118] It is understood that the interface connection relationship between the modules illustrated in the embodiments of the present application is merely an illustrative illustration and does not constitute a structural limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may also adopt different interface connection methods from the above embodiments, or a combination of multiple interface connection methods.

[0119] Figure 2 is a software structure diagram of the electronic device 100 according to an embodiment of the present application. The layered architecture divides the software into several layers, each with clear roles and division of labor. The layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into four layers: the application (app) layer, the application framework layer, the Android runtime (Android runtime) and system libraries, and the kernel layer. The application layer may include a series of application packages.

[0120] As shown in FIG2 , the application package may include applications such as camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, and short message.

[0121] The application framework layer provides an application programming interface (API) and programming framework for applications in the application layer. The application framework layer includes some predefined functions.

[0122] As shown in FIG2 , the application framework layer may include a window manager, an activity manager, a package manager, a resource manager, a view system, a telephony manager, a notification manager, and the like.

[0123] Resource Manager, also known as Resource Management Service (RMS), provides various resources for applications, such as localized strings, icons, images, layout files, video files, and so on.

[0124] A window manager, also known as a window management service (WMS), manages windowed programs. It can determine the display size, determine whether a status bar is present, lock the screen, and take screenshots.

[0125] The activity manager, also known as the activity manager service (AMS), manages all application processes in the system.

[0126] The package manager, also known as the package management service (PMS), is responsible for functions such as application installation and uninstallation, component query and matching, and permission management.

[0127] The view system includes visual controls, such as those for displaying text and images. The view system is used to build applications. A display interface can consist of one or more views. For example, a display interface containing a text notification icon might include a view for displaying text and a view for displaying images.

[0128] The Notification Manager allows applications to display notifications in the status bar. These messages can be displayed briefly and then disappear automatically without user interaction. For example, the Notification Manager is used to notify users of completed downloads and message reminders. The Notification Manager can also display notifications in the top status bar of the system as icons or scrolling text, such as notifications from background applications, or as dialog windows on the screen. Examples include text messages in the status bar, beeps, vibrations on electronic devices, and flashing indicator lights.

[0129] The system library can include multiple functional modules, such as a surface manager, media libraries, a 3D graphics processing library (such as OpenGL ES), and a 2D graphics engine (such as SGL).

[0130] The surface manager is used to manage the display subsystem and provide fusion of 2D and 3D layers for multiple applications.

[0131] The media library supports playback and recording of a variety of common audio and video formats, as well as static image files. The media library can support a variety of audio and video encoding formats, such as MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.

[0132] The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, compositing, and layer processing.

[0133] A 2D graphics engine is a drawing engine for 2D drawings.

[0134] The kernel layer is the layer between hardware and software. The kernel layer includes at least display driver, camera driver, audio driver, and sensor driver.

[0135] Before formally introducing the embodiments of the present application, some terms that may be used in the following embodiments are first explained and illustrated.

[0136] State data refers to the data that drives UI updates. Users change state data by triggering component events. Changes in state data cause the UI to re-render.

[0137] State variables are decorated with state decorators. Changes to the state variable value will cause UI rendering updates. Example: @State num:number=1, where @State is the state decorator and num is the state variable.

[0138] A page stack is a data structure used to maintain and manage all pages in an application. An application can have multiple page stacks. For example, an application may have a home screen and a settings screen, both of which serve as entry points to the application. In this case, each entry point may have its own page stack.

[0139] In user interface design, long lists are a type of layout used to display large amounts of data. Long lists can stretch vertically, allowing users to scroll to view more content. This layout is suitable for information-intensive applications such as news and social networking apps. However, when long lists contain large amounts of data, user interface rendering efficiency decreases, impacting the user experience.

[0140] In user interface design, a grid is a layout used to display large amounts of data or functionality. Grid layouts can include four, six, or nine grids. Each grid typically contains a function or group of information, and users can click directly to access a specific function.

[0141] Nodes represent user interface elements and components. All user interface components can be considered to be composed of nodes, each of which can have its own properties and child nodes. In some scenarios, a hierarchical structure of multiple nodes, called a node tree, can be used to represent the entire user interface structure. In some scenarios, a node tree can also be called a component tree. By manipulating and modifying the node tree, corresponding user interface interactions and functions can be implemented.

[0142] For operating system UI development frameworks or application frameworks, TabContent is a subcomponent of the Tabs component. Tabs is a type of container component that allows content switching through tabs. Each tab corresponds to a container component for a content view. TabContent is the specific implementation of these content views. The display and hiding of TabContent is mainly controlled by the Tabs component. In some scenarios, each TabContent corresponds to a tab. When the tab is selected, the corresponding TabContent will be displayed, while other TabContents will be hidden.

[0143] Swiper is a container component that provides the ability to switch page display. Each subcomponent contained in Swiper represents a page.

[0144] Vertical sync (Vsync) refers to a synchronization signal that indicates the number of frames updated per second by the video output device. When the Vsync signal arrives, the entire screen is re-rendered to ensure that the on-screen content is always up to date. This helps improve the visual quality of applications, reduces flicker and latency, and makes applications smoother and more stable.

[0145] The terms front-end and back-end are generic terms used to describe the beginning and end of a process. The front-end collects input information, while the back-end processes it. The interface style and visual presentation of a computer program are considered front-end. In software architecture and programming, the front-end is the part of the software system that directly interacts with the user, while the back-end controls the software's output. Dividing software into front-end and back-end is an abstraction that separates the different functional parts of the software.

[0146] FIG3 is a schematic diagram of a first user interface 10 of an electronic device 100 according to an embodiment of the present application. The first user interface 10 can be used to display different types of news information, etc. In some scenarios, the first user interface 10 can also be referred to as a first application interface 10 or a first interface 10. For ease of description, it is hereinafter referred to as the first interface 10.

[0147] The first interface 10 may include multiple tabs, each of which may be used to display different types of news. For example, the first interface 10 includes a first tab 11, a second tab 12, a third tab 13, and a fourth tab 14. The first tab 11 displays news that the user is interested in, the second tab 12 displays local news, the third tab 13 displays domestic hot news, and the fourth tab 14 displays international hot news.

[0148] In some examples, in response to a user operation, the electronic device can switch between the currently displayed tab content and other tab contents that are not displayed. For example, in response to a user sliding the first interface 10 to the left, the electronic device can switch the second tab content 12 to the current interface display.

[0149] In some examples, in response to a user operation, the electronic device may update the content of the first interface 10. For example, in response to a user sliding the first interface 10 upward, the electronic device may update the information displayed in the first tab content 11, the second tab content 12, the third tab content 13, and the fourth tab content 14 in the first interface 10.

[0150] Since the first interface 10 may include multiple tab contents, when the electronic device updates the status of all tab contents of the first interface 10, the update process involves a large amount of data and a long delay in the update process.

[0151] In order to improve the efficiency of updating the user interface of an electronic device and shorten the delay of data updating of the user interface, the present application provides a method for updating the user interface, which is described as follows.

[0152] In some examples, the electronic device may update the status of interface components visible to the user on the first interface 10 , but not update the status of interface components invisible to the user on the first interface 10 .

[0153] In some examples, the state of an interface component may include one or more of the following: shape, size, color, transparency, position, or content of the interface component. A state update of an interface component can be understood as a change in the interface component from a first state to a second state, where one or more of the shape, size, color, transparency, position, or content of the interface component may differ between the first and second states.

[0154] In some examples, updating of the user interface can be understood as a change in the number of interface components included in the user interface and / or a change in the status of the interface components, etc.

[0155] Taking the status update of the interface components included in the first interface 10 as an example, with reference to FIG3 , for the first tab content 11, the second tab content 12, the third tab content 13, and the fourth tab content 14 included in the first interface 10, when the first interface 10 displays the information included in the first tab content 11, in response to the user's operation of updating the status of the first interface 10, the electronic device may only update the status of the first tab content 11 currently viewed by the user, without updating the status of the second tab content 12, the third tab content 13, and the fourth tab content 14. Similarly, when the first interface 10 displays the information included in the third tab content 13, in response to the user's operation of updating the status of the first interface 10, the electronic device may only update the status of the third tab content 13 currently viewed by the user, without updating the status of the other three tab contents.

[0156] The electronic device can only update the status of the interface components visible to the user on the first interface 10, and the status of the interface components invisible to the user may not be updated. This technical solution reduces the amount of data that the electronic device needs to process during a user interface update to a certain extent, which is conducive to improving the efficiency of the electronic device in updating data on the user interface.

[0157] FIG4 is a schematic diagram of a second interface 20A provided in an embodiment of the present application. The second interface 20A may be a user interface for applications such as news and consulting. The second interface 20A may display multiple consulting information, which may be presented in a list format. Each piece of information in the list may be presented using an interface component of the second interface 20A. In other words, the electronic device may display the content to be displayed on the second interface 20A using multiple interface components.

[0158] Due to the limited area of ​​the display screen of the electronic device, the second interface 20A can only display a portion of the aforementioned multiple interface components. The user can view content that is not displayed on the current interface or other content hidden outside the current interface by operating the second interface 20A. In other words, the second interface 20A may include a visible portion and an invisible portion. The visible portion may include one or more interface components in the second interface 20A that are currently viewable by the user, and the invisible portion may include one or more interface components in the second interface 20A that are currently not viewable by the user.

[0159] In one possible implementation, in response to the operation of sliding the second interface 20A "upward", the electronic device can display content that is not currently displayed on the second interface 20A, or, in response to the operation of sliding the second interface 20A along the first direction 21A, the electronic device can update the content currently displayed on the second interface 20A.

[0160] In one possible implementation, in response to the operation of sliding the second interface 20A "to the left" or "to the right", the electronic device can display content that is not currently displayed on the second interface 20A, or, in response to the operation of sliding the second interface 20A along the second direction 21B, the electronic device can update the currently displayed content of the second interface 20A.

[0161] For example, in Figure 4, the second interface 20A may include a first display component 22A, a second display component 22B, a third display component 22C, a fourth display component 22D, and a fifth display component 22E. The first display component 22A, the second display component 22B, and the third display component 22C are currently visible to the user and are part of the visible portion of the second interface 20A. The fourth display component 22D and the fifth display component 22E are currently invisible to the user and are part of the invisible portion of the second interface 20A.

[0162] In some examples, for the visible portion in the second interface 20A, in response to a user operation, the electronic device may update the status of one or more interface components of the visible portion.

[0163] For example, as shown in Figure 4 , a first display component 22A in the second interface 20A can be used to display first consultation information. This first display component 22A also includes a first "View Comments" control 23. In response to clicking this first "View Comments" control 23, the electronic device can update the displayed content of the first display component 22A. In response to clicking the first "View Comments" control 23, the position of the second display component 22B changes, and the electronic device can also update the position of the second display component 22B. The electronic device may not update the status of the fourth display component 22D and the fifth display component 22E.

[0164] For example, in response to clicking the first "View Comments" control 23, the electronic device may display a third interface 20B as shown in FIG5 . The third interface 20B may include a first display component 22A. In this state, the first display component 22A further includes a first sub-display component 24. The first sub-display component 24 may be used to display comments on the first consultation information. The third interface 20B may also include a second display component 22B. The position of the second display component 22B in the third interface 20B is different from that in the second interface 20A.

[0165] In some examples, while the electronic device is updating the status of the first display component 22A and the second display component 22B, the corresponding data of the fourth display component 22D and / or the fifth display component 22E may change. For example, a new comment may be added to the consultation displayed by the fourth display component 22D. In this case, the electronic device may record the data change of the fourth display component 22D. When the fourth display component 22D is visible to the user, the electronic device may update the status of the fourth display component 22D based on the recorded data change of the fourth display component 22D.

[0166] For example, in response to a "downward" sliding operation on the third interface 20B, the electronic device may display a fourth interface 20C as shown in FIG6 . The fourth interface 20C may include an updated fourth display component 22D, a first display component 22A, a third display component 22C, and a fifth display component 22E. The fourth display component 22D, the first display component 22A, and the third display component 22C are visible to the user, while the fifth display component 22E is not visible to the user. Due to the addition of comment information, the fourth display component 22D also includes a second "view comments" control 25 similar to the aforementioned first "view comments" control 23. In response to the operation of the second "view comments" control 25, the electronic device may display the comment information corresponding to the content displayed in the fourth display component 22D.

[0167] In some examples, the interface components included in the user interface, including the aforementioned first interface 10 and second interface 20A, can be referred to as nodes. Multiple nodes within the user interface can be organized into a whole according to a certain hierarchical relationship. This whole can be referred to as a node tree or component tree. The node tree can be used to indicate the relationship between the user interface and the interface components, as well as the relationship between interface components at different levels. The data or information of each node in the node tree can be used to indicate the state (such as appearance, etc.) of the interface component corresponding to the node, and the interface component corresponding to the node can be used to indicate how the user interacts with the node.

[0168] Here, the data or information of a node may also be referred to as the state data of the node or the state data of the interface component corresponding to the node.

[0169] Figure 7 exemplarily provides a node tree 30 of the second interface 20A. The root node 31 of the node tree 30 may correspond to the second interface 20A. The second interface 20A may include multiple interface components. Accordingly, the root node 31 may include multiple child nodes. The root node 31 may also be called the parent node of these child nodes.

[0170] The multiple sub-nodes may include a first type of sub-node and a second type of sub-node. The first type of sub-node may include an active sub-node, and the second type of sub-node may include an inactive sub-node. In some scenarios, the active sub-node may correspond to an interface component visible to the user in the second interface 20A, and the inactive sub-node may correspond to an interface component not visible to the user in the second interface 20A. In other words, the interface component corresponding to the first type of sub-node in the second interface 20A is visible to the user, and the interface component corresponding to the second type of sub-node in the second interface 20A is not visible to the user.

[0171] 4 and 7 , activated subnodes may include a first subnode 32A, a second subnode 32B, and a third subnode 33C. The first subnode 32A, the second subnode 32B, and the third subnode 33C correspond to the first display component 22A, the second display component 22B, and the third display component 22C in the second interface 20A, respectively. In other words, the data in the first subnode 32A, the second subnode 32B, and the third subnode 33C can be used to determine the status of the first display component 22A, the second display component 22B, and the third display component 22C, respectively.

[0172] In some examples, for a node in an activated state, if the data of the node changes, the state of the interface component corresponding to the node may change accordingly.

[0173] For example, when the data of the first subnode 32A changes, the state of the first display component 22A will change accordingly; when the data of the second subnode 32B changes, the state of the second display component 22B will change; when the data of the third subnode 32C changes, the state of the third display component 22C will change.

[0174] In some examples, for an interface component visible to a user, a change in the state of the interface component corresponds to a data change of a node corresponding to the interface component.

[0175] For example, in response to an operation on the second interface 20A (e.g., an operation on one or more of the first display component 22A, the second display component 22B, or the third display component 22C), the electronic device may update one or more of the data of the first node 32A, the data of the second node 32B, and the data of the third node 32C. The electronic device may apply the updated node data to display the updated state of the interface component corresponding to the node.

[0176] In some examples, the data of a node can be represented by a state variable of the interface component corresponding to the node. For example, the state variable of the interface component can refer to a variable decorated with one or more of the following state decorators: @State, @Link, @Prop, @Provide, @Consume, or @ObjectLink.

[0177] The @State decorated variable holds the state of the component to which it belongs and can serve as a data source for unidirectional and bidirectional synchronization of its child components. When its value changes, it triggers a render refresh of the related components.

[0178] Variables decorated with @Prop can establish a one-way synchronization relationship with the parent component. Variables decorated with @Prop are mutable, but modifications will not be synchronized back to the parent component.

[0179] The variable decorated with @Link establishes a state variable with a two-way synchronization relationship with the parent component. The parent component will accept the synchronization of modifications to the variable decorated with @Link, and the updates of the parent component will also be synchronized to the variable decorated with @Link.

[0180] Variables decorated with @Provide / @Consume are used to synchronize state variables across component hierarchies (multi-layer components). They can be bound through aliases or property names without passing them through the parameter naming mechanism.

[0181] The variable decorated with @ObjectLink receives an instance of the class decorated with @Observed, which is used to observe multi-layer nested scenarios and establish two-way synchronization with the parent component's data source.

[0182] The first subnode 32A, the second subnode 32B, and the third subnode 33C can each include one or more subnodes. For ease of explanation, the first subnode 32A, the second subnode 32B, and the third subnode 33C can also be referred to as the first-level node 32A, the first-level node 32B, and the first-level node 32C, and the subnodes of these three first-level nodes (32A, 32B, 32C) can be referred to as second-level nodes. In other words, a first-level node can include zero, one, or more second-level nodes.

[0183] In some scenarios, the parent node (31) of the three first-level nodes, namely the first child node 32A, the second child node 32B and the third child node 33C, can be called a zero-level node.

[0184] In some examples, the first display component 22A, the second display component 22B, and the third display component 22C may each include a window, and each of these display components may contain zero, one, or multiple interface elements, such as a menu bar, a toolbar, or a content area. The first display component 22A may correspond to the first-level node 32A, and the interface elements included in the first display component 22A may correspond to the subnodes of the first-level node 32A. The second display component 22B may correspond to the first-level node 32B, and the interface elements included in the second display component 22B may correspond to the subnodes of the first-level node 32B. The third display component 22C may correspond to the first-level node 32A, and the interface elements included in the third display component 22C may correspond to the subnodes of the first-level node 32C.

[0185] Exemplarily, the first display component 22A includes a menu bar and a content area. Accordingly, the first-level node 32A may include two sub-nodes. For example, the two sub-nodes are respectively referred to as the second-level node 33A and the second-level node 33B.

[0186] Exemplarily, the second display component 22B does not include any interface elements, and accordingly, the first-level node 32B may include zero child nodes.

[0187] Exemplarily, the third display component 22C includes a content area, and accordingly, the first-level node 32C may include a child node, such as a second-level node 33C.

[0188] Similarly, the menu bar and content area within the aforementioned first display component 22A and the content area within the third display component 22C can include zero, one or more interface elements. Accordingly, the secondary node 33A, the secondary node 33B and the secondary node 33C can include zero, one or more third-level nodes.

[0189] Exemplarily, the secondary node 33A and the secondary node 33C may include zero third-level nodes, and the secondary node 33B may include two third-level nodes, for example, referred to as the third-level node 34A and the third-level node 34B respectively.

[0190] Continuing with reference to Figure 7 , the root node 31 may also include a fourth child node 32D and a fifth child node 32E, or referred to as a first-level node 32D and a first-level node 32E. Both the first-level node 32D and the first-level node 32E are in an inactive state. In other words, the first-level node 32D and the first-level node 32E are both used to indicate interface components of the invisible portion of the second interface 20A. For example, the fourth display component 22D and the fifth display component 22E in the second interface 20A, which are invisible to the user, correspond to the first-level node 32D and the first-level node 32E, respectively.

[0191] Similar to the aforementioned first-level nodes 32A, 32B, and 32C, first-level nodes 32D and 32E may also include zero, one, or multiple child nodes. For example, first-level node 32D includes zero child nodes, and first-level node 32E includes two child nodes, referred to as second-level node 33D and second-level node 33E, respectively. Second-level node 33D also includes one child node, third-level node 34C.

[0192] Since the fourth display component 22D and the fifth display component 22E are both invisible parts of the second interface 20A, the interface elements contained in the fourth display component 22D or the fifth display component 22E are also invisible to the user. In other words, the secondary node 33D, the secondary node 33E and the tertiary node 34C corresponding to the interface elements contained in the fourth display component 22D or the fifth display component 22E are all in an inactive state.

[0193] In some examples, the portion of the user interface visible to the user may include interface components that can directly interact with the user or trigger corresponding operations, and the portion of the user interface invisible to the user may include interface components that cannot directly interact with the user or cannot directly trigger corresponding operations. For example, interface components that are not currently displayed by the electronic device or are obscured by other interface elements.

[0194] In some examples, an active state of a node in a node tree may mean that the interface component corresponding to the node is visible to the user, and an inactive state of a node in a node tree may mean that the interface component corresponding to the node is invisible to the user. In this case, the active state of a node and the visibility of the interface component corresponding to the node to the user can be understood as mutually related concepts, and the inactive state of a node and the invisibleness of the interface component corresponding to the node to the user can be understood as mutually related concepts.

[0195] In a navigation scenario, the electronic device may hide interface components of non-top pages in a page stack when switching a navigation destination (NavDestionation), and these hidden components may be set to an inactive state.

[0196] For example, when a page stack has multiple pages, only the top page is visible to the user, and other pages are not visible to the user. The electronic device can determine that the interface components included in the top page are activated, and the interface components included in the non-top pages are inactivated.

[0197] For another example, for a user interface containing multiple TabContents, the electronic device can determine that one or more interface components contained in the TabContent displayed on the current interface are in an activated state, and one or more interface components contained in the TabContent not displayed on the current interface are in an inactivated state.

[0198] In a scrolling scenario, the electronic device may set interface components outside the scrolling area in the user interface to an inactive state.

[0199] For example, when a Swiper includes multiple invisible child nodes, the electronic device may determine that the interface components corresponding to the child nodes displayed on the current interface are in an activated state, and the interface components corresponding to the child nodes not displayed on the current interface are in an inactivated state.

[0200] For another example, in the case of a long list, the electronic device can determine whether the list items in the list are within the list range. For list items within the list range, the electronic device can determine that they are in an active state, and for list items outside the list range, the electronic device can determine that they are in an inactive state. In some scenarios, for example, the size of the list matches the size of the display area of ​​the electronic device display screen. List items within the list range are visible to the user, and list items outside the list range are not visible to the user.

[0201] In the above scenario, the node tree corresponding to the user interface includes both active nodes and inactive nodes. In other words, the user interface includes both user-visible and user-invisible interface components. It should be noted that in addition to the above examples, there may be many other examples, and this application does not limit them.

[0202] In some examples, each node in a node tree corresponding to a user interface may include a first node attribute, which may be used to indicate that the node is in an inactive state. Alternatively, each interface component in the user interface may include a first component attribute, which may be used to indicate that the interface component is not visible to the user.

[0203] In some scenarios, the first node attribute of a node and the first component attribute of the interface component corresponding to the node may have mutually related meanings. The following mainly describes the first node attribute of a node.

[0204] In some examples, the aforementioned first node attribute can be used to indicate how to process data of an inactive node during the process of updating the node's data. In other words, the electronic device can determine whether to apply the new data of the node based on the first node attribute.

[0205] Exemplarily, when the first node attribute of a node indicates that the node is in an inactive state, the first node attribute may also be used to indicate that new data of the node is not applied.

[0206] Taking second interface 20A in FIG4 as an example, the first node attributes of primary node 32D and primary node 32E may indicate that primary node 32D and primary node 32E are in an inactive state, respectively. Thus, in response to an operation to update second interface 20A, the electronic device may not apply the new node data of primary node 32D and primary node 32E.

[0207] In some scenarios, the above technical solution can also be understood as follows: the electronic device can determine whether to update the status of the interface component based on the first component attribute of the interface component. If the first component attribute of the interface component indicates that the interface component is in a state that is invisible to the user, the electronic device may not update the status of the interface component.

[0208] Taking the second interface 20A in FIG4 as an example, the first component attributes of the fourth display component 22D and the fifth display component 22E may respectively indicate that the fourth display component 22D and the fifth display component 22E are not visible to the user. In response to the operation of updating the second interface 20A, the electronic device may not update the status of the fourth display component 22D and the fifth display component 22E.

[0209] For example, when the first node attribute indicates that the node is in an inactive state, the first node attribute can also be used to indicate recording or saving data changes of the node. When the node is in an active state, the electronic device can update the data of the node based on the recorded data changes of the node. For example, the data change of the node can include the value of the state variable of the interface component corresponding to the node after the change.

[0210] Taking the second interface 20A in FIG. 4 as an example, the first node attributes of the first-level nodes 32D and 32E can respectively indicate that the first-level nodes 32D and 32E are in an inactive state. Thus, in response to an operation to update the second interface 20A, the electronic device can record the data changes of the first-level nodes 32D and 32E without updating the states of the fourth display component 22D and the fifth display component 22E. If the first node attributes of the first-level nodes 32D and 32E indicate that both are in an active state, the electronic device can update the states of the fourth display component 22D and the fifth display component 22E based on the recorded data changes of the first-level nodes 32D and 32E.

[0211] In order to improve the efficiency of the electronic device's method for determining the data processing of each inactive node in the node tree and improve the data update efficiency of the electronic device's user interface, the electronic device can determine the inactive state of the child node corresponding to the parent node based on the inactive state of the parent node. In other words, the electronic device can determine that multiple nodes in the node tree are inactive based on the logical relationships (dependencies, hierarchical relationships between parent and child nodes) between nodes at different levels in the node tree.

[0212] In some examples, the first node attribute may be used to indicate that the processing method for data of the current node is the same as the processing method for data of its parent node.

[0213] Exemplarily, if the first node attribute of the parent node of the current node indicates not applying new data (or not updating the status of the interface component corresponding to the parent node), the electronic device can determine that the processing method for the data of the current node is: not applying new data (or not updating the status of the interface component corresponding to the current node).

[0214] Exemplarily, the first node attribute of the parent node of the current node indicates saving the new data of the parent node and not applying the new data of the parent node. The electronic device can determine that the processing method of the data of the current node is: saving the new data and not applying the new data of the node.

[0215] Generally, the interface element corresponding to a parent node is invisible to the user, and the interface components corresponding to the child nodes of the parent node are also invisible to the user. Therefore, the method of processing the data of the child node by determining the first node attribute of the parent node shortens the process of the electronic device obtaining the first node attribute of each node in the node tree, which to a certain extent helps to improve the efficiency of the electronic device in updating the data of the nodes in the node tree and helps to reduce the delay when the electronic device updates the display content of the user interface.

[0216] It should be noted that the method of processing the data of the current node determined according to the first node attribute of the parent node can be understood as the method of processing the data of the third-level node determined according to the first node attribute of the second-level node in the above text, or it can be understood as the method of processing the data of the third-level node determined according to the first node attribute of the first-level node in the above text, or it can be understood as the method of processing the data of the fourth-level node determined according to the first node attribute of the first-level node. This application does not impose any restrictions on this.

[0217] For example, for the second-level node 33D in FIG7 , the electronic device can determine that the first-level node 32E is in an inactive state based on the first node attribute of its parent node (the first-level node 32E), and thus not update the state of the fifth display component 22E during the user interface update process. Furthermore, the electronic device can also determine, based on the first node attribute of the fifth first-level node 32E, not update the state of the display component corresponding to the second-level node 33D during the user interface update process.

[0218] Also illustratively, when it is determined that the secondary node 33D is in an inactive state, it can be determined that the state of the interface component corresponding to the child node (third-level node 34C) of the secondary node 33D will not be updated during the user interface update process.

[0219] In some scenarios, the above technical solution can also be understood as each node in the node tree can include a first node attribute, and the first node attribute can be used to determine a method for processing data of inactive nodes during a user interface update.

[0220] In some examples, the first node attribute may include a first attribute value, such as "true", which may be used to indicate that new data of the node is not applied during a user interface update.

[0221] In some examples, the first attribute value may also be used to indicate that data changes of inactive nodes are recorded during a user interface update, and that data of the node after the change (new data of the node) is not applied.

[0222] In some examples, the first node attribute may include a second attribute value, such as "null", which may be used to indicate that during the user interface update process, the processing method for the node's data may be determined based on the first node attribute of the node's parent node.

[0223] In some examples, the first attribute value may be identified by one, two, or more bits.

[0224] Exemplarily, if the first node attribute of the parent node of the current node indicates that the state of the interface component corresponding to the parent node is not updated during the user interface update process, then the state of the interface component corresponding to the current node is also not updated during the user interface update process.

[0225] Exemplarily, the first node attribute of the parent node of the current node indicates that changes in the state variables of the parent node are recorded during the user interface update process, and the state of the corresponding interface component of the parent node is not updated. In this case, changes in the state variables of the current node are also recorded during the user interface update process, and the state of the interface component corresponding to the current node is not updated.

[0226] For example, in the UI development framework or application framework of the operating system, the electronic device can perform the following operations so that the data of inactive nodes is not updated during the user interface update process. It should be understood that the user interface update method provided in this application can be applied to a variety of user interface developments, and this application does not impose any restrictions on this.

[0227] In response to an operation on the user interface, when the activation state or the inactivation state of the backend frame node (FrameNode) changes, the electronic device may traverse all child nodes in all node trees.

[0228] In some examples, if the interface component corresponding to the child node is a custom component, the electronic device can call the setActiveInternal method (e.g., setActiveInternal in JavaScript, Java, Kotlin, Objective-C, or Swift) to notify the front end of the activation state or inactivation state. After the front end obtains the activation state or inactivation state, the electronic device can perform corresponding operations based on the whileInactive parameter set by the application.

[0229] Exemplarily, when the value of the whileInactive parameter is true, the electronic device will not update the state of the interface component corresponding to the node in this round of updates.

[0230] Exemplarily, when the value of the whileInactive parameter is default or null or other values, the electronic device may determine the value of the whileInactive parameter of the current node according to the value of the whileInactive parameter of the parent node of the current node on the node tree.

[0231] For example, if the value of the whileInactive parameter of the parent node of the current node is true, the electronic device may determine that the value of the whileInactive parameter of the current node is also true. The electronic device will not update the state of the interface component corresponding to the node in this round of update.

[0232] For example, if there is a node in the link of the current node's parent node (e.g., the parent node of the current node's parent node) whose whileInactive parameter value is true, the electronic device can determine that the whileInactive parameter value of the current node is also true. The electronic device will not update the state of the interface component corresponding to this node in this round of updates.

[0233] For another example, if the value of the whileInactive parameter of a node that does not exist in the link of the parent node of the current node is true, the electronic device will update the state of the interface component corresponding to the node in this round of updating.

[0234] For example, when the TabContent interface component changes from being visible to the user to being invisible to the user, the backend FrameNode corresponding to TabContent will change from an active state to an inactive state. The electronic device (backend) can traverse all child nodes of the node corresponding to the TabContent. When the component corresponding to the child node is a custom component or a component modified by @Component, the child component of the TabContent interface component, the DelayedLinkComponent, can call the setActiveInternal method on the JavaScript side to notify the front end that the node corresponding to the DelayedLinkComponent is in an inactive state. When the front end obtains the inactive state, the electronic device can, based on the value of the whileInactive parameter corresponding to the DelayedLinkComponent being true, not trigger the viewPropertyHasChanged event.

[0235] In the case where the electronic device does not update the state of the interface component corresponding to the node, the electronic device may process different state variables using different processing methods.

[0236] For example, when the @State state variable changes, the electronic device can set all state variables of the interface components corresponding to the inactive state nodes to enable delayed notification (enableDelayedNotification). Since the state variables are all set to delayed notification, the electronic device will not mark the change of the state variable as needing update (markneedupdate). In this way, during the process of updating the user interface, the electronic device will not update the data of the inactive state node through the vsync signal.

[0237] For another example, when the @Link state variable changes, the electronic device can mark that the @Link state variable has changed, but will not call the synchronization partner change (syncPeerChanged) to indicate that the state variable has changed, nor will the electronic device call the view property has changed (viewPropertyHasChanged) to indicate that the view (view) where the state variable is located has changed.

[0238] For another example, when the @Prop state variable changes, the electronic device will not call viewPropertyHasChanged to indicate that the view where the state variable is located has changed.

[0239] In some examples, in response to a user operation (e.g., sliding an interface element or pinning an interface element), the previously inactive node transitions to an active state, or in other words, the previously invisible interface element transitions to a visible state. The electronic device can update the data of the active node during the user interface update process by performing the following operations.

[0240] For example, when a node is converted from an inactive state to an active state, the electronic device can mark all nodes whose state variables have changed as dirty nodes, or in other words, the electronic device can use the vsync signal to update the state of the interface component corresponding to the dirty node according to the dependent element identifier (dependentElementid) of the state variable.

[0241] For example, in response to the TabContent component changing from invisible to the user to visible to the user, or in response to the node corresponding to the TabContent component changing from an inactive state to an active state, the electronic device can execute an update function through a vsync signal to update the data previously marked as a dirty node, thereby realizing data update of the user interface node.

[0242] Figure 8 shows a user interface display method provided by an embodiment of the present application. In response to operations on the user interface, the electronic device can update the status of interface components visible to the user without updating the status of interface components invisible to the user, thereby improving the efficiency of user interface updates.

[0243] S110: Acquire a target operation acting on the first user interface.

[0244] The first user interface may include a first interface component and a second interface component, wherein the first interface component is visible to the user and the second interface component is invisible to the user. The target operation is used to change the first user interface.

[0245] In some examples, in a first user interface, a first interface component is in a first state, and a second interface component is in a second state. The states of the interface components may include one or more of the following: shape of the interface component, size of the interface component, color of the interface component, transparency of the interface component, position of the interface component, or content of the interface component.

[0246] In some scenarios, the first interface component is visible to the user, which can be understood as the node corresponding to the first interface component is in an activated state. Correspondingly, the second interface component is not visible to the user, which can be understood as the node corresponding to the second interface component is in an inactivated state.

[0247] Whether the first interface component is in an activated state can be determined based on data included in the first interface component, and whether the second interface component is in an inactivated state can be determined based on data included in the second interface component.

[0248] The first interface component being visible to the user may mean that the first interface component can directly interact with the user, or that the user can trigger corresponding operations of the first interface component. For example, the first interface component can receive user input information. For another example, the first interface component can respond to user drag operations, etc. The second interface component being invisible to the user may mean that the second interface component cannot directly interact with the user, or that the user cannot trigger corresponding operations of the second interface component.

[0249] In some examples, the first interface component is the interface component currently displayed by the electronic device, or in other words, the first interface component can be located in the display area of ​​the electronic device's display screen. The second interface component is the interface component not currently displayed by the electronic device, or in other words, the second interface component can be located outside the display area of ​​the electronic device's display screen. For example, the first interface component can be the first display component 22A shown in Figure 4, and the second interface component can be the fourth display component 22D shown in Figure 4.

[0250] In some examples, the page stack associated with the first user interface includes multiple pages, the first interface component is located on the top page of the page stack, and the second interface component is located on other pages in the page stack except the top page.

[0251] In some examples, the first user interface includes multiple TabContents, the first interface component may be a TabContent currently displayed by the electronic device, and the second interface component may be a TabContent not currently displayed by the electronic device.

[0252] In some examples, the first interface component may be an interface component corresponding to a sub-node visible in Swiper, and the second interface component may be an interface component corresponding to a sub-node invisible in Swiper.

[0253] In some examples, in response to the target operation, state variables of both the first interface component and the second interface component change.

[0254] The first interface component and the second interface component may include one or more state variables.

[0255] In some examples, a change in a state variable may include one or more of the following: a change in the value of the same state variable, a change in the number of state variables of an interface component, or a change in the type of the state variable. For ease of explanation, the change in the state variable of an interface component is described below as a change from a first variable to a second variable. It should be noted that the variable value of the same state variable can be different between the first variable and the second variable, and the number and type of state variables included in the first variable and the second variable can be different, and this application does not impose any restrictions on this.

[0256] For example, the state variable of the first interface component changes from the first variable to the second variable, and the state variable of the second interface component changes from the third variable to the fourth variable. The first variable is used to determine the first state of the first interface component, the second variable is used to determine the second state of the first interface component, the third variable is used to determine the third state of the second interface component, and the fourth variable is used to determine the fourth state of the second interface component.

[0257] Here, the state variable of the interface component can be used to determine the state of the interface component. When the electronic device applies a new state variable, the state of the interface component will be updated. In other words, a change in the state variable of the interface component does not necessarily mean that the state of the interface component has changed. After the new state variable is applied, the state of the interface component can change.

[0258] For example, the target operation may be a first operation that acts on a first interface component. In response to the first operation, a state variable of the first interface component may change. For example, if the first operation is an operation of inputting text information into the first interface component, in response to the first operation, a state variable indicating the color of the first interface component may change.

[0259] In response to the aforementioned first operation, the state variable of the second interface component will also change. For example, in response to the first operation, the state variable used to indicate the color of the second interface component will also change.

[0260] For example, the target operation may be a second operation that acts on user-visible interface components other than the first interface component in the first interface. In response to the second operation, a state variable of the first interface component may change. For example, the second operation may be a drag operation that acts on a third interface component that is adjacent to the first interface component. In response to the second operation, both the state variable indicating the position of the third interface component and the state variable indicating the position of the first interface component may change.

[0261] In response to the aforementioned second operation, the state variable of the second interface component will also change. For example, in response to the second operation, the state variable used to indicate the position of the second interface component will also change.

[0262] Since the second interface component is invisible to the user, in order to improve the efficiency of the electronic device in updating the user interface and shorten the delay in updating the user interface, when updating the first user interface, the electronic device can only update the first interface component without updating the second interface component. In other words, the electronic device can only apply the new state variables of the first interface component without applying the new state variables of the second interface component.

[0263] S120: Display a second user interface.

[0264] The user interface obtained after the aforementioned first user interface is updated may be referred to as a second user interface.

[0265] The second user interface may include a first interface component in a second state and a second interface component in a second state. Alternatively, the second user interface may include a first interface component determined based on a second variable and a second interface component determined based on a third variable. In other words, in the second user interface, the first interface component is in a state after the state variable is updated, and the second interface component is in a state before the state variable is updated.

[0266] In some examples, before displaying the second user interface, the electronic device may determine that the first interface component is visible to the user and the second interface component is not visible to the user.

[0267] Exemplarily, the electronic device may obtain a first component attribute of a first interface component and a first component attribute of a second interface component, wherein the second component attribute of the first interface component indicates that the first interface component is visible to the user, and the second component attribute of the second interface component indicates that the second interface component is not visible to the user.

[0268] In some examples, the second component attribute of the second interface component can also be used to indicate that the state of the second interface component in the second user interface is not updated. In other words, the second component attribute of the second interface component is also used to indicate that the updated state variable is not applied to determine the state of the second interface component in the second user interface. In other words, the second component attribute of the second interface component is also used to indicate that the state of the second interface component in the second user interface is the same as the state of the second interface component in the first user interface. In other words, the second component attribute of the second interface component can also be used to indicate that the second interface component in the second user interface is in the third state. In other words, the second component attribute of the second interface component can also be used to indicate that the state of the second interface component in the second user interface is determined according to the second state variable.

[0269] In some examples, the second interface component includes a first subcomponent, and the third component property of the first subcomponent can be used to indicate that the first subcomponent is not visible to the user.

[0270] For example, the second interface component may be the first display component 22A in the aforementioned embodiment, and the first subcomponent may be the first "View Comments" control 23 in the aforementioned embodiment. Alternatively, the second interface component may be the fourth display component 22D in the aforementioned embodiment, and the first subcomponent may be the second "View Comments" control 25 in the aforementioned embodiment.

[0271] In some examples, the third component attribute of the first subcomponent can also be used to indicate that the state of the first subcomponent in the second user interface is not updated. In other words, the third component attribute of the first subcomponent can also be used to indicate that the updated state variable is not applied to determine the state of the first subcomponent in the second user interface. In other words, the third component attribute of the first subcomponent can also be used to indicate that the state of the first subcomponent in the second user interface is the same as the state of the first subcomponent in the first user interface. In other words, the third component attribute of the first subcomponent can also be used to indicate that the state of the first subcomponent in the second user interface is determined based on the state variable of the first subcomponent in the first user interface.

[0272] In some examples, the third component property of the first subcomponent can be determined based on the second component property of the second interface component. If the second component property of the second interface component indicates that a state of the second interface component in the second user interface is the same as a state of the second interface component in the first user interface, the third component property of the first subcomponent indicates that a state of the first subcomponent in the second user interface is the same as a state of the first subcomponent in the first user interface.

[0273] In some examples, the electronic device can save the state variable (fourth variable) of the second interface component after the target operation. When the second interface component is converted from invisible to the user to visible to the user, the electronic device can apply the fourth variable, or in other words, the electronic device can display a third user interface, which may include the second interface component in the fourth state, and the second interface component in the fourth state is determined by the fourth variable.

[0274] Similarly, for the first subcomponent of the second interface component, when the second interface component is converted from invisible to the user to visible to the user, the first subcomponent can be switched to be visible to the user, and the third user interface displayed by the electronic device may include the first subcomponent determined according to the updated state variable.

[0275] In one possible implementation, the electronic device can display the aforementioned first user interface, second user interface or third user interface in the form of a window. In this case, the first user interface can be understood as the first page in the window, the second user interface can be understood as the second page in the window, and the third user interface can be understood as the third page in the window.

[0276] In other examples, the interface may be a portion of a page displayed in a window. The portion of the page may also include a first interface component and a second interface component. For example, the second interface component may exist in the window in the form of tab content.

[0277] In some examples, the electronic device may display multiple windows, and there may be an occlusion relationship between the multiple windows. In a lower window that is occluded by an upper window, a component located in the occluded area may serve as a second interface component.

[0278] In some examples, the aforementioned window may be any one of a full-screen window, a split-screen window, or a floating window.

[0279] In some examples, the aforementioned target operation acting on the first user interface or the update operation acting on the second user interface can be understood as an operation acting on the window. In response to the operation acting on the window, the page displayed in the window can change accordingly.

[0280] The method embodiment of the present application is described in detail above with reference to Figures 1 to 8 . The device embodiment of the present application is described below with reference to Figures 9 and 10 . It should be understood that the description of the method embodiment corresponds to the description of the device embodiment. Therefore, for portions not described in detail, reference can be made to the above method embodiment.

[0281] Figure 9 shows a user interface updating device 900 provided in an embodiment of the present application. This device 900 may have the functions of the electronic device in the above method embodiment and may be used to execute the steps performed by the functions of the electronic device in the above method embodiment. This function may be implemented in hardware, or in software or hardware executing corresponding software implementations. The hardware or software may include one or more modules corresponding to the above functions.

[0282] In a possible implementation, the user interface updating apparatus 900 may include an acquisition module 910 and a processing module 920 , and the acquisition module 910 and the processing module 920 are coupled to each other.

[0283] The acquisition module 910 can be used to support the electronic device in acquiring user input, such as the aforementioned acquisition of the user's target operation on the first user interface.

[0284] The processing module 920 is used to support the electronic device in executing the processing actions in the above method embodiments, such as updating the status of the interface component, determining the activation status or inactivation status of the sub-node, etc.

[0285] Optionally, the user interface updating apparatus 900 may further include a storage unit 930 for storing program codes and data of the user interface updating apparatus 900 .

[0286] FIG10 illustrates an electronic device 1000 provided in an embodiment of the present application. As shown in the figure, the electronic device 1000 includes at least one processor 1010 and a transceiver 1020. The processor 1010 is coupled to a memory and configured to execute instructions stored in the memory to control the transceiver 1020 to send and / or receive signals.

[0287] Optionally, the electronic device 1000 further includes a memory 1030 for storing instructions.

[0288] In some embodiments, the processor 1010 and memory 1030 may be combined into a processing device, and the processor 1010 is configured to execute program codes stored in the memory 1030 to implement the above functions. In specific implementations, the memory 1030 may also be integrated into the processor 1010 or independent of the processor 1010.

[0289] In some embodiments, the transceiver 1020 may include a receiver (or receiver) and a transmitter (or transmitter).

[0290] The transceiver 1020 may further include an antenna, and the number of antennas may be one or more. The transceiver 1020 may be a communication interface or an interface circuit.

[0291] When the electronic device 1000 is a chip, the chip includes a transceiver module and a processing module, wherein the transceiver module may be an input / output circuit or a communication interface; and the processing module may be a processor, microprocessor, or integrated circuit integrated on the chip.

[0292] This embodiment also provides a computer-readable storage medium, which stores computer instructions. When the computer instructions are executed on an electronic device, the electronic device executes the above-mentioned related method steps to implement the method of preloading shaders in the above-mentioned embodiment.

[0293] This embodiment further provides a computer program product. When the computer program product is run on a computer, the computer is caused to execute the above-mentioned related steps to implement the method for preloading shaders in the above-mentioned embodiment.

[0294] In addition, embodiments of the present application further provide a device, which may be a chip, component, or module, and may include a processor and a memory connected thereto. The memory is configured to store computer-executable instructions, and when the device is running, the processor may execute the computer-executable instructions stored in the memory to cause the chip to perform the shader preloading method described in each of the above method embodiments.

[0295] Among them, the electronic device, computer-readable storage medium, computer program product or chip provided in this embodiment are all used to execute the corresponding methods provided above. Therefore, the beneficial effects that can be achieved can refer to the beneficial effects in the corresponding methods provided above, and will not be repeated here.

[0296] Those skilled in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0297] Those skilled in the art will clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0298] In the several embodiments provided in this application, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. For example, the device embodiments described above are merely schematic. For example, the division of the units is merely a logical function division. In actual implementation, there may be other division methods, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0299] The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of these units may be selected to achieve the purpose of this embodiment according to actual needs.

[0300] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit.

[0301] If the functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application, 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. The computer software product is stored in a storage medium and includes several instructions for enabling a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.

[0302] The above description is merely a specific embodiment of the present application, but the scope of protection of the present application is not limited thereto. Any changes or substitutions that can be easily conceived by a person skilled in the art within the technical scope disclosed in this application should be included in the scope of protection of this application. Therefore, the scope of protection of this application should be based on the scope of protection of the claims.

Claims

1. A method for updating a user interface, applied to an electronic device, characterized in that: include: Acquire a target operation acting on a first user interface, where the target operation is used to change the first user interface, where the first user interface includes a first interface component in a first state and a second interface component in a second state; In response to the target operation, displaying a second user interface, the second user interface including the first interface component in a third state and the second interface component in the second state, the first interface component in the third state being different from the first interface component in the first state; The first interface component is a component visible on the interface, and the second interface component is a component invisible on the interface.

2. The method according to claim 1, characterized in that The first interface component of the first state is determined according to a first state variable, and the first interface component of the third state is determined according to a second state variable, wherein the first state variable is a state variable of the first interface component before the target operation, and the second state variable is a state variable of the first interface component after the target operation.

3. The method according to claim 1 or 2, characterized in that: The displaying a second user interface in response to the target operation further includes: A third state variable is saved, where the third state variable is used to determine the state of the second interface component after the target operation.

4. The method according to any one of claims 1 to 3, characterized in that The second interface component includes a first attribute, and the first attribute is used to indicate that a state of the second interface component in the second user interface is the same as a state of the second interface component in the first user interface.

5. The method according to claim 4, characterized in that The second interface component includes a first subcomponent, the first subcomponent includes a second attribute, and the second attribute is used to indicate that a state of the first subcomponent in the second user interface is the same as a state of the first subcomponent in the first user interface.

6. The method according to claim 4, characterized in that The second interface component includes a first subcomponent, the first subcomponent includes a second attribute, and the second attribute is determined according to the first attribute. When the first attribute indicates that the state of the second interface component in the second user interface is the same as the state of the second interface component in the first user interface, the second attribute indicates that the state of the first subcomponent in the second user interface is the same as the state of the first subcomponent in the first user interface.

7. The method according to any one of claims 1 to 6, characterized in that The method further comprises: In response to an update operation acting on the second user interface, the update operation is used to switch the second interface component to a component visible on the interface; A third user interface is displayed, wherein the third user interface includes the second interface component in a fourth state, and the second interface component in the fourth state is different from the second interface component in the second state.

8. The method according to any one of claims 1 to 6, characterized in that The first interface component is in an activated state, and the second interface component is in an inactivated state, wherein the activated state is determined according to data contained in the first interface component, and the inactivated state is determined according to data contained in the second interface component.

9. The method according to claim 8, characterized in that The page stack associated with the first user interface includes multiple pages, the first interface component is located at the top page of the page stack, and the second interface component is not located at the top page of the page stack, or, The first user interface includes a list, the first interface component is a list item within the range of the list, and the second interface component is a list item outside the range of the list, or, The first user interface includes a plurality of tab contents, the first interface component is the tab contents displayed by the first user interface, and the second interface component is the tab contents not displayed by the first user interface, or, The first user interface includes a slider, the first interface component is located in a page where the slider is displayed, and the second interface component is located in a page where the slider is not displayed.

10. A method for updating an application interface, characterized in that: include: A window of an application is displayed, the window is used to display a first page, the first page includes a first component in a first state displayed in the window and a second component in a second state not displayed in the window; the first component is in an activated state, and the second component is in an inactivated state; In response to a target operation acting on the window, a second page is displayed in the window, wherein the second page includes the first component in a third state displayed in the window and the second component in a second state not displayed in the window.

11. The method according to claim 10, characterized in that The method further comprises: In response to an update operation acting on the window, a third page is displayed, the third page including a second component in a fourth state displayed in the window, the second component being in an activated state.

12. The method according to claim 10 or 11, characterized in that: The first component of the first state is determined according to a first state variable, and the first component of the third state is determined according to a second state variable, wherein the first state variable is the state variable of the first component before the target operation, and the second state variable is the state variable of the first component after the target operation.

13. The method according to any one of claims 10 to 12, characterized in that The step of displaying a second page in the window in response to the target operation acting on the window further includes: A third state variable is saved, where the third state variable is used to determine the state of the second component after the target operation.

14. The method according to any one of claims 10 to 13, characterized in that The second component includes a first attribute, and the first attribute is used to indicate that a state of the second component in the second page is the same as a state of the second component in the first page.

15. The method according to claim 14, characterized in that The second component includes a first subcomponent, the first subcomponent includes a second attribute, and the second attribute is used to indicate that a state of the first subcomponent in the second page is the same as a state of the first subcomponent in the first page.

16. The method according to claim 14, characterized in that The second component includes a first subcomponent, the first subcomponent includes a second attribute, and the second attribute is determined according to the first attribute. When the first attribute indicates that the state of the second component in the second page is the same as the state of the second component in the first page, the second attribute indicates that the state of the first subcomponent in the second page is the same as the state of the first subcomponent in the first page.

17. An electronic device, characterized in that: The method comprises a processor and a memory, wherein the memory is used to store program instructions, and the processor is used to call the program instructions to execute the method according to any one of claims 1 to 9 or claims 10 to 16.

18. A memory management device, characterized in that: Comprising modules for implementing the method of any one of claims 1 to 9 or claims 10 to 16.

19. A computer-readable storage medium, characterized in that: A computer program is stored thereon, and when the computer program is executed by a computer, the method according to any one of claims 1 to 9 or claims 10 to 16 is implemented.

20. A chip, characterized in that: The chip comprises a processor and a memory, wherein the processor is used to read instructions stored in the memory, and when the processor executes the instructions, the chip implements the method in any one of claims 1 to 9 or claims 10 to 16.

Images