User interface updating method and electronic equipment

Abstract

The invention provides a user interface updating method and electronic equipment, in a user interface updating process, the electronic equipment can only update data of interface components visible to a user, and the electronic equipment can not update the data of the interface components for interface components invisible to the user. In the process of updating the user interface once, the data of the interface component needing to be processed by the electronic equipment is less, the efficiency of updating the user interface is higher, the time consumption and the time delay of refreshing the user interface are shorter, the energy consumption of displaying the user interface by the electronic equipment using the method for updating the user interface is lower, and the user experience is better.

Description

Technical Field

[0001] This application relates to the field of terminal device software. Specifically, it relates to a method for updating a user interface and an electronic device. Background Art

[0002] A user interface (UI) can provide information to a user and enable interaction between the user and a computer through visual elements such as windows, menus, buttons, or checkboxes. The more information contained in a graphical user interface, the longer it takes to perform an update operation on the graphical user interface, and the higher the update latency.

[0003] How to improve the update efficiency of a graphical user interface and reduce the latency of interface updates is an issue worthy of consideration. Summary of the Invention

[0004] This application provides a method for updating a user interface. During the process of updating the user interface, an electronic device can only update the data of the interface components visible to the user, rather than updating the data of the interface components invisible to the user. The electronic device needs to process less data for one user interface update, and the latency of user interface update is shorter.

[0005] In a first aspect, there is provided a method for updating a user interface, which is applied to an electronic device and includes: obtaining a target operation acting on a first user interface, where the target operation is used to change the first user interface, and the first user interface includes first interface components in a first state and second interface components in a second state; in response to the target operation, displaying a second user interface, where the second user interface includes first interface components in a third state and second interface components in a second state, and the first interface components in the third state are different from the first interface components in the first state; where the first interface components are visible components on the interface, and the second interface components are invisible components on the interface.

[0006] In some scenarios, an interface component can also be referred to as an interface element.

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

[0008] In some scenarios, the first interface components are visible components on the interface, and the second interface components are invisible components on the interface. It can also be understood that: the nodes corresponding to the first interface components are in an active state, and the nodes corresponding to the second interface components are in a non-active state. Among them, when a component is in a non-active state, it can be understood that the component is frozen. The electronic device will not perform data notification and UI refresh on this component.

[0009] In a possible implementation, the target operation may be an operation on an interface component visible to the user on the first user interface. For example, an operation on the first interface component or an operation on other interface components visible to the user other than the first interface component.

[0010] In a 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, etc.

[0011] In some scenarios, the above technical solution can also be understood as: the electronic device can update the state of the first interface component visible to the user without updating the state of the second interface component invisible to the user. In this way, during a user interface update process, the electronic device needs to process less data of the interface components, and the time-consuming for the electronic device to update the user interface is shorter and the efficiency is higher. In addition, since the interface components whose states are not updated are invisible to the user, from the perspective of user perception, the method for updating the user interface provided by this technical solution improves the timeliness of the response of the electronic device to user operations without sacrificing the user's visual experience, thereby enhancing the user experience.

[0012] Combined with the first aspect, in certain implementations of the first aspect, the first interface component in the first state is determined according to the first state variable, and the first interface component in the third state is determined according to the 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.

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

[0014] 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. Exemplarily, the first state variable may include the first value of the A state variable, the first value of the B state variable, and the first value of the C state variable, and the second state variable may include the second value of the A state variable, the second value of the B state variable, and the second value of the C state variable.

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

[0016] The state update of the interface components is driven by the update of the state variables, where the state variables are processed by the backend of the software and the states of the interface components are processed by the frontend of the software. This technical solution specifically provides an implementation method for updating the user interface and reasonably distributes the implementation of the technical solution to the backend and frontend of the software, which is beneficial to implementing this technical solution through computer software.

[0017] In combination with the first aspect, in some implementation manners of the first aspect, in response to a target operation, a second user interface is displayed, and it further 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.

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

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

[0020] In combination with the first aspect, in some implementation manners 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.

[0021] In some scenarios, this first attribute can also be understood as being used to indicate "freezing" the state of the second interface component.

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

[0023] In a possible implementation manner, for interface components that are invisible to the user, the electronic device can execute multiple processing schemes, and different processing schemes can be indicated by different parameter values. This first attribute can be understood as one of the parameter values used to indicate the processing scheme.

[0024] The processing method of the state of the interface component during the update of the user interface is determined by the attribute associated with the interface component. Different interface components can correspond to different processing methods. The implementation of this technical solution is beneficial to improving the update efficiency of the electronic device for a complex user interface containing multiple interface components and reducing the time consumed for updating the user interface.

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

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

[0027] For the interface components corresponding to different nodes in the component tree or node tree, processing methods for the corresponding interface component states can be set. For a user interface with a complex hierarchical relationship, the electronic device can obtain the processing methods for the states of interface components at different levels by traversing the node attributes of different nodes in the component tree. The implementation of this technical solution is beneficial to improving the efficiency of the electronic device in updating a complex user interface containing multiple interface components and reducing the time consumption of user interface updates.

[0028] In combination with the first aspect, in some implementations of the first aspect, the second interface component includes a first sub-component, and the first sub-component includes a second attribute, where 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 sub-component in the second user interface is the same as the state of the first sub-component in the first user interface.

[0029] 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 attribute corresponding to the parent component of the second interface component.

[0030] 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.

[0031] Determining whether the states of interface components corresponding to multiple nodes in the node tree need to be updated through the dependency relationship, association relationship, or parent-child relationship between nodes at different levels in the node tree. This technical solution is beneficial to improving the efficiency of the electronic device in determining whether the states of different interface components need to be updated and is beneficial to improving the update efficiency of the electronic device for the user interface.

[0032] In combination with the first aspect, in some 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 visible component on the interface; display a third user interface, where 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.

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

[0034] When the second interface component changes from being invisible to the user to being visible to the user, the electronic device can display the second interface component with the updated state. The implementation of this technical solution is beneficial to improving the efficiency of the electronic device in updating the user interface when the interface component changes from being invisible to the user to being visible to the user.

[0035] In combination with the first aspect, in some implementations of the first aspect, the first interface component is in an active state, and the second interface component is in an inactive state. The active state is determined according to the data included in the first interface component, and the inactive state is determined according to the data included in the second interface component.

[0036] This technical solution can also be understood as the node corresponding to the first interface component being in an active state, and the node corresponding to the second interface component being in an inactive state.

[0037] The active state and the inactive state are determined according to the data included in the interface component. The interface component visible to the user is in an active state, and the interface component invisible to the user is in an inactive state. Determining whether the interface component is visible to the user through the data of the interface component realizes the association between the backend data and the frontend state of the interface component. This technical solution is beneficial to improving the management efficiency of the interface components on the user interface of the electronic device and is beneficial to improving the efficiency of updating the user interface.

[0038] In combination with the first aspect, in some implementations of the first aspect, 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 not located on 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 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 on the page displayed by the slider, and the second interface component is located on the page not displayed by the slider.

[0039] This technical solution specifically provides several scenarios applicable to the method for updating the user interface provided in this application. The electronic device can apply the method for updating the user interface provided in this application for specific scenarios.

[0040] For the detailed explanations and descriptions of the beneficial effects in the following technical solutions, reference can specifically be made to the relevant descriptions in the first aspect. For the sake of brevity, no further elaboration will be provided below.

