Interface control method based on flexible layout and related equipment

Abstract

The embodiment of the invention belongs to the technical field of human-computer interaction, and relates to a flexible layout-based interface control method, which comprises the following steps of: receiving a list configuration instruction carrying list configuration information through a preset list display interface; configuring each preset list in the list display interface according to the list configuration information to obtain each configured target list; and updating the list display interface according to each target list to obtain an updated target display interface. The invention further provides an interface control device based on the flexible layout, computer equipment and a storage medium. According to the method, the interface layout is dynamically adjusted according to the list configuration information set by the user, flexible display and adjustment of the list are realized, the user can freely select to display or hide the specific list and adjust the size of each list, the adaptability of the interface is enhanced, the interface can meet different business scenes and individual requirements, and the user experience is improved. And the user experience and the working efficiency are obviously improved.

Description

Technical Field

[0001] This application relates to the field of human-computer interaction technology, and particularly to an interface control method and related devices based on flexible layout. Background Art

[0002] In the current digital information processing environment, user interfaces often need to display multiple list information simultaneously. For example, in a project management system, a user may need to view a task list, a progress list, a personnel allocation list, etc. at the same time.

[0003] However, in the traditional page layout mode, there are still many problems with existing multi-list display solutions. First, the default display of all lists will occupy a large amount of screen space, making it difficult to quickly locate key information. Second, the preset layout of each list is fixed, lacking a convenient operation method. These problems make users inefficient in processing multi-list information, seriously affecting the user experience and work efficiency. Summary of the Invention

[0004] The purpose of the embodiments of this application is to propose an interface control method and related devices based on flexible layout to solve the technical problem of poor efficiency when users process multi-list information.

[0005] To solve the above technical problem, the embodiments of this application provide an interface control method based on flexible layout, adopting the following technical solutions:

[0006] An interface control method based on flexible layout includes the following steps:

[0007] Receiving a list configuration instruction carrying list configuration information through a preset list display interface;

[0008] Configuring each preset list in the list display interface according to the list configuration information to obtain each configured target list;

[0009] Updating the list display interface according to each target list to obtain a target display interface with the update completed.

[0010] Further, the step of configuring each preset list in the list display interface according to the list configuration information to obtain each configured target list specifically includes:

[0011] Determining the target list state corresponding to each preset list according to the list configuration information;

[0012] Configuring each preset list according to the target list state to obtain each target list.

[0013] Further, the target list state includes a list display state and a list size state. The step of configuring each of the preset lists according to the target list state to obtain each of the target lists specifically includes:

[0014] Determine whether each of the preset lists is in a display state or a hidden state according to the list display state;

[0015] Determine the list size corresponding to each of the preset lists according to the list size state.

[0016] Further, after the step of updating the list display interface according to each of the target lists to obtain the updated target display interface, the following is further included:

[0017] In response to an interface storage instruction triggered by the target display interface, obtain the interface configuration information corresponding to the target display interface, and store the interface configuration information in a preset database.

[0018] To solve the above technical problems, an interface control device based on flexible layout is further provided in an embodiment of the present application, and the following technical solutions are adopted:

[0019] An interface control device based on flexible layout includes:

[0020] An instruction receiving module, configured to receive a list configuration instruction carrying list configuration information through a preset list display interface;

[0021] A list configuration module, configured to configure each of the preset lists in the list display interface according to the list configuration information to obtain each configured target list;

[0022] An interface update module, configured to update the list display interface according to each of the target lists to obtain an updated target display interface.

[0023] Further, the list configuration module includes:

[0024] A determination unit, configured to determine the target list state corresponding to each of the preset lists according to the list configuration information;

[0025] A configuration unit, configured to configure each of the preset lists according to the target list state to obtain each of the target lists.

[0026] Further, the target list state includes a list display state and a list size state, and the configuration unit includes:

[0027] A first determination subunit, configured to determine whether each of the preset lists is in a display state or a hidden state according to the list display state;

[0028] A second determination subunit, configured to determine the list sizes corresponding to the respective preset lists according to the list size status.

[0029] Furthermore, the interface control device further includes:

[0030] An information storage module, configured to obtain the interface configuration information corresponding to the target display interface in response to an interface storage instruction triggered by the target display interface, and store the interface configuration information in a preset database.

