CN111045675B - A Flutter-based page generation method, device, device and storage medium - Google Patents

Abstract

The embodiment of the present invention discloses a Flutter-based page generation method, device, device and storage medium. The Flutter-based page generation method includes: constructing a Flutter interface component library according to a preset classification method; disassembling and classifying a pre-designed demand page according to the preset classification method to obtain a first interface component; writing the first interface component A configuration parameter file of an interface component; calling a corresponding second interface component from the Flutter interface component library according to the configuration parameter file; generating a first page according to the second interface component. The embodiment of the present invention realizes high-efficiency development of pages through Flutter.

Description

A Flutter-based page generation method, device, device and storage medium

technical field

Embodiments of the present invention relate to page development technologies, and in particular, to a Flutter-based page generation method, device, device, and storage medium.

Background technique

Flutter is a new generation of cross-platform UI framework open sourced by Google. It was released at the 2018 GMTC conference. It has its own Skia rendering engine. When we use Flutter technology to write the interface, Flutter will use its own Skia engine for rendering. Not responsible for drawing. The point of "self-contained rendering engine" has ushered in a true cross-platform. As long as you write a code, you can build Android, IOS, and Web applications, and its experience can be consistent with that of native applications. The modular development of components based on the UI library can efficiently help us update the page, while reducing the complexity of the code and bringing better maintainability.

However, as a new product, most of Flutter’s functions are still not perfect. For example, Flutter does not have a UI component library with standardization, composition, reusability, and maintainability. Therefore, as a front-end technician, use Flutter’s new The efficiency of application page development with technology is still not high enough, and when the front-end technicians connect with specific businesses, the workload is still relatively large.

Contents of the invention

Embodiments of the present invention provide a Flutter-based page generation method, device, device, and storage medium to achieve high-efficiency development of pages through Flutter.

To achieve this purpose, an embodiment of the present invention provides a Flutter-based page generation method, the method comprising:

Construct the Flutter interface component library according to the preset classification method;

Disassemble and classify the pre-designed demand pages according to the preset classification method to obtain the first interface component;

Writing a configuration parameter file of the first interface component;

calling a corresponding second interface component from the Flutter interface component library according to the configuration parameter file;

A first page is generated according to the second interface component.

Further, the Flutter interface component library is constructed according to the preset classification method:

Call the first component data from the Framework layer of the Flutter framework;

The first component data is classified according to a preset classification method to construct a Flutter interface component library.

Further, calling out the first component data from the Framework layer of the Flutter framework includes:

Call the Material layer, Cupertino layer and Widgets layer from the Framework layer of the Flutter framework;

Call the first component data from the Material layer, Cupertino layer and Widgets layer.

Further, classifying the first component data according to a preset classification method to construct a Flutter interface component library includes:

dividing the first component data into basic components, view components and business components to make the first component data configurable;

A Flutter interface component library is constructed based on the basic components, view components and business components.

Further, the basic components include color value components, icon components and button components, the view components include message prompt components, pop-up layer components, loading components, carousel components, scrolling and pull-down refresh components, and the business components include public Web error page component.

Further, the generating the first page according to the second interface component includes:

generating a first page code according to the second interface component;

A first page is generated according to the first page code.

Further, after generating the first page according to the code code of the first page, it includes:

Perform logic programming on the first page to generate a second page.

On the one hand, the embodiment of the present invention also provides a Flutter-based page generation device, the device comprising:

Component library building module, used to build the Flutter interface component library according to the preset classification method;

A component classification module, configured to disassemble and classify the pre-designed demand pages according to the preset classification method to obtain the first interface components;

A file writing module, configured to write a configuration parameter file of the first interface component;

A component calling module, configured to call a corresponding second interface component from the Flutter interface component library according to the configuration parameter file;

A page generating module, configured to generate a first page according to the second interface component.

On the other hand, the embodiment of the present invention also provides a Flutter-based page generation device, the device includes: one or more processors; a storage device for storing one or more programs, when the one or more The program is executed by the one or more processors, so that the one or more processors implement the method provided by any embodiment of the present invention.

In yet another aspect, an embodiment of the present invention also provides a computer-readable storage medium, on which a computer program is stored, and when the program is executed by a processor, the method provided in any embodiment of the present invention is implemented.

