Flutter 样式基础之 Padding

Padding 类

介绍

它是一个Widget，写过前端代码的童鞋应该都了解这个属性，它就是设置内边距属性。经过Padding，能够有效地在子级的四周建立空的区域，内边距的空白区域，也是widget的一部分。

Padding的布局分为两种状况：

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

此外，须要注意的是，Flutter中并无单独的Margin控件。在Container中虽然也有margin属性，但咱们看看源码关于margin的实现：

if (margin != null)
  current = new Padding(padding: margin, child: current);
复制代码

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

设计原因

为何要使用一个Padding Widget组件，而不是一个 Container 容器用一个Container.padding 属性?

实际上二者的本质没有任何区别，若是你用了Container.padding 参数，那么 Container 实际上也是会帮你建立一个简单的 Padding Widget。Padding自己是很是简单的，基本上须要间距的地方，它都可以使用；若是在单一的内间距场景，使用Padding比Container的成本要小一些，由于Container里面除了Padding，它还包含了不少个widget。Padding可以实现的，Container都可以实现，只不过，Container提供的东西更多。Container 将许多更简单的小部件组合到一个 package 去进去了。

实际上，Flutter中的大多数Widgets都只是其余更简单的Widgets的组合。组合而不是继承,这是是构建Widgets的主要机制。

继承关系

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

构造函数

Padding（{ Key key， @ required EdgeInsetsGeometry padding， Widget child }） 建立一个携带子项的Widget，传入参数不为空，不然会报异常。

const Padding({
  Key key,
  @required this.padding,
  Widget child,
}) : assert(padding != null),
     super(key: key, child: child);
复制代码

经常使用属性

• padding → EdgeInsetsGeometry

  • 插入子级的边距空间值。
  • 参数类型为EdgeInsetsGeometry，它是EdgeInsets以及EdgeInsetsDirectional的基类。在实际使用中若不涉及到国际化，例如适配阿拉伯地区等，则通常都是使用 EdgeInsets。从EdgeInsetsDirectional的命名咱们能够推断，它跟方向相关。它的四个边距不限定上下左右，而是根据方向来定的，这样能够作国际化 适配。（和Android 的 paddingLeft/paddingStart 思想一致）
  • EdgeInsets，该类是用于描述 padding 的屏幕尺寸相关的类。

• child → widget

  • final, inherited
  • 子级

• hashCode → int

  • 此对象的哈希码。
  • read-only, inherited

• key → Key

  • 控制一个小部件如何替换树中的另外一个小部件。[...]
  • final, inherited

• runtimeType → 类型

  • 表示对象的运行时类型。
  • read-only, inherited

经常使用方法

• createRenderObject（BuildContext context） → RenderPadding

  建立一个RenderObject 类，RenderObjectWidget表示的实例。

• debugFillProperties（DiagnosticPropertiesBuilder properties） →void

  添加与节点关联的其余属性。

• updateRenderObject（BuildContext context， covariant RenderPadding renderObject） →void

  顾名思义该方法用于将此RenderObjectWidget描述的配置，复制到给定的RenderObject 对象。该类型与此对象的createRenderObject返回的类型相同。

使用示例：

Padding(
  padding: EdgeInsets.all(10.0),
  child: const Card(child: Text('Flutter Padding Example')),
)
复制代码

总结

Padding 自己算是很是简单的Widget了，它主要用做设置子控件的内边距。Padding 能实现的，Container都可以实现。只不过，Container组合了更多的简单Widget进去，平时开发中咱们能够根据实际须要来使用 Padding 或者 Container。

做者

xiaosongzeem