[0041] Second aspect, there is provided a device for user interface display, the device including an acquisition module and a processing module, the acquisition module being configured to: acquire 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; the processing module being configured to: 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.

[0042] In combination with the second aspect, in some implementation manners of the second aspect, the first interface component in the first state is determined according to a first state variable, and the first interface component in the third state is determined according to a second state variable, the first state variable being the state variable of the first interface component before the target operation, and the second state variable being the state variable of the first interface component after the target operation.

[0043] In combination with the second aspect, in some implementation manners of the second aspect, the processing module is further configured to: save a third state variable, the third state variable being used to determine the state of the second interface component after the target operation.

[0044] In combination with the second aspect, in some implementation manners of the second aspect, the second interface component includes a first attribute, the first attribute being 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.

[0045] In combination with the second aspect, in some implementation manners of the second aspect, the second interface component includes a first sub-component, the first sub-component including a second attribute, the second attribute being used to indicate that the state of the first sub-component in the second user interface is the same as the state of the first sub-component in the first user interface.

[0046] In combination with the second aspect, in some implementation manners of the second aspect, the second interface component includes a first sub-component, the first sub-component including a second attribute, the second attribute being determined according to the first attribute, and in the case where 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 sub-component in the second user interface is the same as the state of the first sub-component in the first user interface.

[0047] In combination with the second aspect, in some implementations of the second aspect, in response to an update operation applied to 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 further configured 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.

[0048] In combination with the second aspect, in some implementations of the second aspect, the first interface component is in an active state, and the second interface component is in an inactive state. The active state is determined according to the data included in the first interface component, and the inactive state is determined according to the data included in the second interface component.

[0049] In combination with the second aspect, in some implementations of the second aspect, 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 not located on the top page of the page stack. Alternatively, 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. Alternatively, 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. Alternatively, the first user interface includes a slider, the first interface component is located on the page displayed by the slider, and the second interface component is located on the page not displayed by the slider.

[0050] In a third aspect, an electronic device is provided. The electronic device includes a processor and a memory. The memory is used to store program instructions. The processor is configured to: obtain a target operation applied to the first user interface, the target operation is used to change the first user interface, and 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, display a second user interface, the second user interface includes a first interface component in a third state and a second interface component in a second state, and 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 component visible on the interface, and the second interface component is a component invisible on the interface.

[0051] In combination with the third aspect, in some implementations of the third aspect, the first interface component in the first state is determined according to a first state variable, and the first interface component in the third state is determined according to 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.

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

[0053] 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.

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

[0055] In combination with the third aspect, in some implementations of the third aspect, the second interface component includes a first sub-component, and the first sub-component 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 sub-component in the second user interface is the same as the state of the first sub-component in the first user interface.

[0056] In combination with the third aspect, in some 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 visible component on the interface; the processor is further configured to: display a third user interface, and 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.

[0057] In combination with the third aspect, in some implementations of the third aspect, the first interface component is in an active state, and the second interface component is in an inactive state. The active state is determined according to the data included in the first interface component, and the inactive state is determined according to the data included in the second interface component.

[0058] In combination with the third aspect, in some implementations of the third aspect, 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 not located on the top page of the page stack. Alternatively, 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. Alternatively, 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. Alternatively, the first user interface includes a slider, the first interface component is located on the page displayed by the slider, and the second interface component is located on the page not displayed by the slider.

[0059] Fourthly, a method for updating an application interface is provided, which is applied to an electronic device and includes: displaying a window of an application, where the window is used to display a first page, and 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 active state, and the second component is in an inactive state; in response to a target operation on the window, a second page is displayed in the window, and the second page includes the first component in a third state displayed in the window and the second component in the second state not displayed in the window.

[0060] In combination with the fourth aspect, in some implementation manners of the fourth aspect, the method further includes: in response to an update operation on the window, displaying a third page, and the third page includes the second component in a fourth state displayed in the window, and the second component is in an active state.

[0061] In combination with the fourth aspect, in some implementation manners of the fourth aspect, the first component in the first state is determined according to a first state variable, and the first component in the third state is determined according to 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.

[0062] In combination with the fourth aspect, in some implementation manners of the fourth aspect, in response to a target operation on the window, displaying the second page in the window further includes: saving a third state variable, where the third state variable is used to determine the state of the second component after the target operation.

[0063] In combination with the fourth aspect, in some implementation manners of the fourth 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.

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

[0065] In combination with the fourth aspect, in some implementation manners of the fourth aspect, the second component includes a first sub-component, and the first sub-component includes a second attribute. 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 sub-component in the second page is the same as the state of the first sub-component in the first page.

[0066] In a fifth aspect, a device for displaying an application interface is provided. The device includes a processing module configured to: display a window of an application program, the window being for displaying 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 being in an active state and the second component being in a non-active state; in response to a target operation on the window, display 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.

[0067] In combination with the fifth aspect, in some implementations of the fifth aspect, the processing module is further configured to: in response to an update operation on the window, display a third page, the third page including the second component in a fourth state displayed in the window, and the second component being in an active state.

[0068] In combination with the fifth aspect, in some implementations of the fifth aspect, the first component in the first state is determined according to a first state variable, and the first component in the third state is determined according to 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.

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

[0070] 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 the state of the second component in the second page is the same as the state of the second component in the first page.

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

[0072] In combination with the fifth aspect, in some implementations of the fifth aspect, the second component includes a first sub-component, and the first sub-component 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 sub-component in the second page is the same as the state of the first sub-component in the first page.

[0073] In a sixth aspect, an electronic device is provided. The electronic device includes a processor and a memory. The memory is used to store program instructions. The processor is configured to: display a window of an application. 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 active state, and the second component is in a non-active state. In response to a target operation on the window, display a second page. The second page includes the first component in a third state displayed in the window and the second component in the second state not displayed in the window.

[0074] In combination with the sixth aspect, in some implementations of the sixth aspect, the processor is further configured to: in response to an update operation on the window, display a third page. The third page includes the second component in a fourth state displayed in the window, and the second component is in an active state.

[0075] In combination with the sixth aspect, in some implementations of the sixth aspect, the first component in the first state is determined according to a first state variable, and the first component in the third state is determined according to 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.

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

[0077] In combination with the sixth aspect, in some implementations of the sixth aspect, the second component includes a first attribute. 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.

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

[0079] In combination with the sixth aspect, in some implementations of the sixth aspect, the second component includes a first sub-component. The first sub-component includes a second attribute. 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 sub-component in the second page is the same as the state of the first sub-component in the first page.

[0080] In a seventh aspect, a computer program product is provided, which includes computer program code that, when run on a computer, causes the method in the first aspect and any of its possible implementations or the method in the fourth aspect and any of its possible implementations to be executed.

[0081] In an eighth aspect, a computer-readable storage medium is provided, which stores computer program code that, when run on a computer, causes the method in the first aspect and any of its possible implementations or the method in the fourth aspect and any of its possible implementations to be executed.

[0082] In a ninth aspect, a chip is provided, which includes 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 of its possible implementations or the method in the fourth aspect and any of its possible implementations. Description of the Drawings

[0083] Figure 1 is a schematic diagram of the hardware architecture of an electronic device applicable to the embodiments of the present application.

[0084] Figure 2 is a schematic diagram of the software architecture of an electronic device applicable to the embodiments of the present application.

[0085] Figure 3 is a schematic diagram of a user interface provided by the embodiments of the present application.

