Page component layout method, device, electronic device and readable storage medium

Abstract

The embodiments of the present disclosure provide a method, device, electronic device and readable storage medium for layout of page components. The method comprises: creating a Flutter component at a target position in a target page; creating a component wrapper in the Flutter component; rendering the target web component into the component wrapper to complete the layout of the page components. The embodiments of the present disclosure can realize the mixing of Flutter components and web components at any position in the page, improve the efficiency of Flutter Web adaptation, and ensure the interactive habits of the Web.

Description

Technical Field

[0001] Embodiments of the present disclosure relate to the technical field of page component layout, and in particular, to a page component layout method, device, electronic device, and readable storage medium. Background Art

[0002] Cross-end solutions based on Flutter are gaining more and more attention. In order to maximize the efficiency of multi-end reuse, various manufacturers are practicing Flutter Web (World Wide Web) (the extension of Flutter's cross-end technology on the web side). If Flutter Widgets and Web components can be mixed at any position in FlutterWeb (that is, Web components can be inserted at any Widget node position), the Web adaptation efficiency will be greatly improved, while ensuring the interaction habits (such as date pickers and drop-down boxes) on the web side (especially PCs (personal computers)).

[0003] In the prior art, a mounting node is usually preset in the Web, and a DOM (Document Object Model) API (Application Programming Interface) is directly called in Flutter to insert a Web component.

[0004] The above method can only realize the mixing of Flutter components and web components in the "preset fixed mounting node", but cannot realize the mixing of Flutter widgets and web components in any position. Summary of the invention

[0005] Embodiments of the present disclosure provide a page component layout method, device, electronic device, and readable storage medium to implement mixed layout of Flutter Widgets and Web components at any location.

[0006] According to a first aspect of an embodiment of the present disclosure, a page component layout method is provided, including:

[0007] Create a Flutter component at the target location in the target page;

[0008] Create a component wrapper in the Flutter component;

[0009] Render the target web component into the component wrapper to complete the page component layout.

[0010] According to a second aspect of an embodiment of the present disclosure, a page component layout device is provided, including:

[0011] A Flutter component creation module is used to create a Flutter component at a target location in a target page;

[0012] A component wrapper creation module, used to create a component wrapper in the Flutter component;

[0013] The web component rendering module is used to render the target web component into the component wrapper to complete the page component layout.

[0014] According to a third aspect of an embodiment of the present disclosure, there is provided an electronic device, including:

[0015] A processor, a memory, and a computer program stored in the memory and executable on the processor, wherein the processor implements any of the above-mentioned page component layout methods when executing the program.

[0016] According to a fourth aspect of an embodiment of the present disclosure, a readable storage medium is provided. When instructions in the storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute any of the page component layout methods described above.

[0017] The embodiments of the present disclosure provide a page layout method, device, electronic device and readable storage medium. By creating a Flutter component at the target position in the target page, creating a component wrapper in the Flutter component, and rendering the target web component into the component wrapper, the page component layout is completed. The embodiments of the present disclosure achieve mixed arrangement of Flutter Widgets and Web components at any position by creating a Flutter component including a component wrapper and rendering a Web component, thereby improving the Flutter Web adaptation efficiency and ensuring the interactive habits of the Web. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] In order to more clearly illustrate the technical solutions of the embodiments of the present disclosure, the drawings required for use in the description of the embodiments of the present disclosure will be briefly introduced below. Obviously, the drawings in the following description are only some embodiments of the embodiments of the present disclosure. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative labor.

[0019] Figure 1 A flowchart of a method for layout of page components provided by an embodiment of the present disclosure;

[0020] Figure 2 A flowchart of another method for layout of page components provided by an embodiment of the present disclosure;

[0021] Figure 3 A schematic diagram of the structure of a page component layout device provided in an embodiment of the present disclosure;

[0022] Figure 4 A schematic diagram of the structure of another page component layout device provided in an embodiment of the present disclosure. DETAILED DESCRIPTION

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

[0024] Embodiment 1

[0025] Reference Figure 1 , showing a flow chart of the steps of a page component layout method provided by an embodiment of the present disclosure, such as Figure 1 As shown, the page component layout method may include the following steps:

[0026] Step 101: Create a Flutter component at a target location in a target page.

