Flutter-based table drawing implementation method and device and electronic equipment

Abstract

The invention relates to a Flutter-based table drawing implementation method and device and electronic equipment, and belongs to the technical field of table drawing implementation, and the method comprises the following steps: defining basic information of table elements, basic information of cells and basic information of merged cells; generating target cell drawing information based on the basic information of the table elements, the basic information of the cells and the basic information of the merged cells; and drawing a target table according to the target cell drawing information based on a UI component of the Flutter. The technical problems that in the prior art, a control provided by a Flutter itself cannot meet a highly customized table component, and sufficient flexibility and expansibility cannot be provided are solved.

Description

Technical Field

[0001] The present invention relates to the technical field of table drawing implementation based on Flutter, and in particular to a table drawing implementation method, device and electronic device based on Flutter. Background Art

[0002] Currently, with the popularity of mobile applications and cross-platform development, developers are increasingly using advanced development frameworks to simplify the development process and improve application performance. Flutter is an open source application development framework from Google. With only one set of code base, you can build beautiful, native platform compiled multi-platform applications. Flutter provides many UI controls. For example, although the DataTable control can also achieve table effects, the DataTable control performs well in basic data display, but its built-in functions are relatively limited. It cannot meet complex data display and processing requirements, such as hierarchical data display, nested tables, dynamic column adjustment and other advanced functions. For table components that require high customization, DataTable cannot provide sufficient flexibility and scalability. Summary of the invention

[0003] In view of this, it is necessary to provide a table drawing implementation method, device and electronic device based on Flutter to solve the technical problem in the prior art that the controls provided by Flutter itself cannot meet the needs of highly customized table components and cannot provide sufficient flexibility and scalability.

[0004] In order to solve the above problems, the present invention provides a table drawing implementation method based on Flutter, including: Define the basic information of table elements, cells, and merged cells; Generate target cell drawing information based on basic information of table elements, basic information of cells and basic information of merged cells; Based on Flutter's UI components, draw the target table according to the target cell drawing information.

[0005] In a possible implementation, the basic information of the table element includes table width information, table height information and table line width information; the basic information of the cell includes row index information, column index information, cell content and merged cell identifier; the basic information of the merged cell includes cell position information and cell ID.

[0006] In a possible implementation, the target cell drawing information includes: Determine the drawing cell list according to the basic information of the table elements and the basic information of the cells; According to the drawing cell list, determine the merged drawing cell list; The target cell drawing information is determined according to the inclusion relationship between the merged drawing cell list and the drawing cell list.

[0007] In a possible implementation, determining the drawing cell list according to the basic information of the table element and the basic information of the cell includes: Initialize the cell list; Traverse the initial cell list and determine the drawing rectangle area information based on the basic information of the table elements and the basic information of the cells; Determine the cell position information according to the row index information and column index information of the cell; Determine the drawing cell list based on the drawing rectangle area information and cell position information.

[0008] In a possible implementation, determining, according to the drawing cell list, to merge the drawing cell list includes: Initialize the merged cell list; Traverse the initialized merged cell list, and determine the rectangle information of the merged area according to the starting row index information, starting column index information, row span information, and column span information of the merged cell list; Determine the merged drawing cell list based on the rectangle information of the merged area.

[0009] In a possible implementation, determining the target cell drawing information according to the inclusion relationship between the merged drawing cell list and the drawing cell list includes: Eliminate the drawing cell list contained in the merged drawing cell list to obtain the target cell drawing information.

[0010] In a possible implementation, the Flutter-based UI component draws the target table according to the target cell drawing information, including: According to the target cell drawing information, use Flutter's Container component to determine the border style of each cell and build the cell component; Based on the drawing area of ​​the cell component, a stack layout is constructed according to the Stack component to accommodate all the cell drawing areas; Match the Positioned component with each cell and add the Positioned component to the Stack component to achieve the target drawing.

[0011] In a second aspect, the present invention further provides a table drawing implementation device based on Flutter, including: Definition module, used to define basic information of table elements, basic information of cells and basic information of merged cells; A target drawing information determination module, used for generating target cell drawing information based on basic information of table elements, basic information of cells and basic information of merged cells; The table drawing module is used for Flutter-based UI components to draw the target table according to the target cell drawing information.

[0012] In a third aspect, the present invention further provides an electronic device, comprising: a processor and a memory; The memory stores a computer-readable program executable by the processor; When the processor executes the computer-readable program, the steps in the Flutter-based table drawing implementation method as described above are implemented.

[0013] In a fourth aspect, the present invention also provides a computer-readable storage medium, which stores one or more programs, and the one or more programs can be executed by one or more processors to implement the steps in the Flutter-based table drawing implementation method as described above.