[0086] Figure 4 is a schematic diagram of another user interface provided by the embodiments of the present application.

[0087] Figure 5 is a Figure 4 schematic diagram of the updated user interface shown.

[0088] Figure 6 is another Figure 4 schematic diagram of the updated user interface shown.

[0089] Figure 7 is related to Figure 4 schematic diagram of the node tree corresponding to the graphical user interface in.

[0090] Figure 8 is a method for updating a user interface provided by the embodiments of the present application.

[0091] Figure 9 is a schematic diagram of a user interface display device provided by the embodiments of the present application.

[0092] Figure 10It is a schematic diagram of an electronic device provided by an embodiment of the present application. Detailed implementation manners

[0093] Next, the technical solutions in the present application will be described with reference to the accompanying drawings.

[0094] 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 and appended claims of the present application, the singular forms "a", "an", "the", "above", "said", "this" are also intended to include, for example, the expression "one or more", unless the context clearly indicates otherwise. It should also be understood that in the following embodiments of the present application, "at least one", "one or more" means one, two or more than two. The term "and / or" is used to describe the association relationship of associated objects and indicates that three relationships can exist; for example, A and / or B can represent: A exists alone, A and B exist simultaneously, and B exists alone, where A and B can be singular or plural. The character " / " generally represents an "or" relationship between the associated objects before and after.

[0095] Referring to "one embodiment" or "some embodiments" described in this specification means that specific features, structures or characteristics described in combination with the embodiment are included in one or more embodiments of the present application. Thus, the statements "in one embodiment", "in some embodiments", "in other some embodiments", "in still other embodiments" and the like that appear in different places in this specification do not necessarily refer to the same embodiment, but mean "one or more but not all embodiments", unless otherwise specifically emphasized in other ways. The terms "comprise", "include", "have" and their variants all mean "including but not limited to", unless otherwise specifically emphasized in other ways.

[0096] Figure 1The structural schematic diagram of the electronic device 100 is shown. 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, a headphone interface 170D, a sensor module 180, a key 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. Among them, the sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, a barometric 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.

[0097] It can be understood that the structure schematically shown in the embodiments of this application does not constitute a specific limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may include more or fewer components than those shown in the figure, or combine certain components, or split certain components, or have different component arrangements. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0098] 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), etc. Among them, different processing units may be independent devices or integrated in one or more processors.

[0099] Among them, the controller may be the nerve center and command center of the electronic device 100. The controller may generate operation control signals according to the instruction operation code and timing signals to complete the control of fetching instructions and executing instructions.

[0100] A memory can also be provided in the processor 110 for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory can hold the instructions or data that the processor 110 has just used or recycled. If the processor 110 needs to use the instruction or data again, it can directly call it from the memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0101] 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, etc.

[0102] The MIPI interface can be used to connect the processor 110 to peripheral devices such as the display screen 194 and the camera 193. The MIPI interface includes a camera serial interface (CSI), a display serial interface (DSI), etc. In some embodiments, the processor 110 and the camera 193 communicate through the CSI interface to implement the shooting function of the electronic device 100. The processor 110 and the display screen 194 communicate through the DSI interface to implement the display function of the electronic device 100.

[0103] The USB interface 130 is an interface that complies with the USB standard specification. Specifically, it can be a Mini USB interface, a Micro USB interface, a USB Type C interface, etc. The USB interface 130 can be used to connect a charger to charge the electronic device 100, and can also be used for data transmission between the electronic device 100 and peripheral devices. It can also be used to connect headphones to play audio through the headphones. This interface can also be used to connect other electronic devices, such as AR devices, etc.

[0104] It can be understood that the interface connection relationships between the modules illustrated in the embodiments of the present application are only illustrative descriptions and do 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 manners in the above embodiments, or a combination of multiple interface connection manners.

[0105] The wireless communication function of the electronic device 100 can be implemented by the antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modulation and demodulation processor, and baseband processor, etc.

[0106] The electronic device 100 implements the display function through the GPU, display screen 194, and application processor, etc. The GPU is a microprocessor for image processing, connected to the display screen 194 and the application processor. The GPU is used to execute mathematical and geometric calculations for graphics rendering. The processor 110 may include one or more GPUs, which execute program instructions to generate or change the display information.

[0107] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. The display panel may adopt a liquid crystal display (LCD), organic light-emitting diode (OLED), active matrix organic light-emitting diode or active-matrix organic light emitting diode (AMOLED), flexible light-emitting diode (FLED), Miniled, MicroLed, Micro-oLed, quantum dot light-emitting diodes (QLED), etc. In some embodiments, the electronic device 100 may include 1 or N display screens 194, where N is a positive integer greater than 1.

[0108] The electronic device 100 can implement the shooting function through the ISP, camera 193, video codec, GPU, display screen 194, and application processor, etc. The ISP is used to process the data fed back by the camera 193. The camera 193 is used to capture static images or videos. The digital signal processor is used to process digital signals and can process other digital signals in addition to digital image signals. The video codec is used to compress or decompress digital videos.

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

[0110] The external memory interface 120 can be used to connect to 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 achieve the data storage function.

[0111] The internal memory 121 can be used to store computer-executable program code, and the executable program code includes 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 can include a program storage area and a data storage area. Among them, the program storage area can store an operating system, application programs required for at least one function (such as a sound playback function, an image playback function, 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.). In addition, the internal memory 121 can include a high-speed random access memory and can also include a non-volatile memory, such as at least one disk storage device, a flash memory device, a universal flash storage (UFS), etc.

[0112] The electronic device 100 can implement audio functions through an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headphone jack 170D, and an application processor, etc. Such as music playback, recording, etc.

[0113] The keys 190 include a power-on key, a volume key, etc. The keys 190 can be mechanical keys or touch keys. The electronic device 100 can receive key inputs and generate key signal inputs related to the user settings and function controls of the electronic device 100.

[0114] The motor 191 can generate a vibration prompt. The motor 191 can be used for incoming call vibration prompts and can also be used for touch vibration feedback.

[0115] The indicator 192 can be an indicator light and can be used to indicate the charging state, the change in battery power, and can also be used to indicate messages, missed calls, notifications, etc.

[0116] The software system of the electronic device 100 can adopt a layered architecture, an event-driven architecture, a microkernel architecture, a microservices architecture, or a cloud architecture. In the embodiments of this application, the Android system with a layered architecture is taken as an example to exemplarily illustrate the software structure of the electronic device 100.

[0117] It can be understood that the interface connection relationships between the modules illustrated in the embodiments of the present application are only illustrative descriptions and do 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 in the above embodiments, or a combination of multiple interface connection methods.

[0118] Figure 2 This is a software structure block diagram of the electronic device 100 in the embodiments of the present application. The layered architecture divides the software into several layers, and each layer has a clear role and division of labor. Communication between layers is through software interfaces. In some embodiments, the Android system is divided into four layers, from top to bottom, namely the application layer, the application framework layer, the Android runtime and system libraries, and the kernel layer. The application layer may include a series of application packages.

[0119] As Figure 2 shown, the application packages may include applications such as a camera, a gallery, a calendar, a call, a map, a navigation, a WLAN, a Bluetooth, music, a video, a short message, etc.

[0120] The application framework layer provides application programming interfaces (APIs) and programming frameworks for the applications in the application layer. The application framework layer includes some predefined functions.

[0121] As Figure 2 shown, the application framework layer may include a window manager, an activity manager, a package manager, a resource manager, a view system, a telephone manager, a notification manager, etc.