[0031] To solve the above technical problems, an embodiment of the present application further provides a computer device, which adopts the following technical solutions:

[0032] A computer device includes a memory and a processor. Computer-readable instructions are stored in the memory, and when the processor executes the computer-readable instructions, the steps of the interface control method based on flexible layout described above are implemented.

[0033] To solve the above technical problems, an embodiment of the present application further provides a computer-readable storage medium, which adopts the following technical solutions:

[0034] A computer-readable storage medium has computer-readable instructions stored thereon, and when the computer-readable instructions are executed by a processor, the steps of the interface control method based on flexible layout described above are implemented.

[0035] Compared with the prior art, the embodiments of the present application mainly have the following beneficial effects:

[0036] The interface control method based on flexible layout disclosed in the present application receives a list configuration instruction carrying list configuration information through a preset list display interface; configures each preset list in the list display interface according to the list configuration information to obtain each configured target list; updates the list display interface according to each target list to obtain an updated target display interface. By dynamically adjusting the interface layout according to the list configuration information set by the user, the present application realizes the flexible display and adjustment of the list, enabling the user to freely choose to display or hide a specific list and adjust the sizes of the lists, thereby optimizing the utilization rate of the screen space, reducing information congestion, and improving the readability of key content. In addition, the system can update the interface in real time to ensure instant feedback on user operations and improve the interaction fluency. Overall, the adaptability of the interface is enhanced, enabling it to meet different business scenarios and personalized needs, and significantly improving the user experience and work efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] To more clearly illustrate the solutions in this application, the following will give a brief introduction to the drawings required for the description of the embodiments of this application. Obviously, the drawings in the following description are some embodiments of this application. For those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on these drawings.

[0038] Figure 1 is an exemplary system architecture diagram to which this application can be applied;

[0039] Figure 2 is a flowchart of an embodiment of the interface control method based on flexible layout according to this application;

[0040] Figure 3 is a schematic structural diagram of an embodiment of the interface control device based on flexible layout according to this application;

[0041] Figure 4 is Figure 3 a schematic structural diagram of a specific implementation manner of the list configuration module shown;

[0042] Figure 5 is a schematic structural diagram of an embodiment of the computer device according to this application. Specific implementation manner

[0043] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by those of ordinary skill in the technical field to which this application belongs; the terms used in the description of this application in the specification are only for the purpose of describing specific embodiments and are not intended to limit this application; the terms "including" and "having" and any variations thereof in the specification and claims of this application and the above drawings are intended to cover non-exclusive inclusion. The terms "first", "second", etc. in the specification and claims of this application or the above drawings are used to distinguish different objects and not to describe a specific order.

[0044] Referring to "embodiment" herein means that the specific features, structures or characteristics described in connection with the embodiment may be included in at least one embodiment of this application. The appearance of this phrase in various positions in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment mutually exclusive with other embodiments. Those skilled in the art will explicitly and implicitly understand that the embodiments described herein can be combined with other embodiments.

[0045] To enable those skilled in the art to better understand the solutions of this application, the following will clearly and completely describe the technical solutions in the embodiments of this application in conjunction with the drawings.

[0046] Such as Figure 1As shown, the system architecture 100 may include terminal devices 101, 102, 103, a network 104, and a server 105. The network 104 is used to provide a medium for communication links between the terminal devices 101, 102, 103 and the server 105. The network 104 may include various connection types, such as wired, wireless communication links, or fiber optic cables, etc.

[0047] Users can use the terminal devices 101, 102, 103 to interact with the server 105 through the network 104 to receive or send messages, etc. Various communication client applications may be installed on the terminal devices 101, 102, 103, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social platform software, etc.

[0048] The terminal devices 101, 102, 103 may be various electronic devices with a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, e-book readers, MP3 (Moving Picture Experts Group Audio Layer III) players, MP4 (Moving Picture Experts Group Audio Layer IV) players, laptop computers, and desktop computers, etc.

[0049] The server 105 may be a server providing various services, such as a background server supporting the pages displayed on the terminal devices 101, 102, 103.

[0050] It should be noted that the interface control method based on flexible layout provided by the embodiments of the present application is generally executed by the server. Correspondingly, the interface control device based on flexible layout is generally set in the server.

[0051] It should be understood that Figure 1 the numbers of terminal devices, networks, and servers in