[0014] The beneficial effects of the present invention are as follows: first, the basic information of the table elements, the basic information of the cells, and the basic information of the merged cells are defined; and based on the basic information of the table elements, the basic information of the cells, and the basic information of the merged cells, the target cell drawing information is generated; thereby the structural information of the table is agreed upon, and finally, based on the UI component of Flutter, the target table is drawn according to the target cell drawing information. The present invention realizes an efficient and customizable table drawing function through a structured definition of the table and a flexible drawing mechanism. By generating a list of drawable cells, deduplication operations, and combining the implementation of Flutter components, it is possible to flexibly respond to complex table requirements, with good practicality and scalability. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] Figure 1 A method flow chart of an embodiment of a table drawing implementation method based on Flutter provided by the present invention; Figure 2 for Figure 1 A method flow chart of an embodiment of step S102; Figure 3 for Figure 1 A method flow chart of another embodiment of step S102; Figure 4 It is a schematic diagram of an embodiment of a table drawing implementation device based on Flutter provided by the present invention; Figure 5 It is a schematic diagram of the operating environment of an electronic device provided by the present invention. DETAILED DESCRIPTION

[0016] The preferred embodiments of the present invention are described in detail below in conjunction with the accompanying drawings, wherein the accompanying drawings constitute a part of this application and are used together with the embodiments of the present invention to illustrate the principles of the present invention, but are not used to limit the scope of the present invention.

[0017] A specific embodiment of the present invention discloses a table drawing implementation method based on Flutter, please refer to Figure 1 ,include: S101, defining basic information of table elements, basic information of cells, and basic information of merged cells; S102, generating target cell drawing information based on basic information of table elements, basic information of cells, and basic information of merged cells; S103. Based on the Flutter UI component, draw the target table according to the target cell drawing information.

[0018] In this embodiment, the basic information of the table elements, the basic information of the cells, and the basic information of the merged cells are first defined; and based on the basic information of the table elements, the basic information of the cells, and the basic information of the merged cells, the target cell drawing information is generated; thereby agreeing on the structural information of the table, and finally drawing the target table based on the target cell drawing information based on the UI component of Flutter. The present invention realizes an efficient and customizable table drawing function through a structured definition of the table and a flexible drawing mechanism. By generating a list of drawable cells, deduplication operations, and combining the implementation of Flutter components, it is possible to flexibly respond to complex table requirements, with good practicality and scalability.

[0019] It should be noted that the relevant structural conventions include: TableCellElement: the smallest unit for operating a table, logically the information corresponding to a row or column in the table. The main attributes are cell ID, merge ID, row index, and column index.

[0020] Merge cell TableCellElement: Merging multiple initial cells generates a logical merged cell. The merge operation will point the merged ID of all merged initial cell attributes to the ID of the merged cell to indicate the association between the merged cell and the merged initial cell.

[0021] TableElement: A rectangle enclosed by multiple horizontal and vertical lines arranged according to row height and column width, displayed as a grid with multiple rows and columns. The main attributes include the number of rows, number of columns, line width, row height, column width, initial cell information set, and merged cell information set.

[0022] The logical representation of the cell being drawn is TableCell: a packaging form of cell information, used for drawing. The main attributes include cell information, cell ID, merge ID, and drawing area RECT.

[0023] In a specific embodiment, the basic information of the table element includes table width information, table height information and table line width information; the basic information of the cell includes row index information, column index information, cell content and merged cell identifier; the basic information of the merged cell includes cell position information and cell ID.

[0024] In some embodiments, the target cell drawing information includes: Determine the drawing cell list according to the basic information of the table elements and the basic information of the cells; According to the drawing cell list, determine the merged drawing cell list; The target cell drawing information is determined according to the inclusion relationship between the merged drawing cell list and the drawing cell list.

[0025] In this embodiment, the drawing cells are first determined to ensure that each cell to be displayed is taken into consideration in the initial stage to avoid missing cells in the final drawing. Basic information such as position, size, content, etc. is prepared in advance for each cell to ensure the accuracy of the drawing process. Then, by identifying the merged cells, the merged cells are avoided from being drawn multiple times, thereby improving the drawing efficiency, while ensuring the integrity of the merged cells, avoiding dividing them into multiple independent cells for drawing, and ensuring the correctness of the drawing results.

[0026] In a specific embodiment, the drawing cell list is determined according to the basic information of the table element and the basic information of the cell. Figure 2 ,include: S201, initialize the cell list; S202, traversing the initial cell list, and determining the drawing rectangular area information according to the basic information of the table element and the basic information of the cell; S203, determining the cell position information according to the row index information and column index information of the cell; S204: Determine a drawing cell list according to the drawing rectangle area information and the cell position information.

[0027] In this example, an empty drawing cell list List is created. <tablecell>tableCells. From the initial cell list List <tablecellelement>Read information from the drawing, calculate the drawing rectangle area of ​​each cell (based on the number of rows and columns, row height, column width), and generate the corresponding drawing cell List <tablecell>canvasCells.