[0122] The resource manager, also known as the resource manager service (RMS), provides various resources for applications, such as localized strings, icons, pictures, layout files, video files, etc.

[0123] The window manager, also known as the window manager service (WMS), is used to manage window programs. The window manager can obtain the display screen size, determine whether there is a status bar, lock the screen, capture the screen, etc.

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

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

[0126] The view system includes visual controls, such as controls for displaying text, controls for displaying pictures, etc. The view system can be used to build applications. The display interface can be composed of one or more views. For example, a display interface including a text message notification icon can include a view for displaying text and a view for displaying pictures.

[0127] The notification manager enables an application to display notification information in the status bar. It can be used to convey informative messages, which can automatically disappear after a short stay without user interaction. For example, the notification manager is used to inform that the download is complete, message reminders, etc. The notification manager can also be a notification that appears in the system top status bar in the form of a chart or scroll bar text, such as a notification of a background-running application, or a notification that appears on the screen in the form of a dialogue window. For example, it can prompt text information in the status bar, emit a prompt tone, vibrate the electronic device, and blink the indicator light, etc.

[0128] The system library can include multiple functional modules. For example: surface manager, media libraries, 3D graphics processing library (such as: OpenGL ES), 2D graphics engine (such as: SGL), etc.

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

[0130] The media library supports the playback and recording of multiple common audio and video formats, as well as static image files, etc. The media library can support multiple audio and video coding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.

[0131] The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, synthesis, and layer processing, etc.

[0132] The 2D graphics engine is a drawing engine for 2D drawing.

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

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

[0135] State data refers to the data that drives UI updates. Users change the state data by triggering the event methods of components. The change of state data causes the UI to be re-rendered.

[0136] A state variable is a variable decorated with a state decorator. The change of the value of a state variable will cause the UI to be rendered and updated. Example: @State num: number = 1, where @State is the state decorator and num is the state variable.

[0137] The page stack is a type of data structure used to maintain and manage all the pages in an application. An application can have multiple page stacks. For example, an application has a main interface and a settings interface, and both of these interfaces can be the entry points of the application. In this case, each entry point may have its own page stack.

[0138] In user interface design, a long list is a type of layout mainly used to display a large amount of data. The long list can stretch vertically, and users can scroll the screen to view more content. This layout is suitable for information-intensive applications such as news applications and social applications. When the amount of data in the long list is large, the rendering efficiency of the user interface will decrease, which will affect the user experience to a certain extent.

[0139] In user interface design, a grid is a type of layout used to display a large amount of data or functions. The grid layout can include forms such as a four-grid, six-grid, or nine-grid. Usually, each grid contains a function or a group of information, and users can directly click to enter the specific function page.

[0140] A node is used to represent the elements and components of the user interface. All user interface components can be regarded as composed of nodes, and each node can have its own attributes and child nodes. In some scenarios, a whole formed by multiple nodes in a hierarchical relationship, or called a node tree, can be used to represent the entire user interface structure. In some scenarios, the node tree can also be called a component tree. By operating and modifying the node tree, the corresponding user interface interactions and functions can be achieved.

[0141] For the UI development framework or application framework of an operating system, the tab content (TabContent) is a child component of the tabs (Tabs) component. Tabs are a type of container component that can switch content through tabs, and 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 are 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.

[0142] The swiper is a container component that provides the ability to switch page displays. Each sub-component contained within the swiper represents a page.

[0143] Vertical synchronization (vertical sync, vsync) refers to a type of synchronization signal that represents the number of frames updated by a video output device per second. When the vsync signal arrives, the entire screen image is re-rendered to ensure that the content on the screen always remains up-to-date. This helps to improve the visual effects of the application, reduce flickering and latency, and make the application more smooth and stable.

[0144] Front-end and back-end are common terms used to describe the start and end of a process. The front-end is used to collect input information, and the back-end processes the collected information. The interface style and visual presentation of a computer program belong to the front-end. In the fields of software architecture and program design, the front-end is the part of the software system that directly interacts with the user, while the back-end controls the output of the software. Dividing software into front-end and back-end is an abstraction that separates different functional parts of the software from each other.

[0145] As Figure 3 Shown in the figure is a schematic diagram of the first user interface 10 of the electronic device 100 provided by an embodiment of the present application. The first user interface 10 can be used to display information such as different types of news and consultations. In some scenarios, the first user interface 10 can also be referred to as the first application interface 10 or the first interface 10, etc. For ease of description, it is hereinafter referred to as the first interface 10.

[0146] The first interface 10 may include multiple tab contents, and different tab contents can be used to display different types of news and information. Exemplarily, the first interface 10 includes a first tab content 11, a second tab content 12, a third tab content 13, and a fourth tab content 14. Among them, the first tab content 11 is used to display the news and information that the user is concerned about, the second tab content 12 is used to display local news and information, the third tab content 13 is used to display domestic hot news and information, and the fourth tab content 14 is used to display international hot news and information.

[0147] In some examples, in response to a user's operation, the electronic device can switch between the currently displayed tab content and other non-displayed tab contents. Exemplarily, in response to the user's operation of swiping the first interface 10 to the left, the electronic device can switch the second tab content 12 to the currently displayed interface.

[0148] In some examples, in response to a user's operation, the electronic device can update the content of the first interface 10. Exemplarily, in response to the user's operation of swiping the first interface 10 upward, the electronic device can 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.

[0149] 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 amount of data involved in the update process is large, and the delay of the update process is long.

[0150] In order to improve the update efficiency of the user interface of the electronic device and shorten the delay of data update of the user interface, this application provides a method for updating the user interface, which is introduced as follows.

[0151] In some examples, the electronic device can update the status of the interface components visible to the user on the first interface 10, and does not update the status of the interface components invisible to the user on the first interface 10.

[0152] In some examples, the status 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, etc. The update of the status of the interface component can be understood as the interface component changing from the first state to the second state. In the first state and the second state, one or more of the shape, size, color, transparency, position, or content of the interface component may be different.

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

[0154] Taking the status update of the interface components included in the first interface 10 as an example, refer to Figure 3 , 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 operation of the user to update 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 operation of the user to update 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.

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

[0156] Figure 4 The figure shows a schematic diagram of the second interface 20A provided by the embodiment of the present application. The second interface 20A may be a user interface of applications such as news and consulting. The second interface 20A may display multiple consulting messages, and the multiple consulting messages may be presented in the form of a list. Each piece of information in the list may be presented by an interface component of the second interface 20A. In other words, the electronic device may display the content that the second interface 20A needs to display through multiple interface components.

[0157] Due to the limited area of the display screen of the electronic device, the second interface 20A can only display a part of the foregoing multiple interface components. The user may operate the second interface 20A to view the content that is not currently displayed on the current interface or other content hidden outside the current interface. Or rather, the second interface 20A may include a visible part and an invisible part. The visible part may include one or more interface components that can currently be viewed by the user in the second interface 20A, and the invisible part may include one or more interface components that cannot currently be viewed by the user in the second interface 20A.

[0158] In a possible implementation, in response to an operation of swiping up the second interface 20A, the electronic device may display content that the second interface 20A does not currently display. Or rather, in response to an operation of swiping the second interface 20A along the first direction 21A, the electronic device may update the content currently displayed on the second interface 20A.