[0052] are merely illustrative. According to the implementation requirements, there may be any number of terminal devices, networks, and servers. Figure 2 Continuing to refer to

[0053] shows a flowchart of an embodiment of the interface control method based on flexible layout according to the present application. The interface control method based on flexible layout includes the following steps:

[0054] In this embodiment, the electronic device on which the interface control method based on flexible layout runs (such asFigure 1 The server shown can send or receive data through wired or wireless connection methods. It should be noted that the above wireless connection methods can include, but are not limited to, 3G / 4G / 5G connections, WiFi connections, Bluetooth connections, WiMAX connections, Zigbee connections, UWB (ultra wideband) connections, and other currently known or future-developed wireless connection methods.

[0055] In this embodiment, first, a list configuration instruction sent by a user or the system is received through a preset list display interface. This configuration instruction contains list configuration information indicating how to set attributes such as the display, hiding, and arrangement of each list. Specifically, the user triggers the sending of the list configuration instruction through an operation interface (such as by clicking a button, selecting an option, or entering in an input box), and this operation is transmitted to the background system through a front-end interaction interface (such as a web page or a mobile application). Exemplarily, at the front end, JavaScript or a framework (such as React, Vue, etc.) can be used to listen for user interaction events and send the configuration information to the backend.

[0056] Step S202: Configure each preset list in the list display interface according to the list configuration information to obtain each configured target list.

[0057] In this embodiment, the system dynamically configures each preset list in the display interface according to the received list configuration information, thereby obtaining updated target lists. The display, order, size, etc. of each list will be adjusted according to the configuration information. Specifically, first, the configuration information is parsed. The server or the front-end system parses the received configuration instruction and extracts key information such as the display status and arrangement order of each list. Then, the display attributes are updated, specifically including: display / hiding, updating the display status of each list according to the configuration information. For example, if the configuration information indicates that a certain list is hidden, the display attribute of the HTML element of this list is set to none to make it invisible; arrangement order, adjusting the arrangement order of the lists according to the configuration information. For example, the position of the elements in the DOM is changed through JavaScript to ensure that the lists are arranged in the specified order; layout adjustment, adjusting the size, spacing, or column width of the lists according to the configuration information. For example, CSS Grid or Flexbox layout is used to dynamically adjust the size of each list to ensure that the display interface meets the user's requirements; generating target lists, through the above configuration steps, the target lists required by the user are finally obtained. These target lists are in a state after being adjusted and configured and can be displayed on the page according to the requirements.

[0058] Step S203: Update the list display interface according to each of the target lists to obtain an updated target display interface.

[0059] In this embodiment, the key is to update the entire display interface according to the target list configured in the previous step to reflect the user's configuration result, and finally display an interface that meets the requirements. Specifically, the real-time update of the display interface means that the system updates the page based on the configured target list and changes the DOM elements on the page. If it is implemented through front-end technology, the DOM elements can be directly operated to modify the page layout, display content, etc. If it is implemented through the back-end system, the updated configuration information can be returned to the front-end, and the front-end can then refresh the interface asynchronously through AJAX or the like. Through the updated configuration, each target list on the user interface will be displayed in the set order and style. For example, the hidden list will no longer be displayed, and adjustments such as sorting, width, and spacing will take effect in real time. When the interface is updated, the system can provide a smooth transition effect (such as through CSS animations) to reduce the sense of abruptness perceived by the user and enhance the experience. According to the requirements, the user's interface configuration can be persistently stored through local storage or the server to ensure that the saved configuration can be directly loaded when the user logs in next time. In the specific implementation, the front-end can use the life cycle methods of the framework to implement the interface update. For example, useEffect in React can be used to respond to configuration changes.

[0060] This application dynamically adjusts the interface layout according to the list configuration information set by the user to achieve flexible display and adjustment of the list, enabling the user to freely choose to display or hide a specific list and adjust the size of each list, thereby optimizing the utilization rate of the screen space, reducing information congestion, and improving the readability of key content. In addition, the system can update the interface in real time to ensure instant feedback on user operations and enhance the interaction fluency. Overall, it enhances the adaptability of the interface, enabling it to meet different business scenarios and personalized needs, and significantly improving the user experience and work efficiency.

[0061] In some optional implementation manners of this embodiment, the step of configuring each preset list in the list display interface according to the list configuration information to obtain each configured target list specifically includes:

[0062] Determine the target list status corresponding to each preset list according to the list configuration information;

[0063] Configure each preset list according to the target list status to obtain each target list.

[0064] In this embodiment, the system determines the status of each preset list based on the received list configuration information and maps these statuses to the configuration of the target list. Specifically, first, the configuration information is parsed. The system extracts information such as the display attributes, arrangement order, column width, etc. of each preset list from the received list configuration information. This information can be manually set by the user or automatically generated by the system according to certain conditions (such as screen size, business requirements, etc.). Next, the target list status is determined. For each preset list, the system decides its target status based on the configuration information. The target list status usually includes: display status, sorting status, and size status. For example, one list should be displayed while another should be hidden; determine the order of the lists, which may be sorted by time, priority, etc.; size status: determine size information such as the width and height of the list. The system generates the target list status corresponding to each preset list by parsing the configuration information. For example, a certain task list may need to be displayed and placed in the first position according to the configuration; while the progress list needs to be hidden or placed on the right side of the screen. In actual operation, the configuration information may contain various attributes such as show, order, size, visibility, etc., and the system will decide how to update the status of each list based on this information. For example, the configuration information may specify that list 1 should be displayed on the left and have a width of 50%, and list 2 needs to be right-aligned and occupy the remaining space. According to the target list status determined in the above steps, the system makes corresponding configuration adjustments to each preset list and finally generates a target list that meets the requirements. The system decides whether to display the preset list based on the display status of the target list. For example, if the target status indicates that a certain list should be displayed, the system sets the display attribute of this list to block; if the list should be hidden, it is set to none. According to the order of the target list, the system rearranges these preset lists. Common implementation methods include modifying the order of the DOM elements of the list, using CSS Flexbox or Grid to adjust the order of the lists. If the configuration information contains requirements regarding size, the system adjusts attributes such as the width and height of the list, which can be achieved by dynamically setting CSS properties such as width, height, margin, padding, etc. For example, if the target list status specifies that the task list occupies 40% of the width and the progress list occupies 60% of the width, the system will dynamically adjust the CSS styles to achieve this goal. Based on all these configuration adjustments, the final target list will reflect the requirements in the configuration file. At this time, each preset list has been adjusted according to the target status, and these lists will be displayed on the user interface according to the new configuration.

[0065] Through the present application, the system can precisely control the display and hiding of each list according to the target list status, which can not only optimize the utilization of the interface space, but also improve the information acquisition efficiency. In a complex interface, users can set to only display necessary information, reduce interference, and enhance user attention.

[0066] In some alternative implementation manners of this embodiment, the above-mentioned target list status includes a list display status and a list size status. The step of configuring each of the preset lists according to the target list status to obtain each of the target lists specifically includes:

[0067] Determine whether each of the preset lists is in a display status or a hidden status according to the list display status;

[0068] Determine the list size corresponding to each of the preset lists according to the list size status.

[0069] In this embodiment, the system determines whether each preset list needs to be displayed according to the part regarding the display status in the received list configuration instruction. The display status generally includes two values: show or hide. If the display status of a certain preset list is show = true, the system will set the display attribute of this list to visible, which is usually achieved by setting the display attribute in CSS (for example, setting display to block). If the display status is show = false, the system will set the display attribute of this list to invisible (for example, display is set to none), hiding this list from the page. This process is implemented through front-end technologies such as HTML, CSS, and JavaScript. For example, JavaScript can control the display and hiding by modifying the style.display attribute of DOM elements. It may involve using CSS classes (such as.hidden) to manage the display and hiding of the list, thereby achieving a smooth visual transition effect. When the display status of multiple lists changes, the layout on the page needs to be adjusted immediately to avoid layout disorders. For example, if the task list is hidden, the space of this list needs to be occupied by other elements to avoid blank areas. For lists with frequently changing display status, lazy loading or virtual scrolling technology can be used to improve performance and reduce unnecessary DOM updates. The system determines the size of each preset list according to the size status of the target list and makes corresponding adjustments. The system obtains the size information that each list should have according to the size status of the target list, usually including the width, height, minimum width, maximum width, etc. of the list. According to the parsed size status, the system will dynamically adjust the size of each preset list. For example: If the target size status indicates that the width of the task list is 50%, the system will set the width of this list to 50% of the page width. If the specified width of the progress list is 30%, the system will adjust the width of the progress list to 30% of the page width. The system realizes the size adjustment by modifying the CSS style of the list element. For example, the width can be changed by setting style.width, the height can be changed by setting style.height, or the proportion of the list in the flex layout can be controlled by setting style.flex. If multiple lists share the page width, the system calculates the proportion of each list according to the configured size status and adjusts the space they occupy, so as to ensure that all lists are displayed evenly or as required. It should be noted that the size status may vary according to the device type or screen size. Therefore, when adjusting the size, media queries can be used to adapt to different screen sizes. For example, for large-screen devices, the task list can be displayed larger, while on small-screen devices, the width of the list can be reduced.To more flexibly control the list size, CSS Flexbox or Grid layout can be used. For example, the width ratio of the list can be controlled by flex - grow, flex - shrink, and flex - basis to ensure that the page layout is flexible and adaptable to various devices. The system can set the min - width or max - width of the list according to the configuration information to avoid the list size being too small or too large, ensuring the aesthetics and user experience of the page.

[0070] Through precise control of the display state (display / hide) and size state (width, height, etc.) of the target list in this application, the interface layout can be dynamically adjusted according to actual needs, enabling users to quickly obtain the required information during browsing and reducing interference from useless information.

[0071] In some alternative implementation manners of this embodiment, after the step of updating the list display interface according to each of the target lists to obtain the updated target display interface, the following is further included:

[0072] In response to the interface storage instruction triggered by the target display interface, obtain the interface configuration information corresponding to the target display interface and store the interface configuration information in a preset database.

[0073] In this embodiment, the system dynamically updates the interface according to the list configuration information (including list display status, size status, order, etc.). The updated target display interface is the interface that meets the user's current needs and has the required layout, display status, and size settings. Then, the system obtains the current interface configuration information from the target display interface according to the triggered interface storage instruction for subsequent saving. After the target display interface is updated, the system may trigger a save operation, which can be initiated by the user or be an automated operation (e.g., scheduled saving or automatic saving when the interface changes). The storage instruction can be triggered by button clicks, shortcut keys, or certain operations (e.g., when the user switches to another page, the system automatically saves the current layout). The system extracts relevant interface configuration information from the target display interface. This information includes display status, size status, order status, and other dynamically changing layout attributes such as list spacing, number of rows and columns, etc. For easy storage, the system converts these configuration information into a structured data format, such as JSON, XML, or other database-compatible formats. This can ensure the convenience of information access and subsequent processing. It should be noted that common formats include JSON or XML, and the data structure may include fields such as list ID, display status, size, sorting, etc. The system can automatically save the configuration each time the user adjusts the layout or periodically save the current layout when the user operates the interface, so that even if the user closes the interface, the layout can still be restored to the previous one when opened next time. Finally, the system saves the obtained interface configuration information to a preset database for subsequent use. The system selects the storage method according to actual needs, which can be local storage (such as SQLite, IndexedDB) or server-side storage (such as MySQL, PostgreSQL, NoSQL databases, etc.). The system first checks whether a database connection has been established. If not, it establishes a connection. Then, the system stores the obtained interface configuration information in the database, usually through the INSERT statement or update operation of the database. The configuration information may include fields such as list ID, display status, size, order, etc. To support multiple users or multiple devices, these configuration information may be associated with user ID, session ID, etc. The data stored in the database will be persistent. When the user accesses next time, the system can read these configurations from the database and restore to the user's previous layout state. To ensure the reliability of the storage process, transaction operations can be used to ensure that even if an error occurs, data loss will not occur.

[0074] In this application, after the user triggers the storage instruction, the interface configuration information is stored in a preset database. The system can save the user's interface settings, enabling the user to restore to the previous layout state when logging in next time, thereby reducing the workload of repeated configuration and enhancing the user experience.

[0075] The embodiments of the present application can acquire and process relevant data based on artificial intelligence technology. Among them, Artificial Intelligence (AI) is a theory, method, technology, and application system that uses digital computers or machines controlled by digital computers to simulate, extend, and expand human intelligence, perceive the environment, acquire knowledge, and use knowledge to obtain the best results.

[0076] Artificial intelligence basic technologies generally include technologies such as sensors, dedicated artificial intelligence chips, cloud computing, distributed storage, big data processing technology, operation / interaction systems, and mechatronics. Artificial intelligence software technologies mainly include several major directions such as computer vision technology, robotics, biometric technology, speech processing technology, natural language processing technology, and machine learning / deep learning.

[0077] Those of ordinary skill in the art can understand that all or part of the processes in the methods of the above embodiments can be completed by instructing relevant hardware through computer-readable instructions. These computer-readable instructions can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above methods. Among them, the aforementioned storage medium can be a non-volatile storage medium such as a magnetic disk, optical disk, Read-Only Memory (ROM), or a Random Access Memory (RAM), etc.

[0078] It should be understood that although the steps in the flowchart of the accompanying drawings are shown in sequence according to the arrows, these steps do not necessarily have to be executed in the order indicated by the arrows. Unless there is a clear indication in this article, the execution of these steps has no strict order limit, and they can be executed in other orders. Moreover, at least a part of the steps in the flowchart of the accompanying drawings may include multiple sub-steps or multiple stages. These sub-steps or stages do not necessarily have to be executed at the same time, but can be executed at different times. Their execution order does not necessarily have to be sequential, but can be executed alternately or in turn with at least a part of other steps or sub-steps or stages of other steps.

[0079] Further reference Figure 3 to Figure 2 As an implementation of the method shown above, an embodiment of an interface control device based on flexible layout is provided in the present application. This device embodiment corresponds to Figure 2 the method embodiment shown, and this device can be specifically applied to various electronic devices.

[0080] Such as Figure 3As shown in the figure, the interface control device 300 based on flexible layout described in this embodiment includes: an acquisition module 301, a list configuration module 302, and an interface update module 303. Among them:

[0081] An instruction receiving module 301, configured to receive a list configuration instruction carrying list configuration information through a preset list display interface;

[0082] A list configuration module 302, configured to configure each preset list in the list display interface according to the list configuration information to obtain each configured target list;

[0083] An interface update module 303, configured to update the list display interface according to each target list to obtain a target display interface after the update.

[0084] The interface control device based on flexible layout provided by this application can dynamically adjust the interface layout according to the list configuration information set by the user, realizing flexible display and adjustment of the list, enabling the user to freely choose to display or hide a specific list and adjust the size of each list, thereby optimizing the utilization rate of the screen space, reducing information congestion, and improving the readability of key content. In addition, the system can update the interface in real time to ensure instant feedback on user operations and improve the interaction fluency. Overall, it enhances the adaptability of the interface, enabling it to meet different business scenarios and personalized needs, and significantly improving the user experience and work efficiency.

[0085] In some optional implementation manners of this embodiment, the list configuration module 302 is further configured to:

[0086] Determine the target list state corresponding to each preset list according to the list configuration information;

[0087] Configure each preset list according to the target list state to obtain each target list.

[0088] The interface control device based on flexible layout provided by this application can accurately control the display and hiding of each list according to the target list state, which can not only optimize the utilization of the interface space but also improve the information acquisition efficiency. In a complex interface, the user can set to only display the necessary information, reducing interference and enhancing user attention.

[0089] In some optional implementation manners of this embodiment, the list configuration module 302 is further configured to:

[0090] Determine whether each preset list is in a display state or a hidden state according to the list display state;

[0091] Determine the list size corresponding to each preset list according to the list size state.

[0092] The interface control device based on flexible layout provided by the present application can dynamically adjust the interface layout according to actual needs by precisely controlling the display state (display / hide) and size state (width, height, etc.) of the target list, so that users can quickly obtain the required information during browsing and reduce the interference of useless information.

[0093] In some alternative implementation manners of this embodiment, the interface update module 303 is further configured to:

[0094] In response to the interface storage instruction triggered by the target display interface, obtain the interface configuration information corresponding to the target display interface, and store the interface configuration information in a preset database.

[0095] The interface control device based on flexible layout provided by the present application stores the interface configuration information in a preset database after the user triggers the storage instruction, so that the system can save the user's interface settings, enabling the user to restore to the previous layout state when logging in next time, thereby reducing the workload of repeated configuration and improving the user experience.

[0096] Refer to Figure 4 , which is a structural schematic diagram of a specific implementation manner of the calculation module. The list configuration module 302 includes a determination unit 3021 and a configuration unit 3022. Among them, the determination unit 3021 is configured to determine the target list state corresponding to each preset list according to the list configuration information; the configuration unit 3022 is configured to configure each preset list according to the target list state to obtain each target list.

[0097] In some alternative implementation manners of this embodiment, the above target list state includes a list display state and a list size state, and the configuration unit 3022 includes:

[0098] A first determination subunit, configured to determine whether each preset list is in a display state or a hidden state according to the list display state;

[0099] A second determination subunit, configured to determine the list size corresponding to each preset list according to the list size state.

[0100] The interface control device based on flexible layout provided by the present application can precisely control the display and hiding of each list according to the target list state. It can not only optimize the utilization of interface space but also improve the information acquisition efficiency. In a complex interface, users can set to only display necessary information, reduce interference, and enhance user attention.

[0101] In some alternative implementation manners of this embodiment, the above device 300 further includes an information storage module, configured to obtain the interface configuration information corresponding to the target display interface in response to an interface storage instruction triggered by the target display interface, and store the interface configuration information in a preset database.

[0102] The interface control device based on flexible layout provided by this application stores the interface configuration information in a preset database after the user triggers a storage instruction. The system can save the user's interface settings, enabling the user to restore to the previous layout state when logging in next time, thereby reducing the workload of repeated configuration and enhancing the user experience.

[0103] To solve the above technical problems, an embodiment of this application also provides a computer device. For details, please refer to Figure 5 , Figure 5 which is the basic structural block diagram of the computer device in this embodiment.

[0104] The computer device 4 includes a memory 41, a processor 42, and a network interface 43 that are communicatively connected to each other through a system bus. It should be noted that only the computer device 4 with components 41 - 43 is shown in the figure, but it should be understood that it is not required to implement all the shown components, and more or fewer components can be alternatively implemented. Among them, those skilled in the art of this technology can understand that a computer device here is a device that can automatically perform numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes but is not limited to a microprocessor, an application specific integrated circuit (ASIC), a field-programmable gate array (FPGA), a digital signal processor (DSP), an embedded device, etc.

[0105] The computer device can be a computing device such as a desktop computer, a notebook, a palm computer, and a cloud server. The computer device can perform human-computer interaction with the user through a keyboard, a mouse, a remote control, a touchpad, a voice control device, or the like.

[0106] The memory 41 at least includes one type of readable storage medium, and the readable storage medium includes flash memory, hard disk, multimedia card, card-type memory (such as SD or DX memory, etc.), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disc, etc. In some embodiments, the memory 41 may be an internal storage unit of the computer device 4, such as the hard disk or memory of the computer device 4. In other embodiments, the memory 41 may also be an external storage device of the computer device 4, such as a plug-in hard disk, Smart Media Card (SMC), Secure Digital (SD) card, FlashCard, etc. equipped on the computer device 4. Of course, the memory 41 may also include both the internal storage unit and the external storage device of the computer device 4. In this embodiment, the memory 41 is generally used to store the operating system and various application software installed on the computer device 4, such as computer-readable instructions based on the interface control method with flexible layout. In addition, the memory 41 may also be used to temporarily store various data that have been output or will be output.

[0107] In some embodiments, the processor 42 may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chips. The processor 42 is generally used to control the overall operation of the computer device 4. In this embodiment, the processor 42 is used to run the computer-readable instructions stored in the memory 41 or process data, such as running the computer-readable instructions based on the interface control method with flexible layout.

[0108] The network interface 43 may include a wireless network interface or a wired network interface, and the network interface 43 is generally used to establish a communication connection between the computer device 4 and other electronic devices.

[0109] The computer device provided in this application can dynamically adjust the interface layout according to the list configuration information set by the user, realize the flexible display and adjustment of the list, enable the user to freely select to display or hide a specific list, and adjust the size of each list, so as to optimize the utilization rate of the screen space, reduce information congestion, and improve the readability of key content. In addition, the system can update the interface in real time to ensure instant feedback on user operations and improve the interaction fluency. Overall, the adaptability of the interface is enhanced, enabling it to meet different business scenarios and personalized needs, and significantly improving the user experience and work efficiency.

[0110] The present application also provides another implementation manner, that is, to provide a computer-readable storage medium storing computer-readable instructions that can be executed by at least one processor, so that the at least one processor executes the steps of the interface control method based on flexible layout as described above.

[0111] The computer-readable storage medium provided by the present application dynamically adjusts the interface layout according to the list configuration information set by the user, realizes the flexible display and adjustment of the list, enables the user to freely select to display or hide a specific list, and adjust the size of each list, thereby optimizing the utilization rate of the screen space, reducing information congestion, and improving the readability of key content. In addition, the system can update the interface in real time to ensure instant feedback on user operations and improve the interaction fluency. Overall, the adaptability of the interface is enhanced, enabling it to meet different business scenarios and personalized needs, and significantly improving the user experience and work efficiency.

[0112] Through the description of the above implementation manners, those skilled in the art can clearly understand that the above-described example methods can be implemented by means of software plus a necessary general hardware platform. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation manner. Based on such an understanding, the technical solution of the present application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. The computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disc), and includes several instructions for causing a terminal device (which can be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to execute the methods described in various embodiments of the present application.

[0113] Obviously, the above-described embodiments are only a part of the embodiments of the present application, rather than all of the embodiments. The drawings show the preferred embodiments of the present application, but do not limit the patent scope of the present application. The present application can be implemented in many different forms. On the contrary, the purpose of providing these embodiments is to make the understanding of the disclosed content of the present application more thorough and comprehensive. Although the present application has been described in detail with reference to the foregoing embodiments, for those skilled in the art, they can still modify the technical solutions described in the foregoing specific embodiments, or perform equivalent replacements on some of the technical features. Any equivalent structure directly or indirectly using the content of the specification and drawings of the present application in other related technical fields shall be within the scope of the patent protection of the present application by the same token.

Claims

1. An interface control method based on flexible layout, characterized in that: The steps include: Receiving a list configuration instruction carrying list configuration information through a preset list display interface; Configure each preset list in the list display interface according to the list configuration information to obtain each configured target list; The list display interface is updated according to each of the target lists to obtain an updated target display interface.

2. The interface control method based on flexible layout according to claim 1, characterized in that: The step of configuring each preset list in the list display interface according to the list configuration information to obtain each configured target list specifically includes: Determine the target list status corresponding to each of the preset lists according to the list configuration information; Each of the preset lists is configured according to the target list status to obtain each of the target lists.

3. The interface control method based on flexible layout according to claim 2, characterized in that: The target list state includes a list display state and a list size state, and the step of configuring each of the preset lists according to the target list state to obtain each of the target lists specifically includes: According to the list display state, determining whether each of the preset lists is in a display state or a hidden state; According to the list size status, the list size corresponding to each of the preset lists is determined.

4. The interface control method based on flexible layout according to claim 1, characterized in that: After the step of updating the list display interface according to each of the target lists to obtain an updated target display interface, the method further includes: In response to the interface storage instruction triggered by the target display interface, interface configuration information corresponding to the target display interface is acquired, and the interface configuration information is stored in a preset database.

5. An interface control device based on flexible layout, characterized in that: include: An instruction receiving module, used to receive a list configuration instruction carrying list configuration information through a preset list display interface; A list configuration module, used to configure each preset list in the list display interface according to the list configuration information to obtain each configured target list; The interface updating module is used to update the list display interface according to each of the target lists to obtain an updated target display interface.

6. The interface control device based on flexible layout according to claim 5, characterized in that: The list configuration module includes: A determination unit, configured to determine the target list status corresponding to each of the preset lists according to the list configuration information; A configuration unit is used to configure each of the preset lists according to the state of the target list to obtain each of the target lists.

7. The interface control device based on flexible layout according to claim 6, characterized in that: The target list state includes a list display state and a list size state, and the configuration unit includes: A first determining subunit, configured to determine whether each of the preset lists is in a display state or a hidden state according to the display state of the list; The second determining subunit is used to determine the list size corresponding to each of the preset lists according to the list size state.

8. The interface control device based on flexible layout according to claim 5, characterized in that: The interface control device also includes: The information storage module is used to obtain the interface configuration information corresponding to the target display interface in response to the interface storage instruction triggered by the target display interface, and store the interface configuration information in a preset database.

9. A computer device, characterized in that: The method comprises a memory and a processor, wherein the memory stores computer-readable instructions, and the processor implements the steps of the flexible layout-based interface control method according to any one of claims 1 to 4 when executing the computer-readable instructions.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-readable instructions, and when the computer-readable instructions are executed by a processor, the steps of the flexible layout-based interface control method according to any one of claims 1 to 4 are implemented.

Images