【布局 widget】 Flutter Padding

Flutter Padding 是用来给 child 在四周增加空白的 widget。实际上 Flutter 中的 margin 也是用 Padding 来实现的。

Padding 介绍

当将布局约束传递给其子级时，Padding Widget 会按给定的 padding 缩小约束，从而使子级以较小的大小进行布局。Padding Widget 在孩子周围创建空白空间。

void performLayout() {
    final BoxConstraints constraints = this.constraints;
    _resolve();
    assert(_resolvedPadding != null);
    if (child == null) {
      size = constraints.constrain(Size(
        _resolvedPadding!.left + _resolvedPadding!.right,
        _resolvedPadding!.top + _resolvedPadding!.bottom,
      ));
      return;
    }
    final BoxConstraints innerConstraints = constraints.deflate(_resolvedPadding!);
    child!.layout(innerConstraints, parentUsesSize: true);
    final BoxParentData childParentData = child!.parentData! as BoxParentData;
    childParentData.offset = Offset(_resolvedPadding!.left, _resolvedPadding!.top);
    size = constraints.constrain(Size(
      _resolvedPadding!.left + child!.size.width + _resolvedPadding!.right,
      _resolvedPadding!.top + child!.size.height + _resolvedPadding!.bottom,
    ));
  }

通过布局源码可以看出，如果 child 为空，Padding Widget 的大小 只受 padding 属性影响，当 child 不为空时，Padding Widget大小为 padding 属性 为 0 时 child 的大小。

Container Widget 的 Padding 属性会创建出一个 Padding Widget。无论是用 Container 的 Padding 属性创建 Paddgin，还是直接使用 Padding 效果都是一样的。人个认为如果只是增加一个 Padding ，用 Padding Widget 可读性会好一些。

使用 Padding

const Card( 
    child: Padding( 
        padding: EdgeInsets.all(20.0), 
        child: Text('IAM17'), ), )

使用 Padding Widget 还是很简单的。这一个例子代表所有了。建议仔细阅读 Padding 的源码，对于理解 RenderShiftedBox 非常适合。

最后再说一下padding 属性的常用写法。