[0028] In another specific embodiment, the merged drawing cell list is determined according to the drawing cell list. Figure 3 ,include: S301, initializing the merged cell list; S302, traversing the initialized merged cell list, and determining the rectangle information of the merged area according to the starting row index information, starting column index information, row span information, and column span information of the merged cell list; S303: Determine a merged drawing cell list according to the rectangle information of the merged area.

[0029] In this embodiment, traverse the merged cell list List <tablecellelement>, get the merge information, build the drawing rectangle area of ​​the merged cell, and form a List <tablecell>canvasCombineCells.

[0030] The drawing rectangle of the merged area refers to the actual display area of ​​the merged cells when the table is drawn. It represents the rectangular space occupied by the merged cells. This rectangle is used to define the position and size of each merged cell when drawing the table.

[0031] Then remove the cells with the same mergeId as the merged cells from canvasCells. Add canvasCombineCells and the deduplicated canvasCells to the final drawing cell list tableCells.

[0032] In some embodiments, the Flutter-based UI component draws the target table according to the target cell drawing information, including: According to the target cell drawing information, use Flutter's Container component to determine the border style of each cell and build the cell component; Based on the drawing area of ​​the cell component, a stack layout is constructed according to the Stack component to accommodate all the cell drawing areas; Match the Positioned component with each cell and add the Positioned component to the Stack component to achieve the target drawing.

[0033] In this embodiment, the Container component is first used to implement the drawing of each cell, and the border style of each cell is configured according to the target cell drawing information. The target cell drawing information includes the position, size, content, style (border, background color, etc.) of each cell. The Container component is a multifunctional component that can set the background color, border, inner margin, outer margin, etc., and is very suitable for building cells.

[0034] The specific operation is as follows: Traverse the target cell drawing information and create a Container component for each cell. Set the decoration property of the Container according to the border style of the cell (such as color, width, style, etc.). Place the content of the cell (such as text, pictures, etc.) in the subcomponent of the Container. The Container component provides a wealth of properties to customize the appearance of the cell, making it easy to adjust the style of the cell.

[0035] Furthermore, use the Stack component to hold all cell components and determine the position of each cell in the Stack based on its drawing area. The Stack component allows you to stack multiple child components (such as Container components) together, which is very suitable for complex layouts.

[0036] Specific operation: Create a Stack component as the parent container. Add the previously created Container components (representing each cell) to the Stack one by one. Determine the layout of each cell in the Stack based on its drawing area. The Stack component can stack multiple cell components together and support complex table layouts, such as overlays and overlaps. Cells can be flexibly positioned in the Stack without being restricted to the traditional grid layout, making the layout more free and diverse.

[0037] Furthermore, the Positioned component is used to precisely control the position of child components in the Stack by setting properties such as left, top, right, bottom, etc. Match the Positioned component with the drawing area of ​​each cell to ensure that each cell is positioned correctly.

[0038] Specific operation: Create a Positioned component for each cell component. Set the properties of the Positioned component according to the position information (such as left, top, right, bottom) in the target cell drawing information. Add the Positioned component to the Stack component to ensure the correct position and size of each cell. With the Positioned component, you can accurately control the position of each cell in the Stack, making complex table layouts more precise and flexible. Ensure that the position and size of each cell meet the requirements of the target cell drawing information to avoid drawing deviations.

[0039] Based on the above-mentioned table drawing implementation method based on Flutter, the embodiment of the present invention also provides a table drawing implementation device based on Flutter, please refer to Figure 4 ,include: A definition module 410 is used to define basic information of table elements, basic information of cells, and basic information of merged cells; The target drawing information determination module 420 is used to generate target cell drawing information based on the basic information of the table element, the basic information of the cell and the basic information of the merged cell; The table drawing module 430 is used to draw a target table based on the UI component of Flutter according to the target cell drawing information.

[0040] like Figure 5 As shown, based on the above-mentioned Flutter-based table drawing implementation method, the present invention also provides an electronic device, which can be a computing electronic device such as a mobile terminal, a desktop computer, a notebook, a PDA, and a server. The electronic device includes a processor 510, a memory 520, and a display 530. Figure 5 Only some components of the electronic device are shown, but it should be understood that it is not required to implement all of the components shown, and more or fewer components may be implemented instead.

[0041] In some embodiments, the memory 520 may be an internal storage unit of the electronic device, such as a hard disk or memory of the electronic device. In other embodiments, the memory 520 may also be an external storage electronic device of the electronic device, such as a plug-in hard disk, a smart memory card (Smart Media Card, SMC), a secure digital (SecureDigital, SD) card, a flash card (Flash Card), etc. equipped on the electronic device. Further, the memory 520 may also include both an internal storage unit of the electronic device and an external storage electronic device. The memory 520 is used to store application software and various types of data installed in the electronic device, such as program codes for installing electronic devices. The memory 520 can also be used to temporarily store data that has been output or is to be output. In one embodiment, a table drawing implementation program 540 based on Flutter is stored on the memory 520, and the table drawing implementation program 540 based on Flutter can be executed by the processor 510, thereby realizing the table drawing implementation method based on Flutter in each embodiment of the present application.