[0027] The embodiments of the present disclosure can be applied to the scenario of implementing the mixed arrangement of Flutter components and web components at any position in a web page.

[0028] The target page refers to a page that needs to be mixed with Flutter components and web components. In this example, the target page can be a web page.

[0029] The target position refers to any position in the target page. In this example, the target position can be one page position or multiple page positions. Specifically, the number of target positions can be determined according to business requirements, and this embodiment does not impose any limitation on this.

[0030] Flutter is an open source toolkit that helps developers efficiently build beautiful multi-platform applications through a set of code bases, supporting mobile, web, desktop and embedded platforms.

[0031] Flutter components are components written in the Flutter programming language.

[0032] When it is necessary to mix Flutter components and web components at any position in the target page, the Flutter component can be created at the target position in the target page.

[0033] In this embodiment, after creating a Flutter component, you can also set the display style and display properties of the Flutter component. In this example, the display style can include the component length and component width of the Flutter component, and the display properties can include: padding properties, where the padding property refers to the padding of the element, which can define the blank area between the element border and the element content.

[0034] The embodiments of the present disclosure can implement custom settings of the styles of Flutter components and can implement diversified displays of Flutter components.

[0035] After the Flutter component is created at the target location in the target page, step 102 is performed.

[0036] Step 102: Create a component wrapper in the Flutter component.

[0037] The component wrapper can be used as a container to wrap the web component. In this example, the component wrapper is ShadowDOM.

[0038] After creating a Flutter component at a target location in a target page, a component wrapper may be created in the Flutter component to insert the web component.

[0039] After creating a component wrapper in the Flutter component, execute step 103.

[0040] Step 103: Render the target web component into the component wrapper to complete the page component layout.

[0041] The target web component refers to a web component that needs to be mixed with the Flutter component. In this example, the target web component can be a web component selected by the user or a web component provided by the system. Specifically, the selection method of the target web component can be determined according to business requirements, and this embodiment does not limit this.

[0042] After creating a component wrapper in the Flutter component, you can get the target web component and render it into the component wrapper to complete the page component layout.

[0043] The embodiments of the present disclosure create a widget in the form of ShadowDOM and render a Web component to achieve mixed arrangement of Flutter widgets and Web components at any position, thereby improving the Flutter Web adaptation efficiency.

[0044] The page component layout method provided by the embodiment of the present disclosure creates a Flutter component at a target position in a target page, creates a component wrapper in the Flutter component, and renders the target web component into the component wrapper to complete the page component layout. The embodiment of the present disclosure creates a Flutter component including a component wrapper and renders a Web component to achieve mixed arrangement of Flutter Widgets and Web components at any position, thereby improving the Flutter Web adaptation efficiency and ensuring the interactive habits of the Web.

[0045] Embodiment 2

[0046] Reference Figure 2 , showing a flow chart of steps of another page component layout method provided by an embodiment of the present disclosure, such as Figure 2 As shown, the page component layout method may include the following steps:

[0047] Step 201: Get the created web component.

[0048] The embodiments of the present disclosure can be applied to the scenario of implementing the mixed arrangement of Flutter components and web components at any position in a web page.

[0049] When you need to mix web components and Flutter components, you can get the created web components.

[0050] After the created web component is obtained, step 202 is executed.

[0051] Step 202: define the calling instruction information of the web component in the programming language corresponding to the target page.

[0052] The call indication information may be used to indicate information for calling a web component in a programming language corresponding to the target business plane.

[0053] After obtaining the created web component, you can define the calling instruction information of the web component in the programming language corresponding to the target page, that is, define the "declaration" of the created web component on the Dart side, so that the web component can be called by Dart in the form of JS.

[0054] After defining the calling instruction information of the web component in the programming language corresponding to the target page, step 203 is executed.

[0055] Step 203: Create a Flutter component at a target location in the target page.

[0056] The target page refers to a page that needs to be mixed with Flutter components and web components. In this example, the target page can be a web page.

[0057] The target position refers to any position in the target page. In this example, the target position can be one page position or multiple page positions. Specifically, the number of target positions can be determined according to business requirements, and this embodiment does not impose any limitation on this.

[0058] Flutter is an open source toolkit that helps developers efficiently build beautiful multi-platform applications through a set of code bases, supporting mobile, web, desktop and embedded platforms.

