CN114443186A - Multi-resolution automatic adaptive display method, system, medium and terminal based on Flutter framework - Google Patents
Multi-resolution automatic adaptive display method, system, medium and terminal based on Flutter framework Download PDFInfo
- Publication number
- CN114443186A CN114443186A CN202011204347.XA CN202011204347A CN114443186A CN 114443186 A CN114443186 A CN 114443186A CN 202011204347 A CN202011204347 A CN 202011204347A CN 114443186 A CN114443186 A CN 114443186A
- Authority
- CN
- China
- Prior art keywords
- resolution
- flutter
- interface
- screen
- screen resolution
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 27
- 230000003044 adaptive effect Effects 0.000 title claims abstract description 20
- 238000004590 computer program Methods 0.000 claims description 9
- 230000006978 adaptation Effects 0.000 abstract description 10
- 238000012545 processing Methods 0.000 description 10
- 238000010586 diagram Methods 0.000 description 4
- 230000008859 change Effects 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 235000019800 disodium phosphate Nutrition 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 230000007704 transition Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- B—PERFORMING OPERATIONS; TRANSPORTING
- B60—VEHICLES IN GENERAL
- B60R—VEHICLES, VEHICLE FITTINGS, OR VEHICLE PARTS, NOT OTHERWISE PROVIDED FOR
- B60R11/00—Arrangements for holding or mounting articles, not otherwise provided for
- B60R11/02—Arrangements for holding or mounting articles, not otherwise provided for for radio sets, television sets, telephones, or the like; Arrangement of controls thereof
- B60R11/0229—Arrangements for holding or mounting articles, not otherwise provided for for radio sets, television sets, telephones, or the like; Arrangement of controls thereof for displays, e.g. cathodic tubes
Abstract
The invention provides a multi-resolution automatic adaptation display method, a system, a medium and a terminal based on a Flutter frame, comprising the following steps: setting a resolution list supported by a UI version in the Flutter, wherein the UI version comprises a plurality of UI interfaces, and each UI interface corresponds to one resolution; acquiring screen resolution; and searching the adapted UI interface according to the screen resolution, and displaying based on the adapted UI interface. The multi-resolution automatic adaptive display method, the system, the medium and the terminal based on the Flutter frame store a plurality of UI interfaces in one UI version, and can automatically adopt the matched UI interfaces according to the current screen resolution when the Flutter application is started, thereby effectively reducing the problem of version synchronization.
Description
Technical Field
The invention relates to the technical field of resolution adaptation, in particular to a multi-resolution automatic adaptation display method, a multi-resolution automatic adaptation display system, a multi-resolution automatic adaptation display medium and a multi-resolution automatic adaptation display terminal based on a Flutter framework.
Background
The vehicle-mounted terminal performs positioning and navigation by utilizing a vehicle-mounted GPS (global positioning system) to be matched with an electronic map, can know the exact position of the vehicle at any time and any place when the vehicle is driven, and can conveniently and accurately tell a driver the shortest or fastest route to a destination. Currently, in-vehicle terminals have been widely used in vehicles. With the rapid development of the technology, the vehicle-mounted terminal develops a plurality of functions such as multimedia, broadcasting, searching, vehicle-mounted Bluetooth and the like, so that intelligent services can be provided for users.
In the prior art, different vehicle-mounted terminal display interfaces have different resolutions. In particular, the resolution in the android system is numerous. Generally, one resolution corresponds to one User Interface (UI) version, and there is a great loss in synchronization between versions. In particular, applications on the vehicle-mounted terminal often encounter a problem of multi-resolution adaptation, and since only the interface difference exists between multiple UI versions corresponding to multiple resolutions, business logic is substantially completely consistent, resulting in additional cost in version development and maintenance.
Disclosure of Invention
In view of the above drawbacks of the prior art, an object of the present invention is to provide a multi-resolution auto-adaptive display method, system, medium and terminal based on a Flutter frame, where multiple UI interfaces are stored in one UI version based on the Flutter frame, and the matched UI interfaces can be automatically adopted according to the current screen resolution when a Flutter application is started, so as to effectively reduce the problem of version synchronization.
In order to achieve the above objects and other related objects, the present invention provides a multi-resolution auto-adaptive display method based on a Flutter framework, comprising the steps of: setting a resolution list supported by a UI version in the Flutter, wherein the UI version comprises a plurality of UI interfaces, and each UI interface corresponds to one resolution; acquiring screen resolution; and searching the adapted UI interface according to the screen resolution, and displaying based on the adapted UI interface.
In an embodiment of the present invention, when the screen resolution is obtained, the screen resolution is obtained based on a materialApp component under a Flutter framework.
In an embodiment of the present invention, searching for an adapted UI interface according to the screen resolution, and displaying based on the adapted UI interface includes the following steps:
determining a corresponding Widget object according to the screen resolution;
and performing screen adaptive display on each element in the layout by using an XScrenUtil tool class according to the Widget object.
In an embodiment of the present invention, the elements include a font size, a progress bar size, and an input box size.
Correspondingly, the invention provides a multi-resolution automatic adaptive display system based on a Flutter frame, which comprises a setting module, an obtaining module and a display module;
the setting module is used for setting a resolution list supported by a UI version in the Flutter, wherein the UI version comprises a plurality of UI interfaces, and each UI interface corresponds to one resolution;
the acquisition module is used for acquiring the screen resolution;
the display module is used for searching the adapted UI interface according to the screen resolution and displaying the UI interface based on the adapted UI interface.
In an embodiment of the present invention, when the obtaining module obtains the screen resolution, the screen resolution is obtained based on a MaterialApp component under a Flutter frame.
In an embodiment of the present invention, the display module searches for an adapted UI interface according to the screen resolution, and the displaying based on the adapted UI interface includes the following steps:
determining a corresponding Widget object according to the screen resolution;
and performing screen adaptive display on each element in the layout by using an XScrenUtil tool class according to the Widget object.
The present invention provides a storage medium having stored thereon a computer program which, when executed by a processor, implements the foregoing multi-resolution auto-adaptive display method based on the Flutter framework.
Finally, the present invention provides a terminal comprising: a processor and a memory;
the memory is used for storing a computer program;
the processor is used for executing the computer program stored in the memory so as to enable the terminal to execute the multi-resolution automatic adaptive display method based on the Flutter framework.
In an embodiment of the present invention, the terminal is one or a combination of a vehicle-mounted terminal, a smart phone, a smart television, a tablet computer, and a PDA.
As described above, the multi-resolution automatic adaptation display method, system, medium and terminal based on the Flutter framework according to the present invention have the following advantages:
(1) various UI interfaces are stored in one UI version based on a Flutter frame, and the matched UI interfaces are automatically adopted according to the current screen resolution when the Flutter application is started, so that the multi-resolution self-adaption is realized;
(2) the problem of version synchronization is effectively reduced, and the version management cost is reduced;
(3) the intelligent degree is high, does not need user manual operation, and the practicality is strong.
Drawings
FIG. 1 is a schematic diagram illustrating display effects of different resolutions in an embodiment;
FIG. 2 is a flowchart illustrating an embodiment of a multi-resolution auto-adaptive display method based on the Flutter framework of the present invention;
FIG. 3 is a block diagram of an embodiment of a multi-resolution auto-adaptive display method based on the Flutter frame of the present invention;
FIG. 4 is a schematic diagram illustrating an embodiment of a multi-resolution auto-adaptive display system based on a Flutter framework according to the present invention;
fig. 5 is a schematic structural diagram of a terminal according to an embodiment of the invention.
Description of the element reference numerals
41 setting module
42 acquisition module
43 display module
51 processor
52 memory
Detailed Description
The embodiments of the present invention are described below with reference to specific embodiments, and other advantages and effects of the present invention will be easily understood by those skilled in the art from the disclosure of the present specification. The invention is capable of other and different embodiments and of being practiced or of being carried out in various ways, and its several details are capable of modification in various respects, all without departing from the spirit and scope of the present invention. It is to be noted that the features in the following embodiments and examples may be combined with each other without conflict.
It should be noted that the drawings provided in the following embodiments are only for illustrating the basic idea of the present invention, and the components related to the present invention are only shown in the drawings rather than drawn according to the number, shape and size of the components in actual implementation, and the type, quantity and proportion of the components in actual implementation may be changed freely, and the layout of the components may be more complicated.
Flutter is a Google open-source UI toolkit, helps developers to efficiently construct multi-platform exquisite applications through a set of code libraries, and supports mobile, Web, desktop and embedded platforms. Flutter is free of source and free of charge, has a loose source-opening protocol, and is suitable for commercial projects. The Flutter component is built using a modern responsive framework, which is an inspiration obtained from React, with the central idea being to build a UI with a component (widget). The components describe what they appear to be given their current configuration and state. When a component state changes, the component reconstructs its description (description), and Flutter compares the previous description to determine the minimum change needed to transition the underlying render tree from the current state to the next state.
As shown in fig. 1, the multi-resolution auto-adaptive display method based on the Flutter framework of the present invention is applied to a terminal having a display device. The terminal is one or a combination of a vehicle-mounted terminal, a smart phone, a smart television, a tablet personal computer and a PDA. Various UI interfaces are stored in one UI version through the Flutter frame on the terminal, and the matched UI interfaces can be automatically adopted according to the current screen resolution when the Flutter application is started, so that the problem of version synchronization is reduced, the version management cost is reduced, and the method has high practicability.
As shown in fig. 2, in an embodiment, the multi-resolution auto-adaptive display method based on Flutter framework of the present invention includes the following steps:
step S1, setting a resolution list supported by a UI version in the Flutter, wherein the UI version comprises a plurality of UI interfaces, and each UI interface corresponds to one resolution.
Specifically, under the Flutter framework, multiple UI interfaces are placed in one UI version, one resolution for each UI interface. A list of resolutions supported by the UI version is set in the main entry file of Flutter.
And step S2, acquiring screen resolution.
Specifically, the materialApp component under the Fluter framework is based on acquiring the screen resolution before displaying the top page.
And step S3, searching an adaptive UI interface according to the screen resolution and displaying based on the adaptive UI interface.
Specifically, a UI interface corresponding to the screen resolution is searched in the resolution list, and the UI interface is adopted for interface display.
In an embodiment of the present invention, searching for an adapted UI interface according to the screen resolution, and displaying based on the adapted UI interface includes the following steps:
31) and determining a corresponding Widget object according to the screen resolution, wherein the Widget object is laid out according to a UI (user interface).
32) And according to the Widget object, performing screen adaptive display on each element in the layout by using an XScrenenUtil tool class so as to achieve the highest fidelity. Wherein the elements include widget size, such as font size, progress bar size, input box size, and the like.
The multi-resolution auto-adaptive display method based on the Flutter framework of the present invention is further described below by specific examples.
As shown in fig. 3, in this embodiment, the main of the Flutter App is initialized, and a resolution list supported by the UI version is set; initializing a material App, acquiring the resolution of a screen, and setting the most appropriate resolution parameter; then, returning the corresponding Widget object according to the currently set resolution, and performing short edge adaptation on each element by using the Xscreen Util, thereby completing the adaptive adaptation of the resolution.
As shown in fig. 4, in an embodiment, the multi-resolution auto-adaptive display system based on Flutter framework of the present invention includes a setting module 41, an obtaining module 42, and a display module 43.
The setting module 41 is configured to set a resolution list supported by a UI version in Flutter, where the UI version includes multiple UI interfaces, and each UI interface corresponds to one resolution.
Specifically, under the Flutter framework, multiple UI interfaces are placed in one UI version, one resolution for each UI interface. A list of resolutions supported by the UI version is set in the main entry file of Flutter.
The acquisition module 42 is shown for acquiring screen resolution.
Specifically, the materialApp component under the Fluter framework is based on acquiring the screen resolution before displaying the top page.
The display module 43 is connected to the setting module 41 and the obtaining module 42, searches an adapted UI interface according to the screen resolution, and displays the UI interface based on the adapted UI interface.
Specifically, a UI interface corresponding to the screen resolution is searched in the resolution list, and the UI interface is adopted for interface display.
In an embodiment of the present invention, searching for an adapted UI interface according to the screen resolution, and displaying based on the adapted UI interface includes the following steps:
31) and determining a corresponding Widget object according to the screen resolution, wherein the Widget object is laid out according to a UI (user interface).
32) And performing screen adaptive display on each element in the layout by using an XScrenUtil tool class according to the Widget object, thereby achieving the highest fidelity. Wherein the elements include widget size, such as font size, progress bar size, input box size, and the like.
It should be noted that the division of the modules of the above apparatus is only a logical division, and the actual implementation may be wholly or partially integrated into one physical entity, or may be physically separated. And the modules can be realized in a form that all software is called by the processing element, or in a form that all the modules are realized in a form that all the modules are called by the processing element, or in a form that part of the modules are called by the hardware. For example: the x module can be a separately established processing element, and can also be integrated in a certain chip of the device. In addition, the x-module may be stored in the memory of the apparatus in the form of program codes, and may be called by a certain processing element of the apparatus to execute the functions of the x-module. Other modules are implemented similarly. All or part of the modules can be integrated together or can be independently realized. The processing element described herein may be an integrated circuit having signal processing capabilities. In implementation, each step of the above method or each module above may be implemented by an integrated logic circuit of hardware in a processor element or an instruction in the form of software. These above modules may be one or more integrated circuits configured to implement the above methods, such as: one or more Application Specific Integrated Circuits (ASICs), one or more microprocessors (DSPs), one or more Field Programmable Gate Arrays (FPGAs), and the like. When some of the above modules are implemented in the form of a Processing element scheduler code, the Processing element may be a general-purpose processor, such as a Central Processing Unit (CPU) or other processor capable of calling program code. These modules may be integrated together and implemented in the form of a System-on-a-chip (SOC).
The storage medium of the present invention stores thereon a computer program, which when executed by a processor implements the foregoing multi-resolution auto-adaptive display method based on the Flutter framework. Preferably, the storage medium includes: various media that can store program codes, such as ROM, RAM, magnetic disk, U-disk, memory card, or optical disk.
As shown in fig. 5, in an embodiment, the terminal of the present invention includes: a processor 51 and a memory 52.
The memory 52 is used for storing computer programs.
The memory 52 includes: various media that can store program codes, such as ROM, RAM, magnetic disk, U-disk, memory card, or optical disk.
The processor 51 is connected to the memory 52 and configured to execute the computer program stored in the memory 52, so that the terminal executes the multi-resolution auto-adaptive display method based on the Flutter framework.
Preferably, the Processor 51 may be a general-purpose Processor, including a Central Processing Unit (CPU), a Network Processor (NP), and the like; the Integrated Circuit may also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field Programmable Gate Array (FPGA) or other Programmable logic device, discrete Gate or transistor logic device, or discrete hardware components.
In an embodiment of the present invention, the terminal is one or more combinations of a vehicle-mounted terminal, a smart phone, a smart television, a tablet computer, and a PDA, which are configured with a display screen.
In summary, the multi-resolution automatic adaptive display method, system, medium and terminal based on the Flutter frame of the present invention store multiple UI interfaces in one UI version based on the Flutter frame, and automatically adopt the matched UI interface according to the current screen resolution when the Flutter application is started, thereby realizing multi-resolution self-adaptation; the problem of version synchronization is effectively reduced, and the version management cost is reduced; the intelligent degree is high, does not need user manual operation, and the practicality is strong. Therefore, the invention effectively overcomes various defects in the prior art and has high industrial utilization value.
The foregoing embodiments are merely illustrative of the principles and utilities of the present invention and are not intended to limit the invention. Any person skilled in the art can modify or change the above-mentioned embodiments without departing from the spirit and scope of the present invention. Accordingly, it is intended that all equivalent modifications or changes which can be made by those skilled in the art without departing from the spirit and technical spirit of the present invention be covered by the claims of the present invention.
Claims (10)
1. A multi-resolution automatic adaptive display method based on a Flutter framework is characterized by comprising the following steps:
setting a resolution list supported by a UI version in the Flutterer, wherein the UI version comprises a plurality of UI interfaces, and each UI interface corresponds to one resolution;
acquiring screen resolution;
and searching the adapted UI interface according to the screen resolution, and displaying based on the adapted UI interface.
2. The multi-resolution automatic adaptive display method based on the Flutter frame according to claim 1, wherein when the screen resolution is obtained, the screen resolution is obtained based on a materialApp component under the Flutter frame.
3. The Flutter frame based multi-resolution automatic adaptive display method according to claim 1, wherein an adapted UI interface is searched according to the screen resolution, and the display based on the adapted UI interface comprises the following steps:
determining a corresponding Widget object according to the screen resolution;
and performing screen adaptive display on each element in the layout by using an XScrenUtil tool class according to the Widget object.
4. The Flutter framework-based multi-resolution automatically-adapted display method of claim 3, the elements comprising a font size, a progress bar size, and an input box size.
5. A multi-resolution automatic adaptive display system based on a Flutter frame is characterized by comprising a setting module, an obtaining module and a display module;
the setting module sets a resolution list supported by a UI version in the FLUTTER, wherein the UI version comprises a plurality of UI interfaces, and each UI interface corresponds to one resolution;
the acquisition module acquires the screen resolution;
and the display module searches the adapted UI interface according to the screen resolution and displays the UI interface based on the adapted UI interface.
6. The Flutter frame based multi-resolution auto-adaptive display system according to claim 5, wherein the obtaining module obtains the screen resolution based on a MaterialApp component under the Flutter frame when obtaining the screen resolution.
7. The Flutter frame based multi-resolution automatically adapting display system of claim 5, said display module finding an adapted UI interface according to said screen resolution, said displaying based on the adapted UI interface comprising the steps of:
determining a corresponding Widget object according to the screen resolution;
and performing screen adaptive display on each element in the layout by using an XScrenUtil tool class according to the Widget object.
8. A storage medium having stored thereon a computer program, characterized in that the program, when being executed by a processor, implements the Flutter frame based multi-resolution auto-adaptive display method of any of claims 1 to 4.
9. A terminal, comprising: a processor and a memory;
the memory is used for storing a computer program;
the processor is configured to execute the computer program stored in the memory, so as to enable the terminal to execute the Flutter framework-based multi-resolution automatic adaptive display method according to any one of claims 1 to 4.
10. The terminal according to claim 9, wherein the terminal is one or more of a vehicle-mounted terminal, a smart phone, a smart television, a tablet computer and a PDA.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011204347.XA CN114443186A (en) | 2020-11-02 | 2020-11-02 | Multi-resolution automatic adaptive display method, system, medium and terminal based on Flutter framework |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011204347.XA CN114443186A (en) | 2020-11-02 | 2020-11-02 | Multi-resolution automatic adaptive display method, system, medium and terminal based on Flutter framework |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114443186A true CN114443186A (en) | 2022-05-06 |
Family
ID=81357153
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011204347.XA Pending CN114443186A (en) | 2020-11-02 | 2020-11-02 | Multi-resolution automatic adaptive display method, system, medium and terminal based on Flutter framework |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114443186A (en) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102662616A (en) * | 2012-03-28 | 2012-09-12 | 北京邮电大学 | Screen graphics self-adaption method and system used for mobile terminal |
| CN102779063A (en) * | 2011-05-10 | 2012-11-14 | 北京磊友信息科技有限公司 | Method for providing application invocation and server |
| CN107423055A (en) * | 2017-06-30 | 2017-12-01 | 百度在线网络技术（北京）有限公司 | Method, apparatus, equipment and the storage medium of adaptive terminal device resolution |
| CN110865863A (en) * | 2019-11-18 | 2020-03-06 | 北京小米移动软件有限公司 | Interface display method and device for fast application and storage medium |
-
2020
- 2020-11-02 CN CN202011204347.XA patent/CN114443186A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102779063A (en) * | 2011-05-10 | 2012-11-14 | 北京磊友信息科技有限公司 | Method for providing application invocation and server |
| CN102662616A (en) * | 2012-03-28 | 2012-09-12 | 北京邮电大学 | Screen graphics self-adaption method and system used for mobile terminal |
| CN107423055A (en) * | 2017-06-30 | 2017-12-01 | 百度在线网络技术（北京）有限公司 | Method, apparatus, equipment and the storage medium of adaptive terminal device resolution |
| CN110865863A (en) * | 2019-11-18 | 2020-03-06 | 北京小米移动软件有限公司 | Interface display method and device for fast application and storage medium |
Non-Patent Citations (1)
| Title |
|---|
| BIT小兵: "Flutter 移动端屏幕适配方案和制作", pages 1 - 3, Retrieved from the Internet <URL:《https://blog.csdn.net/weixin_30814329/article/details/98277079》> * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107562467B (en) | Page rendering method, device and equipment | |
| CN111881019B (en) | User interface testing method and device | |
| CN107656729B (en) | List view updating apparatus, method and computer-readable storage medium | |
| CN107729246B (en) | Auxiliary test method, device and equipment for target application and storage medium | |
| CN107861750B (en) | Label management method, label management device and intelligent terminal | |
| CN106648685B (en) | Intelligent terminal system application processing method and device and intelligent terminal | |
| CN111831309A (en) | Upgrading method, device, equipment and medium for multiple MCUs (micro control units) in Wifi (wireless fidelity) of Internet of things | |
| CN112230923A (en) | User interface rendering method, user interface rendering device and server | |
| CN110297764B (en) | Vulnerability test model training method and device | |
| CN111367518B (en) | Page layout method, page layout device, computing equipment and computer storage medium | |
| US20190196794A1 (en) | Visual programming method, system and terminal device | |
| CN110457408B (en) | Personalized map downloading method, device, equipment and storage medium | |
| CN112083925A (en) | Data acquisition method, device, equipment and storage medium based on H5 page development | |
| CN114443186A (en) | Multi-resolution automatic adaptive display method, system, medium and terminal based on Flutter framework | |
| CN111142990A (en) | WeChat applet page display method and device and storage medium | |
| US8112070B2 (en) | Electronic device and method for searching a merchandise location | |
| CN111538667A (en) | Page testing method and device | |
| CN114020187B (en) | Font icon display method and device and electronic equipment | |
| CN110888649B (en) | Application deployment method, application baseline creation method and device | |
| CN113760237A (en) | Compiling address updating method and device, terminal equipment and readable storage medium | |
| US9477448B2 (en) | Screen-oriented computing program refactoring | |
| CN108829574B (en) | Test data laying method, test server and computer readable storage medium | |
| CN112950167A (en) | Design service matching method, device, equipment and storage medium | |
| CN111610908A (en) | Method for generating frame diagram, computer equipment and readable storage medium | |
| CN112835494A (en) | Voice recognition result error correction method and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |