Layout class components will contain one or more sub-components, and different layout class components arrange sub-components in different ways, as shown in below table
| Widgets | illustrate | use |
|---|---|---|
| LeafRenderObjectWidget | Base class for non-container components | The leaf node of the Widget tree is used for widgets without child nodes. Usually, the basic components belong to this category, such as Image. |
| SingleChildRenderObjectWidget | Single child component base class | Contains a sub-Widget, such as: ConstrainedBox, DecoratedBox, etc. |
| MultiChildRenderObjectWidget | Multi-child component base class | Contains multiple sub-Widgets, and generally has a children parameter that accepts an array of Widgets. Such as Row, Column, Stack, etc. |
Layout components refer to Widgets that directly or indirectly inherit (include) SingleChildRenderObjectWidget and MultiChildRenderObjectWidget, and they generally have an child or children property for receiving sub-widgets. Let's take a look at the inheritance relationship Widget > RenderObjectWidget > (Leaf/SingleChild/MultiChild)RenderObjectWidget .
RenderObjectWidget The creation and update RenderObject methods are defined in the class, and subclasses must implement them. We only need to know that it is the object of the final layout and rendering UI interface. That is to say, for layout components, the layout algorithms are all It is realized through the corresponding RenderObject object, so if the reader is interested in the principle of a certain layout component introduced next, you can check its corresponding RenderObject implementation, for example Stack(cascade layout) the corresponding RenderObject object is RenderStack, and the implementation of the cascade layout is in RenderStack.
In this chapter, in order to let we have a quick understanding of the layout class Widget, we will not go into the RenderObject details. When studying this chapter, the our focus is to master the layout characteristics of different layout components, the specific principles and details, etc. After we get started with Flutter as a whole, we will study it if we are interested
First create a simple visible widget
|
Text("Text widget") |
If we want to add this visible widget to the Screen we need to put this widget inside the layout widget.
Let's create layout widget
|
Container( child: Text("Text Widget") ) |
Now let's add this Layoutwidget to the screen by
|
class Sample1 extends StatelessWidget{ @override Widget build (BuildContext context) { return Container( child: Text("Text Widget"); ) } } |