The embodiment of the present invention constructs the Flutter interface component library according to the preset classification method; disassembles and classifies the pre-designed demand pages according to the preset classification method to obtain the first interface component; writes the first interface component Configure the parameter file; call the corresponding second interface component from the Flutter interface component library according to the configuration parameter file; generate the first page according to the second interface component, which solves the efficiency of using the Flutter new technology for application page development It is still not high enough, and when the front-end technicians connect with specific businesses, the workload is still relatively large, and the effect of developing pages through Flutter with high efficiency has been achieved.

Description of drawings

FIG. 1 is a schematic flowchart of a Flutter-based page generation method provided by Embodiment 1 of the present invention;

FIG. 2 is a schematic flowchart of a Flutter-based page generation method provided in Embodiment 2 of the present invention;

FIG. 3 is a schematic structural diagram of a Flutter-based page generation device provided by Embodiment 3 of the present invention;

FIG. 4 is a schematic structural diagram of a Flutter-based page generation device provided by Embodiment 4 of the present invention.

Detailed ways

The present invention will be further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described here are used to explain the present invention rather than limit the present invention. In addition, it should be noted that, for the convenience of description, only some structures related to the present invention are shown in the drawings but not all structures.

Before discussing the exemplary embodiments in more detail, it should be mentioned that some exemplary embodiments are described as processes or methods depicted as flowcharts. Although the flowcharts describe the steps as sequential processing, many of the steps may be performed in parallel, concurrently, or simultaneously. Additionally, the order of steps may be rearranged. A process may be terminated when its operations are complete, but may also have additional steps not included in the figure. A process may correspond to a method, function, procedure, subroutine, subroutine, or the like.

In addition, the terms "first", "second", etc. may be used herein to describe various directions, actions, steps or elements, etc., but these directions, actions, steps or elements are not limited by these terms. These terms are only used to distinguish a first direction, action, step or element from another direction, action, step or element. For example, a first module could be termed a second module, and, similarly, a second module could be termed a first module, without departing from the scope of the present application. Both the first module and the second module are modules, but they are not the same module. The terms "first", "second", etc. should not be understood as indicating or implying relative importance or implying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of said features. In the description of the embodiments of the present invention, "plurality" means at least two, such as two, three, etc., unless otherwise specifically defined.

Embodiment one

As shown in Figure 1, Embodiment 1 of the present invention provides a Flutter-based page generation method, which includes:

S110. Construct a Flutter interface component library according to a preset classification method.

In this embodiment, it is first necessary to build a Flutter interface component library. The default classification method can be the classification method defined by the developer according to his own needs and preferences. The developer can call all the interface components of the basic component library that comes with Flutter. Then classify the above interface components according to the preset classification method, so as to build the Flutter interface component library. It should be noted that the Flutter interface component library can be pre-built and can be used repeatedly.

S120. Disassemble and classify the pre-designed demand pages according to the preset classification method to obtain the first interface component.

In this embodiment, when the application page needs to be generated, the developer will design the final page to be generated, that is, the requirement page. The requirement page is a design draft file, which cannot be directly applied in the program, and then the requirement page can be disassembled Obtain multiple interface components on the required page, and finally classify the above multiple interface components according to the preset classification method for building the Flutter interface component library, and obtain the first interface component.

S130. Write a configuration parameter file of the first interface component.

S140. Call the corresponding second interface component from the Flutter interface component library according to the configuration parameter file.

S150. Generate a first page according to the second interface component.

In this embodiment, the developer also needs to write a configuration parameter file for the classified first interface component, so that the first interface component can correspond to the Flutter interface component library defined by the developer. According to the configuration parameter file, the Flutter interface can be The second interface component corresponding to the first interface component is called in the component library. Finally, the first page can be generated according to the second interface component.

The embodiment of the present invention constructs the Flutter interface component library according to the preset classification method; disassembles and classifies the pre-designed demand pages according to the preset classification method to obtain the first interface component; writes the first interface component Configure the parameter file; call the corresponding second interface component from the Flutter interface component library according to the configuration parameter file; generate the first page according to the second interface component, which solves the efficiency of using the Flutter new technology for application page development It is still not high enough, and when the front-end technicians connect with specific businesses, the workload is still relatively large, and the effect of developing pages through Flutter with high efficiency has been achieved.