[0159] In a possible implementation, in response to an operation of swiping the second interface 20A to the "left" or "right", the electronic device may display content that the second interface 20A does not currently display. Or rather, in response to an operation of swiping the second interface 20A along the second direction 21B, the electronic device may update the content currently displayed on the second interface 20A.

[0160] Exemplarily, Figure 4 in 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. Among them, the first display component 22A, the second display component 22B, and the third display component 22C are visible to the user in the current state and belong to the visible part of the second interface 20A. The fourth display component 22D and the fifth display component 22E are not visible to the user in the current state and belong to the invisible part of the second interface 20A.

[0161] In some examples, for the visible part of the second interface 20A, in response to the user's operation, the electronic device may update the state of one or more interface components of the visible part.

[0162] Exemplarily, as Figure 4 shown, the first display component 22A in the second interface 20A may be used to display the first consultation information, and a first "view comments" control 23 is further included on the first display component 22A. In response to an operation of clicking the first "view comments" control 23, the electronic device may update the display content of the first display component 22A. In response to an operation of clicking the first "view comments" control 23, the position of the second display component 22B will change, and the electronic device may also update the position of the second display component 22B. For the fourth display component 22D and the fifth display component 22E, the electronic device may not update the states of these two components.

[0163] For example, in response to an operation of clicking the first "view comments" control 23, the electronic device may display as Figure 5The third interface 20B shown may include a first display component 22A, and the first display component 22A in this state may also include a first sub-display component 24, and the first sub-display component 24 may be used to display the comment content of the first consulting information. The third interface 20B may also include a second display component 22B, and the position of the second display component 22B in the third interface 20B is different from that in the second interface 20A.

[0164] In some examples, when the electronic device updates the state of the first display component 22A and the state of 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, the consultation displayed by the fourth display component 22D adds new comment information. In this case, the electronic device may record the change of the data of the fourth display component 22D, and when the fourth display component 22D is visible to the user, the electronic device may update the state of the fourth display component 22D according to the recorded change of the data of the fourth display component 22D.

[0165] For example, in response to the operation of sliding the third interface 20B “downward”, the electronic device may display the following Figure 6 The fourth interface 20C shown may include the fourth display component 22D, the first display component 22A, the third display component 22C and the fifth display component 22E after the update state, wherein the fourth display component 22D, the first display component 22A and the third display component 22C are visible to the user, and the fifth display component 22E is invisible to the user. Due to the newly added comment information, the fourth display component 22D also includes a second "view comment" control 25 similar to the aforementioned first "view comment" control 23. In response to the operation of the second "view comment" control 25, the electronic device may display the comment information corresponding to the content displayed in the fourth display component 22D.

[0166] In some examples, the interface components included in the user interface including the aforementioned first interface 10 and the second interface 20A can be referred to as nodes, and multiple nodes in the user interface can form a whole according to a certain hierarchical relationship, which can be referred to as a node tree or a component tree, and the node tree can be used to indicate the relationship between the user interface and the interface components and 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 the way in which the user interacts with the node.

[0167] 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 an interface component corresponding to the node.

[0168] Figure 7 Exemplarily, a node tree 30 of the second interface 20A is provided. The root node 31 of the node tree 30 may correspond to the second interface 20A. The second interface 20A may include a plurality of interface components. Correspondingly, the root node 31 may include a plurality of child nodes, and the root node 31 may also be referred to as the parent node of these child nodes.

[0169] The plurality of child nodes may include a first type of child nodes and a second type of child nodes. The first type of child nodes may include child nodes in an active state, and the second type of child nodes may include child nodes in an inactive state. In some scenarios, the child nodes in the active state may correspond to the interface components visible to the user in the second interface 20A, and the child nodes in the inactive state may correspond to the interface components invisible to the user in the second interface 20A. Or rather, the interface components corresponding to the first type of child nodes in the second interface 20A are visible to the user, and the interface components corresponding to the second type of child nodes in the second interface 20A are invisible to the user.

[0170] Reference Figure 4 and Figure 7 , the child nodes in the active state may include a first child node 32A, a second child node 32B, and a third child node 33C. The first child node 32A, the second child node 32B, and the third child node 33C respectively correspond to a first display component 22A, a second display component 22B, and a third display component 22C in the second interface 20A. Or rather, the data of the first child node 32A, the data of the second child node 32B, and the data of the third child node 33C may be respectively used to determine the states of the first display component 22A, the second display component 22B, and the third display component 22C.

[0171] In some examples, for a node in the active state, when the data of the node changes, the state of the interface component corresponding to the node may change accordingly.

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

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

[0174] 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.

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

[0176] The variable decorated with @State has the state of the component to which it belongs, and can be used as a data source for unidirectional and bidirectional synchronization of its subcomponents. When its value changes, it will cause the rendering of related components to refresh.

[0177] 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.

[0178] The variables decorated with @Link establish a state variable with a bidirectional synchronization relationship with the parent component. The parent component will accept the synchronization of modifications to the variables decorated with @Link, and the updates of the parent component will also be synchronized to the variables decorated with @Link.

[0179] Variables decorated with @Provide / @Consume are used to synchronize state variables across component hierarchies (multi-layer components). They do not need to be passed through the parameter naming mechanism, but can be bound through aliases or attribute names.

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

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

[0182] 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 referred to as the zero-level node.

[0183] In some examples, the first display component 22A, the second display component 22B, and the third display component 22C can all include windows, and these display components can each contain zero, one, or more interface elements, such as a menu bar, a toolbar, or a content area, etc. The first display component 22A can correspond to the first-level node 32A, and the interface elements included in the first display component 22A can correspond to the child nodes of the first-level node 32A. The second display component 22B can correspond to the first-level node 32B, and the interface elements included in the second display component 22B can correspond to the child nodes of the first-level node 32B. The third display component 22C can correspond to the first-level node 32A, and the interface elements included in the third display component 22C can then correspond to the child nodes of the first-level node 32C.

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

[0185] Exemplarily, the second display component 22B does not include any interface elements. Correspondingly, the first-level node 32B can include zero child nodes.

[0186] Exemplarily, the third display component 22C includes a content area. Correspondingly, the first-level node 32C can include one child node, such as the second-level node 33C.

[0187] Similarly, the menu bar and content area in the aforementioned first display component 22A and the content area in the third display component 22C can each include zero, one, or more interface elements. Correspondingly, the second-level node 33A, the second-level node 33B, and the second-level node 33C can each include zero, one, or more third-level nodes.

[0188] Exemplarily, the second-level node 33A and the second-level node 33C can include zero third-level nodes, and the second-level node 33B can include two third-level nodes, such as the third-level node 34A and the third-level node 34B respectively.

[0189] Continue to refer to Figure 7, the root node 31 may further 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. Or rather, both the first-level node 32D and the first-level node 32E are used to indicate the interface components of the invisible part in the second interface 20A. Exemplarily, the fourth display component 22D and the fifth display component 22E that are invisible to the user in the second interface 20A correspond to the first-level node 32D and the first-level node 32E respectively.

[0190] Similar to the aforementioned first-level nodes 32A, 32B, and 32C, the first-level node 32D and the first-level node 32E may also include zero, one, or more child nodes. Exemplarily, the first-level node 32D includes zero child nodes, and the first-level node 32E includes two child nodes, respectively referred to as a second-level node 33D and a second-level node 33E. Among them, the second-level node 33D further includes a child node, a third-level node 34C.