[0059] Flutter components are components written in the Flutter programming language.

[0060] When it is necessary to mix Flutter components and web components at any position in the target page, the Flutter component can be created at the target position in the target page.

[0061] In this embodiment, after creating a Flutter component, you can also set the display style and display properties of the Flutter component. In this example, the display style can include the component length and component width of the Flutter component, and the display properties can include: padding properties, where the padding property refers to the padding of the element, which can define the blank area between the element border and the element content.

[0062] The embodiments of the present disclosure can implement custom settings of the styles of Flutter components and can implement diversified displays of Flutter components.

[0063] After the Flutter component is created at the target location in the target page, step 204 is performed.

[0064] Step 204: Create the component wrapper based on the programming language corresponding to the target page.

[0065] The component wrapper can be used as a container to wrap the web component. In this example, the component wrapper is ShadowDOM.

[0066] After creating the Flutter component at the target location in the target page, you can create a component wrapper based on the programming language corresponding to the target page. For example, you can use dart:html to create a Shadow Dom.

[0067] After the component wrapper is created based on the programming language corresponding to the target page, step 205 is executed.

[0068] Step 205: Load the component wrapper into the Flutter component.

[0069] After creating a component wrapper based on the programming language corresponding to the target page, the component wrapper can be loaded into the Flutter component.

[0070] After the component wrapper is loaded into the Flutter component, step 206 is executed.

[0071] Step 206: Insert the target web component into the component wrapper.

[0072] The target web component refers to a web component that needs to be mixed with the Flutter component. In this example, the target web component can be a web component selected by the user or a web component provided by the system. Specifically, the selection method of the target web component can be determined according to business requirements, and this embodiment does not limit this.

[0073] After the component wrapper is loaded into the Flutter component, the target web component can be inserted into the component wrapper.

[0074] After the target web component is inserted into the component wrapper, step 207 is executed.

[0075] Step 207: Render and display the target web component to complete the page component layout.

[0076] After the target web component is inserted into the component wrapper, the target web component may be rendered to display the target web component and complete the layout of the page component.

[0077] The embodiments of the present disclosure create a Flutter component including a component wrapper and render a Web component to achieve mixed arrangement of Flutter Widgets and Web components at any position, thereby improving the Flutter Web adaptation efficiency and ensuring the interactive habits of the Web.

[0078] The page component layout method provided by the embodiment of the present disclosure creates a Flutter component at a target position in a target page, creates a component wrapper in the Flutter component, and renders the target web component into the component wrapper to complete the page component layout. The embodiment of the present disclosure creates a Flutter component including a component wrapper and renders a Web component to achieve mixed arrangement of Flutter Widgets and Web components at any position, thereby improving the Flutter Web adaptation efficiency and ensuring the interactive habits of the Web.

[0079] Embodiment 3

[0080] Reference Figure 3, showing a schematic diagram of the structure of a page component layout device provided by an embodiment of the present disclosure, such as Figure 3 As shown, the page component layout device 300 may include the following modules:

[0081] A Flutter component creation module 310 is used to create a Flutter component at a target location in a target page;

[0082] A component wrapper creation module 320, used to create a component wrapper in the Flutter component;

[0083] The web component rendering module 330 is used to render the target web component into the component wrapper to complete the page component layout.

[0084] The page component layout device provided by the embodiment of the present disclosure creates a Flutter component at a target position in a target page, creates a component wrapper in the Flutter component, and renders the target web component into the component wrapper to complete the page component layout. The embodiment of the present disclosure creates a Flutter component including a component wrapper and renders a Web component to achieve mixed arrangement of Flutter Widgets and Web components at any position, thereby improving the Flutter Web adaptation efficiency and ensuring the interactive habits of the Web.

[0085] Embodiment 4

[0086] Reference Figure 4 , showing a schematic diagram of the structure of another page component layout device provided by an embodiment of the present disclosure, such as Figure 4 As shown, the page component layout device 400 may include the following modules:

[0087] A web component creation module 410 is used to obtain a created web component;

[0088] A calling instruction definition module 420, used to define calling instruction information of the web component in the programming language corresponding to the target page;

[0089] A Flutter component creation module 430 is used to create a Flutter component at a target location in a target page;