Embodiment two

As shown in Figure 2, Embodiment 2 of the present invention provides a Flutter-based page generation method. Embodiment 2 of the present invention is further optimized on the basis of Embodiment 1 of the present invention. The method includes:

S210. Call the Material layer, Cupertino layer and Widgets layer from the Framework layer of the Flutter framework.

S220. Call the first component data from the Material layer, Cupertino layer and Widgets layer.

S230. Divide the first component data into basic components, view components, and business components so that the first component data is configurable.

S240. Construct a Flutter interface component library according to the basic components, view components and business components.

In this embodiment, when building the Flutter interface component library, you can first call the Material layer, Cupertino layer, and Widgets layer from the Framework layer of the Flutter framework. Optionally, you can further call the Rendering layer and Animation layer under the Widgets layer. Layer, Painting layer, Gestures layer and Foundation layer, and call their respective component data from the above layers. After the first component data is retrieved, optionally, the first component data is divided into basic components, view components and business components according to a preset classification method, so that the first component data can be configured. Among them, basic components can include color value components, icon components and button components, view components can include message prompt components, pop-up layer components, loading components, carousel components, scrolling and pull-down refresh components, and business components can include public network error page components .

S250. Disassemble and classify the predesigned demand pages according to the preset classification method to obtain the first interface component.

S260. Write a configuration parameter file of the first interface component.

S270. Call the corresponding second interface component from the Flutter interface component library according to the configuration parameter file.

Step S250 to step S270 in this embodiment of the present invention are the same as the implementation method in Embodiment 1 of the present invention, and will not be repeated here in this embodiment of the present invention.

S280. Generate a first page code according to the second interface component.

S290. Generate a first page according to the first page code.

S300. Perform logic programming on the first page to generate a second page.

In this embodiment, finally, according to the second interface component called from the Flutter interface component library, the corresponding first page code is obtained, and the first page is generated according to the first page code, and the developer's demand page is obtained. Further, it is also It is possible to write the logic of the first page, improve the functions of the first page, and obtain the second page that can be actually used. Through the pre-built Flutter interface component library, developers only need to disassemble and classify the required pages and write the corresponding configuration parameter files to get the pages that can be actually used.

Embodiment Three

As shown in Figure 3, Embodiment 3 of the present invention provides a Flutter-based page generation device 100, and the Flutter-based page generation device 100 provided in Embodiment 3 of the present invention can execute the Flutter-based page generation device 100 provided in any embodiment of the present invention. The method for generating a page has corresponding functional modules and beneficial effects for executing the method. The Flutter-based page generation device 100 includes a component library construction module 200 , a component classification module 300 , a file writing module 400 , a component calling module 500 and a page generation module 600 .

Specifically, the component library construction module 200 is used to construct the Flutter interface component library according to the preset classification method; the component classification module 300 is used to disassemble and classify the pre-designed demand pages according to the preset classification method to obtain the first Interface component; file writing module 400 is used to write the configuration parameter file of described first interface component; Component calling module 500 is used to call corresponding second interface component from described Flutter interface component storehouse according to described configuration parameter file; Page The generation module 600 is used for generating the first page according to the second interface component.

In this embodiment, the component library construction module 200 is specifically configured to call the first component data from the Framework layer of the Flutter framework; classify the first component data according to a preset classification method to construct a Flutter interface component library. The component library building module 200 is also specifically configured to call the Material layer, Cupertino layer and Widgets layer from the Framework layer of the Flutter framework; call the first component data from the Material layer, Cupertino layer and Widgets layer. The component library construction module 200 is also specifically used to divide the first component data into basic components, view components and business components so that the first component data can be configured; according to the basic components, view components and business components, a Flutter interface component library.

Preferably, the basic components include color value components, icon components and button components, the view components include message prompt components, pop-up layer components, loading components, carousel components, scrolling and pull-down refresh components, and the business components include Public web error page component.

Further, the page generation module 600 is specifically configured to generate a first page code according to the second interface component; generate a first page according to the first page code. The page generation module 600 is further configured to program logic on the first page to generate a second page.