[0191] Since both the fourth display component 22D and the fifth display component 22E belong to the invisible part in the second interface 20A, the interface elements included in the fourth display component 22D or the fifth display component 22E are also invisible to the user. In other words, the second-level node 33D, the second-level node 33E, and the third-level node 34C corresponding to the interface elements included in the fourth display component 22D or the fifth display component 22E are all in an inactive state.

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

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

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

[0195] For example, in the case where there are multiple pages in the page stack, only the top page in the stack is visible to the user, and the other pages outside the top page are not visible to the user. The electronic device can determine that the interface components included in the top page are in an active state, and the interface components included in non-top pages are in an inactive state.

[0196] For another example, for a user interface including multiple TabContents, the electronic device can determine that one or more interface components included in the TabContent currently displayed on the interface are in an active state, and one or more interface components included in the TabContent not currently displayed on the interface are in an inactive state.

[0197] In a scroll scenario, the electronic device can set the interface components outside the scroll area in the user interface to an inactive state.

[0198] For example, in the case where there are multiple invisible child nodes in a Swiper, the electronic device can determine that the interface components corresponding to the child nodes currently displayed on the interface are in an active state, and the interface components corresponding to the child nodes not currently displayed on the interface are in an inactive state.

[0199] For another example, for a long list, the electronic device can determine whether the list items (ListItems) in the list are within the list range. For the list items within the list range, the electronic device can determine that they are in an active state, and for the list items not within 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's display screen. For the list items within the list range, they are visible to the user, and for the list items not within the list range, they are not visible to the user.

[0200] In the above scenarios, the node tree corresponding to the user interface includes both nodes in an active state and nodes in an inactive state. Or rather, the user interface includes both interface components visible to the user and interface components not visible to the user. It should be noted that in addition to the above examples, there can be more other examples, and this application does not limit this.

[0201] In some examples, each node in the node tree corresponding to the user interface can include a first node attribute, and this first node attribute can be used to indicate that the node is in an inactive state. Or rather, each interface component in the user interface can include a first component attribute, and this first component attribute is used to indicate that the interface component is not visible to the user.

[0202] In some scenarios, the first node attribute of the node and the first component attribute of the interface component corresponding to this node can have interrelated meanings. The following will be described mainly based on the first node attribute of the node.

[0203] In some examples, the foregoing first node attribute may be used to indicate a method for processing the data of a node in an inactive state during the process of updating the data of the node. Or rather, the electronic device may determine whether to apply the new data of the node according to the first node attribute.

[0204] 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 not to apply the new data of the node.

[0205] Taking Figure 4 the second interface 20A in

[0206] In some scenarios, the above technical solution may also be understood as: the electronic device may determine whether to update the state of an interface component according to the first component attribute of the interface component. When the first component attribute of the interface component indicates that the interface component is in a state invisible to the user, the electronic device may not update the state of the interface component.

[0207] Taking Figure 4 the second interface 20A in

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

[0209] Taking Figure 4Taking the second interface 20A in [as an example], the first node attributes of the first-level node 32D and the first-level node 32E can respectively indicate that the first-level node 32D and the first-level node 32E are in an inactive state. In this way, in response to the operation of updating the second interface 20A, the electronic device can record the data changes of the first-level node 32D and the data changes of the first-level node 32E, and does not update the states of the fourth display component 22D and the fifth display component 22E. When the first node attributes of the first-level node 32D and the first-level node 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 according to the recorded data changes of the first-level node 32D and the data changes of the first-level node 32E.

[0210] In order to improve the efficiency of the processing method of the electronic device for determining the data of each node in the inactive state in the node tree and improve the data update efficiency of the user interface of the electronic device, the electronic device can determine the inactive state of the child nodes corresponding to the parent node according to the inactive state of the parent node. In other words, the electronic device can determine that multiple nodes in the node tree are in an inactive state according to the logical relationship (dependency relationship, hierarchical relationship between parent and child nodes) between nodes at different levels in the node tree.

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

[0212] Exemplarily, if the first node attribute of the parent node of the current node indicates not to apply new data (or not to update the state of the interface component corresponding to the parent node), the electronic device can determine the processing method of the data of the current node as: not to apply new data (or not to update the state of the interface component corresponding to the current node).

[0213] Exemplarily, if the first node attribute of the parent node of the current node indicates to save the new data of the parent node and not to apply the new data of the parent node, the electronic device can determine the processing method of the data of the current node as: to save the new data and not to apply the new data of the node.

[0214] Generally, the interface element corresponding to the parent node is in a state invisible to the user, and the interface components corresponding to the child nodes of the parent node are also invisible to the user. Therefore, determining the processing method of the data of the child node through the first node attribute of the parent node shortens the process of the electronic device obtaining the first node attributes of each node in the node tree, which is beneficial to improving the efficiency of the electronic device in updating the data of the nodes in the node tree to a certain extent and is beneficial to reducing the delay in updating the display content of the user interface of the electronic device.

[0215] It should be noted that the method for determining the data of the current node according to the first node attribute of the parent node can be understood as the method for determining the data of the third-level node according to the first node attribute of the second-level node in the foregoing text, or as the method for determining the data of the third-level node according to the first node attribute of the first-level node in the foregoing text, or as the method for determining the data of the fourth-level node according to the first node attribute of the first-level node. The present application does not limit this.

[0216] Exemplarily, for Figure 7 the second-level node 33D in, the electronic device can determine, according to the first node attribute of its parent node (the first-level node 32E), that the first-level node 32E is in an inactive state, and does not update the state of the fifth display component 22E during the update of the user interface. Moreover, the electronic device can also determine, according to the first node attribute of the fifth first-level node 32E, not to update the state of the display component corresponding to the second-level node 33D during the update of the user interface.

[0217] Similarly exemplarily, in the case of determining that the second-level node 33D is in an inactive state, it can be determined that the state of the interface component corresponding to the child node (the third-level node 34C) of the second-level node 33D is not updated during the update of the user interface.

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

[0219] In some examples, the first node attribute can include a first attribute value. For example, the first attribute value is "true", and this first attribute value can be used to indicate that the new data of this node is not applied during the update of the user interface.

[0220] In some examples, the first attribute value can also be used to indicate that during the update of the user interface, the data change of the node in the inactive state is recorded, and the data of the node after the change (the new data of the node) is not applied.

[0221] In some examples, the first node attribute can include a second attribute value. For example, the second attribute value is "null", and this second attribute value can be used to indicate that during the update of the user interface, the processing method of the data of this node can be determined according to the first node attribute of the parent node of this node.

[0222] In some examples, the first attribute value can be identified by one, two, or more bit positions.

[0223] 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 update of the user interface, then the state of the interface component corresponding to the current node is not updated during the update of the user interface either.

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

[0225] For example, in the UI development framework or application program framework of the operating system, the electronic device can perform the following operations to prevent the data of the inactive state nodes from being updated during the update of the user interface. It should be understood that the user interface update method provided in this application can be applied to various user interface developments, and this application does not limit this.

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

[0227] In some examples, for the case where the interface component corresponding to the child node is a custom component, the electronic device can call the setActiveInternal (such as setActiveInternal related to JavaScript, Java, Kotlin, Objective-C, or Swift) method to notify the activation state or inactive state to the front end. After the front end obtains the foregoing activation state or inactive state, the electronic device can perform corresponding operations according to the whileInactive parameter set in the application.

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

[0229] Exemplarily, when the value of the whileInactive parameter is default or null or other values, the electronic device can 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 in the node tree.