[0042] In some embodiments, the processor 510 may be a central processing unit (CPU), a microprocessor, or other data processing chip, used to run program codes stored in the memory 520 or process data, such as executing a Flutter-based table drawing implementation method.

[0043] In some embodiments, the display 530 may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, an OLED (Organic Light-Emitting Diode) touch device, etc. The display 530 is used to display information of the electronic device implemented in the Flutter-based table drawing and to display a visual user interface. The components 510-530 of the electronic device communicate with each other through a system bus.

[0044] Those skilled in the art will appreciate that all or part of the processes of the above-mentioned embodiments can be implemented by instructing related hardware through a computer program, and the program can be stored in a computer-readable storage medium, wherein the computer-readable storage medium is a disk, an optical disk, a read-only storage memory, or a random access memory, etc.

[0045] The above description is only a preferred specific implementation manner of the present invention, but the protection scope of the present invention is not limited thereto. Any changes or substitutions that can be easily conceived by any technician familiar with the technical field within the technical scope disclosed by the present invention should be covered within the protection scope of the present invention.< / tablecell> < / tablecellelement> < / tablecell> < / tablecellelement> < / tablecell>

Claims

1. A table drawing implementation method based on Flutter, characterized in that: include: Define the basic information of table elements, cells, and merged cells; Generate target cell drawing information based on basic information of table elements, basic information of cells and basic information of merged cells; Based on Flutter's UI components, draw the target table according to the target cell drawing information.

2. The method for implementing table drawing based on Flutter according to claim 1, characterized in that: The basic information of the table element includes table width information, table height information and table line width information; the basic information of the cell includes row index information, column index information, cell content and merged cell identifier; the basic information of the merged cell includes cell position information and cell ID.

3. The method for implementing table drawing based on Flutter according to claim 2 is characterized in that: The target cell drawing information includes: Determine the drawing cell list according to the basic information of the table elements and the basic information of the cells; According to the drawing cell list, determine the merged drawing cell list; The target cell drawing information is determined according to the inclusion relationship between the merged drawing cell list and the drawing cell list.

4. The method for implementing table drawing based on Flutter according to claim 3 is characterized in that: The step of determining a drawing cell list according to basic information of table elements and basic information of cells includes: Initialize the cell list; Traverse the initial cell list and determine the drawing rectangle area information based on the basic information of the table elements and the basic information of the cells; Determine the cell position information according to the row index information and column index information of the cell; Determine the drawing cell list based on the drawing rectangle area information and cell position information.

5. The method for implementing table drawing based on Flutter according to claim 3 is characterized in that: The step of determining the merged drawing cell list according to the drawing cell list includes: Initialize the merged cell list; Traverse the initialized merged cell list, and determine the rectangle information of the merged area according to the starting row index information, starting column index information, row span information, and column span information of the merged cell list; Determine the merged drawing cell list based on the rectangle information of the merged area.

6. The method for implementing table drawing based on Flutter according to claim 3 is characterized in that: The step of determining the target cell drawing information according to the inclusion relationship between the merged drawing cell list and the drawing cell list includes: Eliminate the drawing cell list contained in the merged drawing cell list to obtain the target cell drawing information.

7. The method for implementing table drawing based on Flutter according to claim 1, characterized in that: The Flutter-based UI component draws the target table according to the target cell drawing information, including: According to the target cell drawing information, use Flutter's Container component to determine the border style of each cell and build the cell component; Based on the drawing area of ​​the cell component, a stack layout is constructed according to the Stack component to accommodate all the cell drawing areas; Match the Positioned component with each cell and add the Positioned component to the Stack component to achieve the target drawing.

8. A table drawing implementation device based on Flutter, characterized in that: include: Definition module, used to define basic information of table elements, basic information of cells and basic information of merged cells; A target drawing information determination module, used for generating target cell drawing information based on basic information of table elements, basic information of cells and basic information of merged cells; The table drawing module is used for Flutter-based UI components to draw the target table according to the target cell drawing information.

9. An electronic device, characterized in that: include: Processor and memory; The memory stores a computer-readable program executable by the processor; When the processor executes the computer-readable program, the steps in the Flutter-based table drawing implementation method according to any one of claims 1 to 7 are implemented.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores one or more programs, and the one or more programs can be executed by one or more processors to implement the steps in the Flutter-based table drawing implementation method as described in any one of claims 1 to 7.

Images