In the previous chapters of this book, we mentioned the concept of "UI system" many times. The UI system referred to in this book specifically refers to: a system based on a platform that implements GUI on this platform. The platform here specifically refers to Operating system, such as Android, iOS or Windows, macOS. We said that the principles of the UI system of each platform are the same, that is to say, whether it is Android or iOS, the process of displaying a user interface to the screen is similar. Therefore, before introducing the Flutter UI system, let's take a look at the UI. The basic principles of the system can help readers have a clear understanding of the operating system and the underlying UI logic of the system.
When it comes to the principle, we should start with the basic principle of displaying images on the screen. We know that the display (screen) is composed of one physical display unit. Each unit can be called a physical pixel, and each pixel can emit multiple colors. The principle of display phase is that different physical pixels Different colors are displayed on the dots to form a complete image in the end.
The total number of colors that a pixel can emit is an important indicator of the display. For example, the 16 million color screen we call means that a pixel can display 16 million colors, and the display color is composed of RGB three primary colors, so 16 million is 2 to the 24th power, that is, the depth of each basic color (R, G, B) is extended to 8 bit (bit), the deeper the color depth, the richer and more beautiful colors can be displayed.
In order to update the display screen, the display is refreshed at a fixed frequency (fetching data from the GPU). For example, the refresh frequency of a mobile phone screen is 60Hz. When a frame of image is drawn and ready to draw the next frame, the monitor will send out a vertical synchronization signal (such as VSync), and a 60Hz screen will send out such a signal 60 times within one second. And this signal is mainly used to synchronize the CPU, GPU and display. Generally speaking, in a computer system, the CPU, GPU, and display cooperate in a specific way: the CPU submits the calculated display content to the GPU, and the GPU puts it into the frame buffer after rendering, and then the video controller starts from the synchronization signal according to the synchronization signal. The frame buffer takes the frame data and transmits it to the display for display.
The tasks of CPU and GPU are different. CPU is mainly used for basic mathematics and logic calculations, while GPU is mainly used for complex mathematics related to graphics processing, such as matrix changes and geometric calculations. The main function of GPU is to determine the final delivery The color value of each pixel of the display.
Since the final graphics calculation and drawing are all done by the corresponding hardware, the instructions for directly operating the hardware are usually shielded by the operating system. Application developers usually do not face the hardware directly. The operating system will shield these underlying hardware operations. Provide some encapsulated APIs for applications on the operating system to call, but for application developers, it is more complicated and inefficient to directly call the APIs provided by these operating systems, because the APIs provided by the operating system are often relatively basic and direct The call needs to understand many details of the API. It is for this reason that almost all programming languages used to develop GUI programs will encapsulate a layer on top of the operating system, encapsulate the native API of the operating system in a programming framework and model, and then define a simple development rule to Development of GUI applications, and this level of abstraction is exactly what we call the "UI" system. For example, the Android SDK encapsulates the Android operating system API and provides a UI system of "UI description file XML+Java operation DOM" , And iOS UIKit has the same abstraction of View. They all abstract the operating system API into a basic object (such as Canvas for 2D graphics rendering), and then define a set of rules to describe the UI, such as the UI tree structure. The single-threaded principle of UI operation, etc.
We can see that the responsibilities of both the Android SDK and the iOS UIKit are the same, they are only different from the language carrier and the underlying system. So can you implement such a UI system: you can use the same programming language to develop, and then abstract a consistent interface for different operating system APIs, adapt to the middle layer of different operating systems, and then use the corresponding when packaging and compiling The middle layer code? If it can be done, then we can use the same set of code to write cross-platform applications. The principle of Flutter is exactly the same. It provides a set of Dart API, and then implements a set of code across multiple terminals through a cross-platform drawing library such as OpenGL (internally calling the operating system API). Since Dart API also calls operating system APIs, its performance is close to native.
Note that although Dart calls OpenGL first, then OpenGL calls the operating system API, but this is still native rendering, because OpenGL is only a package library of the operating system API, it does not require JavaScript runtime environment and CSS rendering like WebView rendering , So there will be no performance loss.
So far, we have introduced this part of the principle of interaction between the Flutter UI system and the operating system, and now we need to talk about the development standards it defines for application developers. In fact, in the previous chapters, we are already very familiar with this standard. The simple summary is: combination and response. We want to develop a UI interface, which needs to be achieved by combining other Widgets. In Flutter, everything is a Widget. When the UI changes, we do not directly modify the DOM, but update the state to let the Flutter UI system adapt to the new To rebuild the UI.
Speaking of this, readers may find that the concepts of Flutter UI system and Flutter Framework are similar. It is true. The reason for using "UI system" is that it may not be called that in other platforms. We just want to unify the concept and facilitate the description. Don't worry about the concept itself.
In the next section, we first describe in detail Element, RenderObjectwhich is the cornerstone of the composition Flutter UI system. Finally, let's analyze the overall process of starting and running the Flutter application.