[0090] A component wrapper creation module 440 is used to create a component wrapper in the Flutter component;

[0091] The web component rendering module 450 is used to render the target web component into the component wrapper to complete the page component layout.

[0092] Optionally, the device further comprises:

[0093] A component property setting module, used to set the display style and display properties of the Flutter component;

[0094] The display style includes: component length, component width, and the display attributes include: padding attributes.

[0095] Optionally, the component wrapper creation module 440 includes:

[0096] A component wrapper creation unit 441 is used to create the component wrapper based on the programming language corresponding to the target page;

[0097] The component wrapper loading unit 442 is used to load the component wrapper into the Flutter component.

[0098] Optionally, the Web component rendering module 450 includes:

[0099] A web component inserting unit 451, configured to insert the target web component into the component wrapper;

[0100] The web component rendering unit 452 is used to render and display the target web component to complete the page component layout.

[0101] The page component layout device provided by the embodiment of the present disclosure creates a Flutter component at a target position in a target page, creates a component wrapper in the Flutter component, and renders the target web component into the component wrapper to complete the page component layout. The embodiment of the present disclosure creates a Flutter component including a component wrapper and renders a Web component to achieve mixed arrangement of Flutter Widgets and Web components at any position, thereby improving the Flutter Web adaptation efficiency and ensuring the interactive habits of the Web.

[0102] An embodiment of the present disclosure further provides an electronic device, comprising: a processor, a memory, and a computer program stored in the memory and executable on the processor, wherein the page component layout method of the aforementioned embodiment is implemented when the processor executes the program.

[0103] An embodiment of the present disclosure further provides a readable storage medium, which, when instructions in the storage medium are executed by a processor of an electronic device, enables the electronic device to execute the page component layout method of the aforementioned embodiment.

[0104] As for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0105] The algorithms and displays provided herein are not inherently related to any particular computer, virtual system or other device. Various general purpose systems may also be used together with the teachings based thereon. According to the above description, it is apparent that the structure required for constructing such systems is. In addition, the embodiments of the present disclosure are not directed to any particular programming language either. It should be understood that the contents of the embodiments of the present disclosure described herein may be realized using various programming languages, and the description of the specific languages ​​above is intended to disclose the best mode of implementation of the embodiments of the present disclosure.

[0106] In the description provided herein, a large number of specific details are described. However, it is understood that the embodiments of the present disclosure can be practiced without these specific details. In some instances, well-known methods, structures and techniques are not shown in detail so as not to obscure the understanding of this description.

[0107] Similarly, it should be understood that in order to streamline the present disclosure and aid in understanding one or more of the various inventive aspects, in the above description of the exemplary embodiments of the present disclosure, the various features of the embodiments of the present disclosure are sometimes grouped together into a single embodiment, figure, or description thereof. However, the disclosed method should not be interpreted as reflecting the following intention: the claimed embodiments of the present disclosure require more features than the features explicitly recited in each claim. More specifically, as reflected in the claims below, the inventive aspects lie in less than all the features of the single embodiment disclosed above. Therefore, the claims that follow the specific embodiment are hereby expressly incorporated into the specific embodiment, with each claim itself serving as a separate embodiment of the embodiments of the present disclosure.

[0108] Those skilled in the art will appreciate that the modules in the devices in the embodiments may be adaptively changed and arranged in one or more devices different from the embodiments. The modules or units or components in the embodiments may be combined into one module or unit or component, and in addition they may be divided into a plurality of submodules or subunits or subcomponents. Except that at least some of such features and / or processes or units are mutually exclusive, all features disclosed in this specification (including the accompanying claims, abstracts and drawings) and all processes or units of any method or device disclosed in this manner may be combined in any combination. Unless otherwise expressly stated, each feature disclosed in this specification (including the accompanying claims, abstracts and drawings) may be replaced by an alternative feature providing the same, equivalent or similar purpose.

[0109] The various component embodiments of the embodiments of the present disclosure may be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. It should be understood by those skilled in the art that a microprocessor or a digital signal processor (DSP) may be used in practice to implement some or all of the functions of some or all of the components of the dynamic picture generation device according to the embodiments of the present disclosure. The embodiments of the present disclosure may also be implemented as a device or apparatus program for executing part or all of the methods described herein. Such a program implementing an embodiment of the present disclosure may be stored on a computer-readable medium, or may be in the form of one or more signals. Such a signal may be downloaded from an Internet website, or provided on a carrier signal, or provided in any other form.

