Flutter layout (ii)-Padding, Align, center detailed

This paper mainly introduces padding, align and center control in flutter layout, introduces its layout behavior and usage scene in detail, and analyzes the source code.

1. Padding

A widget that insets it child by the given padding.

1.1 Introduction

Padding in flutter used a lot of, as a basic control, the function is very single, to the child nodes set padding properties. All the other ends know this property, that is, to set the Padding property, the margin of the blank space, is also part of the widget.

Flutter does not have a separate margin control, in the container has the margin property, see the source of the implementation of the margin.

if (margin != null)  current = new Padding(padding: margin, child: current);

It is not difficult to see, flutter the difference between the margin and the padding, margin is actually achieved by padding.

1.2 Layout behavior

The layout of padding is divided into two situations:

• When the child is empty, it produces a region with a width of left+right and a height of top+bottom;
• When child is not empty, padding will pass the layout constraint to child, reducing the child's layout size according to the Padding property set. Padding then adjusts itself to child setting the size of the Padding property, creating an empty area around the child.

1.3 Inheritance Relations

Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > Padding

As you can see from the inheritance relationship, the padding control is an underlying control, unlike a combined control such as container. The margin and padding properties in container are implemented using padding controls.

1.3.1 About Singlechildrenderobjectwidget

Singlechildrenderobjectwidget is a subclass of renderobjectwidgets that restricts only one child node. It provides only the child's storage and does not provide the actual update logic.

1.3.2 About Renderobjectwidgets

Renderobjectwidgets provides configuration for renderobjectelement, while Renderobjectelement contains (wrap) RenderObject, RenderObject is the element that provides the actual drawing (rendering) in the application.

1.4 Sample Code

Instance code directly on the official example, very simple:

new Padding(  padding: new EdgeInsets.all(8.0),  child: const Card(child: const Text(‘Hello World!‘)),)

In the example, the card is set with an inner margin of 8 width.

1.5 Source Code parsing

The constructor functions are as follows:

const Padding({    Key key,    @required this.padding,    Widget child,  })

Contains a padding attribute, which is quite simple.

1.5.1 Attribute parsing

padding: padding is of type EdgeInsetsGeometry , Edgeinsetsgeometry is the base class for Edgeinsets and Edgeinsetsdirectional. In the actual use is not related to internationalization, such as the adaptation of the Arab region, are generally used edgeinsets. Edgeinsetsdirectional light to know the name is related to the direction, so its four margin is not limited to the upper and lower, but according to the direction of the set.

1.5.2 Source

@override  RenderPadding createRenderObject(BuildContext context) {    return new RenderPadding(      padding: padding,      textDirection: Directionality.of(context),   );}

The creation function of padding is actually RenderPadding carried out.

With regard to the actual layout of the renderpadding, when child is null:

if (child == null) {  size = constraints.constrain(new Size(    _resolvedPadding.left + _resolvedPadding.right,    _resolvedPadding.top + _resolvedPadding.bottom  ));  return;}

Returns an area with a width of _resolvedpadding.left+_resolvedpadding.right and a height of _resolvedpadding.top+_resolvedpadding.bottom.

When child is not NULL, it undergoes three processes, that is, adjusting the child's size, adjusting the child's position, and adjusting the padding size, eventually achieving the actual layout effect.

// 调整child尺寸final BoxConstraints innerConstraints = constraints.deflate(_resolvedPadding);child.layout(innerConstraints, parentUsesSize: true);// 调整child位置final BoxParentData childParentData = child.parentData;childParentData.offset = new Offset(_resolvedPadding.left, _resolvedPadding.top);// 调整Padding尺寸size = constraints.constrain(new Size(  _resolvedPadding.left + child.size.width + _resolvedPadding.right,  _resolvedPadding.top + child.size.height + _resolvedPadding.bottom));

Here, the padding layout behavior described above is explained.

1.6 Usage Scenarios

Padding itself is quite simple, basically need the spacing of places, it can be used. If in a single spacing scenario, using padding is less expensive than container, after all, container contains several widgets. Padding can achieve, container can achieve, but, container more complex.

2. Align

A widget that aligns it child within itself and optionally sizes itself based on the child ' s size.

2.1 Introduction

At the other end of the development, align is generally treated as a property of a control, and is not taken out as a separate control. The align itself is not complex, setting child alignment, such as centering, left and right, and adjusting its size according to child size.

2.2 Layout behavior

The layout behavior of align is divided into two situations:

