本文主要介绍Flutter布局中的Padding、Align以及Center控件，详细介绍了其布局行为以及使用场景，并对源码进行了分析。

1. Padding

A widget that insets its child by the given padding.

1.1 简介

Padding在Flutter中用的也挺多的，作为一个基础的控件，功能非常单一，给子节点设置padding属性。写过其他端的都了解这个属性，就是设置内边距属性，内边距的空白区域，也是widget的一部分。

Flutter中并没有单独的Margin控件，在Container中有margin属性，看源码关于margin的实现。

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

不难看出，Flutter中淡化了margin以及padding的区别，margin实质上也是由Padding实现的。

1.2 布局行为

Padding的布局分为两种情况：

• 当child为空的时候，会产生一个宽为left+right，高为top+bottom的区域；
• 当child不为空的时候，Padding会将布局约束传递给child，根据设置的padding属性，缩小child的布局尺寸。然后Padding将自己调整到child设置了padding属性的尺寸，在child周围创建空白区域。

1.3 继承关系

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

从继承关系可以看出，Padding控件是一个基础控件，不像Container这种组合控件。Container中的margin以及padding属性都是利用Padding控件去实现的。

1.3.1 关于SingleChildRenderObjectWidget

SingleChildRenderObjectWidget是RenderObjectWidgets的一个子类，用于限制只能有一个子节点。它只提供child的存储，而不提供实际的更新逻辑。

1.3.2 关于RenderObjectWidgets

RenderObjectWidgets为RenderObjectElement提供配置，而RenderObjectElement包含着（wrap）RenderObject，RenderObject则是在应用中提供实际的绘制（rendering）的元素。

1.4 示例代码

实例代码直接上官方的例子，非常的简单：

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

例子中对Card设置了一个宽度为8的内边距。

1.5 源码解析

构造函数如下：

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

包含一个padding属性，相当的简单。

1.5.1 属性解析

padding：padding的类型为EdgeInsetsGeometry，EdgeInsetsGeometry是EdgeInsets以及EdgeInsetsDirectional的基类。在实际使用中不涉及到国际化，例如适配阿拉伯地区等，一般都是使用EdgeInsets。EdgeInsetsDirectional光看命名就知道跟方向相关，因此它的四个边距不限定上下左右，而是根据方向来定的。

1.5.2 源码

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

Padding的创建函数，实际上是由RenderPadding来进行的。

关于RenderPadding的实际布局表现，当child为null的时候：

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

返回一个宽为_resolvedPadding.left+_resolvedPadding.right，高为_resolvedPadding.top+_resolvedPadding.bottom的区域。

当child不为null的时候，经历了三个过程，即调整child尺寸、调整child位置以及调整Padding尺寸，最终达到实际的布局效果。

// 调整child尺寸 

                    

                        
关键字：