[0230] For example, if the value of the whileInactive parameter of the parent node of the current node is true, the electronic device can 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 this node in this round of update.

[0231] For example, if there is a node in the link of the parent node of the current node (such as the parent node's parent node of the current node) whose whileInactive parameter value is true, the electronic device can 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 this node in this round of update.

[0232] Again, for example, if there is no node in the link of the parent node of the current node whose whileInactive parameter value is true, the electronic device will update the state of the interface component corresponding to this node in this round of update.

[0233] For example, when the TabContent interface component changes from being visible to the user to being invisible to the user, the corresponding backend FrameNode of the TabContent will change from the active state to the 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 decorated with @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 the inactive state. When the front end obtains this inactive state, the electronic device can determine that the value of the whileInactive parameter corresponding to the DelayedLinkComponent is true and will not trigger the viewPropertyHasChanged event.

[0234] When the electronic device executes without updating the state of the interface component corresponding to the node, the electronic device can use different processing methods to handle different state variables.

[0235] 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. Since the state variables are all set to delayed notification, the electronic device does not mark the change of the state variable as needing to be updated. In this way, during the process of updating the user interface, the electronic device does not update the data of the inactive state node through the vsync signal.

[0236] For another example, when the @Link state variable changes, the electronic device can mark that the @Link state variable has changed, but does not call syncPeerChanged to indicate that the state variable has changed, and the electronic device also does not call viewPropertyHasChanged to indicate that the view where the state variable is located has changed.

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

[0238] In some examples, in response to a user's operation (such as swiping an interface element or pinning an interface element to the top), the aforementioned nodes in the inactive state are converted to the active state, or rather, the aforementioned interface elements that are invisible to the user are converted to be visible to the user. The electronic device can perform the following operations to update the data of the active state nodes during the process of updating the user interface.

[0239] Exemplarily, when a node is converted from the inactive state to the active state, the electronic device can mark all nodes whose state variables have changed as dirty nodes, or rather, the electronic device can mark the nodes indicated by the dependentElementid of the state variable as dirty nodes, and use the vsync signal to update the states of the interface components corresponding to the dirty nodes during the next round of user interface update.

[0240] For example, in response to the TabContent component becoming visible to the user, or rather, in response to the node corresponding to the TabContent component being converted from the inactive state to the active state, the electronic device can execute an update function through the vsync signal to update the data previously marked as dirty nodes, thereby achieving the update of the data of the user interface nodes.

[0241] Figure 8The following shows a method for displaying a user interface provided by an embodiment of the present application. In response to an operation on the user interface, the electronic device can update the states of the interface components visible to the user without updating the states of the interface components invisible to the user, thereby improving the efficiency of user interface update.

[0242] S110, obtain a target operation acting on the first user interface.

[0243] The first user interface may include a first interface component and a second interface component, where 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.

[0244] In some examples, in the first user interface, the first interface component is in a first state and the second interface component is in a second state. 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, etc.

[0245] In some scenarios, that the first interface component is visible to the user can be understood as that the node corresponding to the first interface component is in an active state. Correspondingly, that the second interface component is invisible to the user can be understood as that the node corresponding to the second interface component is in a non-active state.

[0246] That the first interface component is in an active state can be determined according to the data included in the first interface component, and that the second interface component is in a non-active state can be determined according to the data included in the second interface component.

[0247] That the first interface component is visible to the user may mean that the first interface component can directly interact with the user, or rather, the user can trigger the corresponding operation of the first interface component. For example, the first interface component can receive the input information of the user. Another example is that the first interface component can respond to the dragging operation of the user, etc. That the second interface component is invisible to the user may mean that the second interface component cannot directly interact with the user, or rather, the user cannot trigger the corresponding operation of the second interface component.

[0248] In some examples, the first interface component is the interface component currently displayed on the electronic device, or rather, the first interface component may be located in the display area of the electronic device display screen. The second interface component is the interface component not currently displayed on the electronic device, or rather, the second interface component may be located outside the display area of the electronic device display screen. Exemplarily, the first interface component may be Figure 4 the first display component 22A shown, and the second interface component may be Figure 4 the fourth display component 22D shown.

[0249] 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.

[0250] In some examples, the first user interface includes multiple TabContents. The first interface component can be the TabContent currently displayed on the electronic device, and the second interface component can be the TabContent not currently displayed on the electronic device.

[0251] In some examples, the first interface component can be the interface component corresponding to the visible child node in the Swiper, and the second interface component is the interface component corresponding to the invisible child node in the Swiper.

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

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

[0254] In some examples, the change of the state variable can include one or more of the following situations: the variable value of the same state variable changes, the number of state variables of the interface component changes, or the type of the state variable changes, etc. For the sake of illustration, exemplarily, hereinafter, the change of the state variable of the interface component is expressed as changing from the first variable to the second variable. It should be noted that between the first variable and the second variable, the variable values of the same state variable can be different, and the number, type, etc. of the state variables included in the first variable and the second variable can be different. The present application does not limit this.

[0255] Exemplarily, 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.

[0256] Here, the state variable of the interface component can be used to determine the state of the interface component. In the case where the electronic device applies a new state variable, the state of the interface component will be updated. In other words, the change of the state variable of the interface component does not mean that the state of the interface component changes. After the new state variable is applied, the state of the interface component can change.

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

[0258] In response to the foregoing first operation, the state variable of the second interface component will also change. For example, in response to the first operation, the state variable indicating the color of the second interface component will also change.

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

[0260] In response to the foregoing second operation, the state variable of the second interface component will also change. For example, in response to the second operation, the state variable indicating the position of the second interface component will also change.

[0261] Since the second interface component is not visible to the user, in order to improve the efficiency of the electronic device in updating the user interface and shorten the latency of updating the user interface, when updating the first user interface, the electronic device may only update the first interface component and not update the second interface component. Or rather, the electronic device may only apply the new state variable of the first interface component and not apply the new state variable of the second interface component.

[0262] S120, display a second user interface.

[0263] The user interface obtained after updating the foregoing first user interface may be referred to as a second user interface.

[0264] The second user interface may include the first interface component in a second state and the second interface component in a second state. Or rather, the second user interface includes the first interface component determined according to a second variable and the second interface component determined according to a third variable. In other words, in the second user interface, the first interface component is in the state after updating the state variable, and the second interface component is in the state before updating the state variable.

[0265] 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.

[0266] Exemplarily, the electronic device may obtain the first component attribute of the first interface component and the first component attribute of the second interface component. 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 invisible to the user.

[0267] In some examples, the second component attribute of the second interface component may also be used to indicate that the state of the second interface component in the second user interface is not updated. Or rather, 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. Or rather, 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. Or rather, the second component attribute of the second interface component may also be used to indicate that the second interface component in the second user interface is in a third state. Or rather, the second component attribute of the second interface component may 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.

[0268] In some examples, the second interface component includes a first sub-component, and the third component attribute of the first sub-component may be used to indicate that the first sub-component is invisible to the user.

[0269] For example, the second interface component may be the first display component 22A in the foregoing embodiment, and the first sub-component may be the first "view comments" control 23 in the foregoing embodiment. Or, the second interface component may be the fourth display component 22D in the foregoing embodiment, and the first sub-component may be the second "view comments" control 25 in the foregoing embodiment.

[0270] In some examples, the third component attribute of the first sub-component may also be used to indicate that the state of the first sub-component in the second user interface is not updated. Or rather, the third component attribute of the first sub-component may also be used to indicate that the updated state variable is not applied to determine the state of the first sub-component in the second user interface. Or rather, the third component attribute of the first sub-component may also be used to indicate that the state of the first sub-component in the second user interface is the same as the state of the first sub-component in the first user interface. Or rather, the third component attribute of the first sub-component may also be used to indicate that the state of the first sub-component in the second user interface is determined according to the state variable of the first sub-component in the first user interface.

[0271] In some examples, the third component attribute of the first sub-component can be determined according to the second component attribute of the second interface component. When the second component attribute of the second interface component 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 third component attribute of the first sub-component indicates that the state of the first sub-component in the second user interface is the same as the state of the first sub-component in the first user interface.

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

[0273] Similarly, for the first sub-component of the second interface component, when the second interface component changes from invisible to visible to the user, the first sub-component can be switched to visible to the user, and the third user interface displayed by the electronic device can include the first sub-component determined according to the updated state variable.

[0274] In a possible implementation, the electronic device can display the foregoing 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.

[0275] In some other examples, the interface can be the part of the page displayed in the window. This part of the page can also include the first interface component and the second interface component. For example, the second interface component can exist in the window in the form of tab content.

[0276] In some examples, the electronic device can display multiple windows, and there can be an occlusion relationship between the multiple windows. In the lower-layer window occluded by the upper-layer window, the components located in the occluded area can be used as the second interface components.

[0277] In some examples, the foregoing window can be any one of a full-screen window, a split-screen window, or a floating window.

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

[0279] As mentioned above in combination with Figures 1 to 8The method embodiments of the present application are described in detail. Below, in combination with Figure 9 and Figure 10 the apparatus embodiments of the present application are described. It should be understood that the description of the method embodiments corresponds to the description of the apparatus embodiments. Therefore, for the parts not described in detail, reference may be made to the previous method embodiments.

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

[0281] In a possible implementation, the apparatus 900 for updating a user interface 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.

[0282] The acquisition module 910 may be used to support the electronic device to acquire user input, such as acquiring the target operation of the user on the first user interface as described above.

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

[0284] Optionally, the apparatus 900 for updating a user interface may further include a storage unit 930, which is used to store the program code and data of the apparatus 900 for updating a user interface.

[0285] Figure 10 An electronic device 1000 provided by 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 the memory and is used to execute the instructions stored in the memory to control the transceiver 1020 to send signals and / or receive signals.

[0286] Optionally, the electronic device 1000 may further include a memory 1030, which is used to store instructions.

[0287] In some embodiments, the above processor 1010 and the memory 1030 may be integrated into a processing device, and the processor 1010 is used to execute the program code stored in the memory 1030 to implement the above functions. Specifically, when implemented, the memory 1030 may also be integrated in the processor 1010 or independent of the processor 1010.

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

[0289] 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.

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

[0291] This embodiment also provides a computer-readable storage medium, in which computer instructions are stored. When the computer instructions run on an electronic device, the electronic device is enabled to execute the above-related method steps to implement the method of preloading shaders in the above embodiment.

[0292] This embodiment also provides a computer program product. When the computer program product runs on a computer, the computer is enabled to execute the above-related steps to implement the method of preloading shaders in the above embodiment.

[0293] In addition, an embodiment of the present application also provides a device, which may specifically be a chip, a component, or a module. The device may include a processor and a memory connected to each other. Among them, the memory is used to store computer execution instructions. When the device runs, the processor may execute the computer execution instructions stored in the memory so that the chip executes the method of preloading shaders in each of the above method embodiments.

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

[0295] Those of ordinary skill in the art can realize that the units and algorithm steps of each example described in combination with the embodiments disclosed herein can be implemented by electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are executed in a hardware or software manner depends on the specific application and design constraints of the technical solution. A professional technician can use different methods for each specific application to implement the described functions, but this implementation should not be considered to exceed the scope of this application.

[0296] Those skilled in the art can 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 foregoing method embodiments, and will not be elaborated here.

[0297] In several embodiments provided by the present 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 illustrative. For example, the division of the units is only a logical function division. In actual implementation, there may be other division methods. For example, 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 displayed or discussed coupling or direct coupling or communication connection between each other can be through some interfaces. The indirect coupling or communication connection of the devices or units can be in electrical, mechanical, or other forms.

[0298] The units described as separate components may or may not be physically separated. The components displayed as units may or may not be physical units, that is, they can be located in one place or distributed to multiple network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0299] In addition, in each embodiment of the present application, each functional unit can be integrated in a processing unit, or each unit can exist physically alone, or two or more units can be integrated in one unit.