Embodiment Four

FIG. 4 is a schematic structural diagram of a computer device for generating pages based on Flutter provided by Embodiment 4 of the present invention. Figure 4 shows a block diagram of an exemplary computer device 12 suitable for use in implementing embodiments of the present invention. The computer device 12 shown in FIG. 4 is only an example, and should not limit the functions and scope of use of this embodiment of the present invention.

As shown in FIG. 4, computer device 12 takes the form of a general-purpose computing device. Components of computer device 12 may include, but are not limited to: one or more processors or processing units 16 , system memory 28 , bus 18 connecting various system components including system memory 28 and processing unit 16 .

Bus 18 represents one or more of several types of bus structures, including a memory bus or memory controller, a peripheral bus, an accelerated graphics port, a processor, or a local bus using any of a variety of bus structures. These architectures include, by way of example, but are not limited to Industry Standard Architecture (ISA) bus, Micro Channel Architecture (MAC) bus, Enhanced ISA bus, Video Electronics Standards Association (VESA) local bus, and Peripheral Component Interconnect ( PCI) bus.

Computer device 12 typically includes a variety of computer system readable media. These media can be any available media that can be accessed by computer device 12 and include both volatile and nonvolatile media, removable and non-removable media.

System memory 28 may include computer system readable media in the form of volatile memory, such as random access memory (RAM) 30 and/or cache memory 32 . Computer device 12 may further include other removable/non-removable, volatile/nonvolatile computer system storage media. By way of example only, storage system 34 may be used to read and write to non-removable, non-volatile magnetic media (not shown in FIG. 4, commonly referred to as a "hard drive"). Although not shown in Figure 4, a disk drive for reading and writing to removable non-volatile disks (e.g. "floppy disks") may be provided, as well as for removable non-volatile optical disks (e.g. CD-ROM, DVD-ROM or other optical media) CD-ROM drive. In these cases, each drive may be connected to bus 18 via one or more data media interfaces. Memory 28 may include at least one program product having a set (eg, at least one) of program modules configured to perform the functions of various embodiments of the present invention.

A program/utility 40 having a set (at least one) of program modules 42 may be stored, for example, in memory 28, such program modules 42 including - but not limited to - an operating system, one or more application programs, other program Modules and program data, each or some combination of these examples may include the implementation of the network environment. Program modules 42 generally perform the functions and/or methodologies of the described embodiments of the invention.

The computer device 12 may also communicate with one or more external devices 14 (e.g., a keyboard, pointing device, display 24, etc.), and with one or more devices that enable a user to interact with the computer device 12, and/or with Any device (eg, network card, modem, etc.) that enables the computing device 12 to communicate with one or more other computing devices. Such communication may occur through input/output (I/O) interface 22 . Also, the computer device 12 can also communicate with one or more networks (eg, a local area network (LAN), a wide area network (WAN) and/or a public network, such as the Internet) through the network adapter 20 . As shown, network adapter 20 communicates with other modules of computer device 12 via bus 18 . It should be appreciated that although not shown, other hardware and/or software modules may be used in conjunction with computer device 12, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives And data backup storage system, etc.

The processing unit 16 executes various functional applications and data processing by running programs stored in the system memory 28, such as implementing the methods provided by the embodiments of the present invention:

Construct the Flutter interface component library according to the preset classification method;

Disassemble and classify the pre-designed demand pages according to the preset classification method to obtain the first interface component;

Writing a configuration parameter file of the first interface component;

calling a corresponding second interface component from the Flutter interface component library according to the configuration parameter file;

A first page is generated according to the second interface component.

Embodiment five

Embodiment 5 of the present invention also provides a computer-readable storage medium on which a computer program is stored. When the program is executed by a processor, the methods provided in all the invention embodiments of the present application are implemented:

Construct the Flutter interface component library according to the preset classification method;

Disassemble and classify the pre-designed demand pages according to the preset classification method to obtain the first interface component;

Writing a configuration parameter file of the first interface component;

calling a corresponding second interface component from the Flutter interface component library according to the configuration parameter file;

A first page is generated according to the second interface component.