• When Widthfactor and heightfactor are null, when there is a restriction, align will expand its size as far as possible, and when there is no restriction, it will be adjusted to the child's size;
• When Widthfactor or heightfactor is not NULL, Aligin will expand its size according to the factor attribute, such as setting Widthfactor to 2.0, then the align will be twice times the width of the child.

Why does align have such a layout behavior? The reason is simple, if you set the alignment, the internal alignment cannot be determined if the outer element size is not deterministic. Therefore, there will be a wide-height factor, which expands to the maximum size according to the outer limit, and adjusts to the child size when the outer layer is indeterminate.

2.3 Inheritance Relations

Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > Align

As you can see, align, like padding, is also a very basic component, and the Align attribute in container is also implemented using align.

2.4 Sample Code

new Align(  alignment: Alignment.center,  widthFactor: 2.0,  heightFactor: 2.0,  child: new Text("Align"),)

The example is still simple, setting a align with a wide height of twice times the child, whose child is in the middle.

2.5 Source Code parsing

const Align({    Key key,    this.alignment: Alignment.center,    this.widthFactor,    this.heightFactor,    Widget child  })

The Align constructor is basically the width-height factor, the alignment attribute. In daily use, the width and height factor attribute is basically not used much. If it is a complex layout, the Align property inside the container can also achieve the same effect.

2.5.1 Attribute parsing

Alignment: Alignment generally uses the 9 methods provided by the system by default, but it does not mean that there are only 9, such as the following definitions. The 9 ways the system provides are only predefined.

/// The top left corner.static const Alignment topLeft = const Alignment(-1.0, -1.0);

Alignment actually contains two attributes, with the first argument, 1.0 being the left alignment, 1.0 to the right, the second argument, 1.0 to the top, and 1.0 to the bottom. According to this rule, we can also customize the alignment we need, such as

/// 居右高于底部1/4处.static const Alignment rightHalfBottom = alignment: const Alignment(1.0, 0.5),

widthfactor: Width factor, if set, the width of the align is the width of the child multiplied by this value, cannot be negative.

heightfactor: Height factor, if set, the height of the align is the height of the child multiplied by this value, cannot be negative.

2.5.2 Source

@override  RenderPositionedBox createRenderObject(BuildContext context) {    return new RenderPositionedBox(      alignment: alignment,      widthFactor: widthFactor,      heightFactor: heightFactor,      textDirection: Directionality.of(context),    );  }

The actual construction of the align is called RenderPositionedBox .

The Renderpositionedbox layout behaves as follows:

// 根据_widthFactor、_heightFactor以及限制因素来确定宽高final bool shrinkWrapWidth = _widthFactor != null || constraints.maxWidth == double.infinity;final bool shrinkWrapHeight = _heightFactor != null || constraints.maxHeight == double.infinity;if (child != null) {  //  如果child不为null，则根据规则设置Align的宽高，如果需要缩放，则根据_widthFactor是否为null来进行缩放，如果不需要，则尽量扩展。  child.layout(constraints.loosen(), parentUsesSize: true);  size = constraints.constrain(new Size(shrinkWrapWidth ? child.size.width * (_widthFactor ?? 1.0) : double.infinity,                                        shrinkWrapHeight ? child.size.height * (_heightFactor ?? 1.0) : double.infinity));  alignChild();} else {  // 如果child为null，如果需要缩放，则变为0，否则就尽量扩展  size = constraints.constrain(new Size(shrinkWrapWidth ? 0.0 : double.infinity,                                        shrinkWrapHeight ? 0.0 : double.infinity));}

2.6 Usage Scenarios

Generally used in alignment scenarios, such as needing to align right or bottom. It can realize the function, container can achieve.

3. Center

Center inherits from align, except that alignment is set to Alignment.center, other properties such as Widthfactor, heightfactor, layout behavior, are exactly the same as align, and are no longer introduced here alone. Center source code as follows, did not set the Alignment property, because the align default alignment is centered.

class Center extends Align {  /// Creates a widget that centers its child.  const Center({ Key key, double widthFactor, double heightFactor, Widget child })    : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);}

4. Something

The author has built a flutter study related projects, GitHub address, which contains the author of the Flutter study related to some of the articles, will be updated regularly, will also upload some learning demo, welcome attention.

5. Reference

1. Padding class
2. Edgeinsetsgeometry class
3. Edgeinsets class
4. Edgeinsetsdirectional class
5. Renderpadding class
6. Align class
7. Center class

Flutter layout (ii)-Padding, Align, center detailed