[0300] If the function is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application, in essence, or the part that contributes to the prior art, or a part of this technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to enable 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 methods described in each embodiment of the present application. The foregoing storage medium includes: various media that can store program codes such as USB flash drives, mobile hard disks, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical discs.

[0301] The above is only the specific implementation manner of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art can easily think of changes or substitutions within the technical scope disclosed in the present application, and all should be covered by the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the protection scope of the claimed rights.

Claims

1. A method for updating a user interface, applied to an electronic device, characterized in that, it includes: 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 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; wherein, the first interface component is a visible component on the interface, and the second interface component is an invisible component on the interface.

2. The method according to claim 1, characterized in that, the first interface component in the first state is determined according to a first state variable, the first interface component in the third state is determined according to 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.

3. The method according to claim 1 or 2, characterized in that, the step of displaying the second user interface in response to the target operation further includes: Save a third state variable, the third state variable being 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, the first attribute being 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.

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

6. The method according to claim 4, characterized in that, the second interface component includes a first sub-component, the first sub-component includes a second attribute, 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 sub-component in the second user interface is the same as the state of the first sub-component in the first user interface.

7. The method according to any one of claims 1 to 6, characterized in that, the method further includes: In response to an update operation acting on the second user interface, the update operation being used to switch the second interface component to a visible component on the interface; Display a third user interface, the third user interface including the second interface component in a fourth state, the second interface component in the fourth state being 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 active state, and the second interface component is in an inactive state. The active state is determined according to the data included in the first interface component, and the inactive state is determined according to the data included in the second interface component.

9. The method according to claim 8, wherein, 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 not located on 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 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.

10. A method for updating an application interface, wherein, it includes: 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 active state, and the second component is in an inactive 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.

11. The method according to claim 10, wherein, the method further includes: in response to an update operation acting on the window, displaying a third page, the third page including the second component in a fourth state displayed in the window, and the second component is in an active state.

12. The method according to claim 10 or 11, wherein, the first component in the first state is determined according to a first state variable, the first component in the third state is determined according to 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.

13. The method according to any one of claims 10 to 12, wherein, the step of displaying the second page in the window in response to a target operation acting on the window further includes: saving a third state variable, the third state variable being 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, wherein, 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.

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

16. The method according to claim 14, wherein, the second component includes a first sub-component, and the first sub-component includes a second attribute, where the second attribute is determined according to 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 sub-component in the second page is the same as the state of the first sub-component in the first page.

17. An electronic device, wherein, it includes a processor and a memory, 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, wherein, it includes a module for implementing the method according to any one of claims 1 to 9 or claims 10 to 16.

19. A computer-readable storage medium, wherein, 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, wherein, it includes a processor and a memory, the processor is used to read instructions stored in the memory, and when the processor executes the instructions, the chip implements the method according to any one of claims 1 to 9 or claims 10 to 16.

Images