The computer storage medium in the embodiments of the present invention may use any combination of one or more computer-readable media. The computer readable medium may be a computer readable signal medium or a computer readable storage medium. A computer readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device, or device, or any combination thereof. More specific examples (non-exhaustive list) of computer readable storage media include: electrical connections with one or more leads, portable computer disks, hard disks, random access memory (RAM), read only memory (ROM), Erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination of the above. In this document, a computer-readable storage medium may be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, apparatus, or device.

A computer readable signal medium may include a data signal carrying computer readable program code in baseband or as part of a carrier wave. Such propagated data signals may take many forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the foregoing. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device. .

Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including - but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.

Computer program code for carrying out the operations of the present invention may be written in one or more programming languages, or combinations thereof, including object-oriented programming languages—such as Java, Smalltalk, C++, and conventional Procedural Programming Language - such as "C" or a similar programming language. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In cases involving a remote computer, the remote computer may be connected to the user computer through any kind of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (such as through an Internet Service Provider). Internet connection).

Note that the above are only preferred embodiments of the present invention and applied technical principles. Those skilled in the art will understand that the present invention is not limited to the specific embodiments described herein, and that various obvious changes, rearrangements and substitutions can be made by those skilled in the art without departing from the protection scope of the present invention. Therefore, although the present invention has been described in detail through the above embodiments, the present invention is not limited to the above embodiments, and can also include more other equivalent embodiments without departing from the concept of the present invention. The scope is determined by the scope of the appended claims.

Claims (7)

1. A method for generating pages based on Flutter, comprising: Construct the Flutter interface component library according to the preset classification method; Disassemble and classify the pre-designed demand pages according to the preset classification method to obtain the first interface component; Writing a configuration parameter file of the first interface component; calling a corresponding second interface component from the Flutter interface component library according to the configuration parameter file; generating a first page according to the second interface component; Construct the Flutter interface component library according to the preset classification method: Call the first component data from the Framework layer of the Flutter framework; Classifying the first component data according to a preset classification method to construct a Flutter interface component library; The calling out of the first component data from the Framework layer of the Flutter framework includes: Call the Material layer, Cupertino layer and Widgets layer from the Framework layer of the Flutter framework; calling the first component data from the Material layer, Cupertino layer and Widgets layer; The classifying the first component data according to the preset classification method to construct the Flutter interface component library includes: dividing the first component data into basic components, view components and business components to make the first component data configurable; A Flutter interface component library is constructed based on the basic components, view components and business components. 2. The method according to claim 1, wherein the basic components include color value components, icon components and button components, and the view components include message prompt components, pop-up layer components, loading components, carousel components, A scrolling and pull-down refresh component, the business component includes a public network error page component. 3. The method according to claim 1, wherein the generating the first page according to the second interface component comprises: generating a first page code according to the second interface component; A first page is generated according to the first page code. 4. The method according to claim 3, characterized in that, after generating the first page according to the code code of the first page, comprising: Perform logic programming on the first page to generate a second page. 5. A flutter-based page generation device, characterized in that, comprising: Component library building module, used to build the Flutter interface component library according to the preset classification method; A component classification module, configured to disassemble and classify the pre-designed demand pages according to the preset classification method to obtain the first interface components; A file writing module, configured to write a configuration parameter file of the first interface component; A component calling module, configured to call a corresponding second interface component from the Flutter interface component library according to the configuration parameter file; a page generating module, configured to generate a first page according to the second interface component; The component library construction module is specifically used to call the first component data from the Framework layer of the Flutter framework; Classifying the first component data according to a preset classification method to construct a Flutter interface component library; The component library construction module is also specifically used to call the Material layer, Cupertino layer and Widgets layer from the Framework layer of the Flutter framework; calling the first component data from the Material layer, Cupertino layer and Widgets layer; The component library building module is further configured to divide the first component data into basic components, view components and business components to make the first component data configurable; A Flutter interface component library is constructed based on the basic components, view components and business components. 6. A Flutter-based page generation device, characterized in that, comprising: one or more processors; storage means for storing one or more programs, When the one or more programs are executed by the one or more processors, the one or more processors are made to implement the method according to any one of claims 1-4. 7. A computer-readable storage medium, on which a computer program is stored, wherein, when the program is executed by a processor, the method according to any one of claims 1-4 is implemented.

Images