[0110] It should be noted that the above embodiments illustrate rather than limit the embodiments of the present disclosure, and that those skilled in the art may design alternative embodiments without departing from the scope of the appended claims. In the claims, any reference symbol between brackets should not be constructed as a limitation on the claims. The word "comprising" does not exclude the presence of components or steps not listed in the claims. The word "one" or "an" preceding a component does not exclude the presence of multiple such components. The embodiments of the present disclosure may be implemented by means of hardware including several different components and by means of appropriately programmed computers. In a unit claim that lists several devices, several of these devices may be embodied by the same hardware item. The use of the words first, second, and third, etc. does not indicate any order. These words may be interpreted as names.

[0111] 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 aforementioned method embodiments and will not be repeated here.

[0112] The above description is only a preferred embodiment of the embodiments of the present disclosure and is not intended to limit the embodiments of the present disclosure. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the embodiments of the present disclosure should be included in the protection scope of the embodiments of the present disclosure.

[0113] The above is only a specific implementation of the embodiment of the present disclosure, but the protection scope of the embodiment of the present disclosure is not limited thereto. Any technician familiar with the technical field can easily think of changes or replacements within the technical scope disclosed by the embodiment of the present disclosure, which should be included in the protection scope of the embodiment of the present disclosure. Therefore, the protection scope of the embodiment of the present disclosure should be based on the protection scope of the claims.

Claims

1. A page component layout method, characterized in that: include: Create a Flutter component at the target location in the target page; Create a component wrapper in the Flutter component; Rendering the target Web component into the component wrapper includes creating a ShadowDOM widget and rendering the target Web component, so as to achieve mixed arrangement of Flutter widgets and the target Web component at any position, so as to complete the page component layout.

2. The method according to claim 1, characterized in that Before creating the Flutter component at the target location in the target page, the method further includes: Get the created web component; Define the calling instruction information of the Web component in the programming language corresponding to the target page.

3. The method according to claim 1, characterized in that After creating the Flutter component at the target location in the target page, the method further includes: Set the display style and display properties of the Flutter component; The display style includes: component length, component width, and the display attributes include: padding attributes.

4. The method according to claim 1, characterized in that: The creating a component wrapper in the Flutter component includes: Creating the component wrapper based on the programming language corresponding to the target page; The component wrapper is loaded into the Flutter component.

5. The method according to claim 1, characterized in that The rendering of the target Web component into the component wrapper to complete the page component layout includes: Inserting the target Web component into the component wrapper; Render and display the target Web component to complete the page component layout.

6. A page component layout device, characterized in that: include: A Flutter component creation module is used to create a Flutter component at a target location in a target page; A component wrapper creation module, used to create a component wrapper in the Flutter component; The web component rendering module is used to render the target web component into the component wrapper, including creating a widget in the form of ShadowDOM and rendering the target web component, so as to achieve mixed arrangement of Flutter widgets and the target web component at any position to complete the page component layout.

7. The device according to claim 6, characterized in that The device also includes: Web component creation module, used to obtain the created Web components; The calling instruction definition module is used to define the calling instruction information of the Web component in the programming language corresponding to the target page.

8. The device according to claim 6, characterized in that The device also includes: A component property setting module, used to set the display style and display properties of the Flutter component; The display style includes: component length, component width, and the display attributes include: padding attributes.

9. The device according to claim 6, characterized in that The component wrapper creation module includes: A component wrapper creation unit, configured to create the component wrapper based on a programming language corresponding to the target page; A component wrapper loading unit is used to load the component wrapper into the Flutter component.

10. The device according to claim 6, characterized in that The web component rendering module includes: A web component inserting unit, used for inserting the target web component into the component wrapper; The Web component rendering unit is used to render and display the target Web component to complete the page component layout.

11. An electronic device, characterized in that: include: A processor, a memory, and a computer program stored in the memory and executable on the processor, wherein the processor implements the page component layout method according to any one of claims 1 to 5 when executing the program.

12. A readable storage medium, characterized in that: When the instructions in the storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the page component layout method as described in any one of method claims 1 to 5.

Images