Flutter 控件 Padding
本文于314天之前发表,文中内容可能已经过时。
Padding
Padding的布局分为两种情况:
- 当child为空的时候,会产生一个宽为left+right,高为top+bottom的区域;
- 当child不为空的时候,Padding会将布局约束传递给child,根据设置的padding属性,缩小child的布局尺寸。然后Padding将自己调整到child设置了padding属性的尺寸,在child周围创建空白区域。
集成关系
1 | Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > Padding |
从继承关系可以看出,Padding控件是一个基础控件,不像Container这种组合控件。Container中的margin以及padding属性都是利用Padding控件去实现的。
关于SingleChildRenderObjectWidget
SingleChildRenderObjectWidget是RenderObjectWidgets的一个子类,用于限制只能有一个子节点。它只提供child的存储,而不提供实际的更新逻辑。
关于RenderObjectWidgets
RenderObjectWidgets为RenderObjectElement提供配置,而RenderObjectElement包含着(wrap)RenderObject,RenderObject则是在应用中提供实际的绘制(rendering)的元素。
示例代码
实例代码直接上官方的例子,非常的简单:
1 | new Padding( |
例子中对Card设置了一个宽度为8的内边距。
源码
1 | const Padding({ |
padding:padding的类型为EdgeInsetsGeometry,EdgeInsetsGeometry是EdgeInsets以及EdgeInsetsDirectional的基类。在实际使用中不涉及到国际化,例如适配阿拉伯地区等,一般都是使用EdgeInsets。EdgeInsetsDirectional光看命名就知道跟方向相关,因此它的四个边距不限定上下左右,而是根据方向来定的。
1.5.2 源码
1 | @override |
Padding的创建函数,实际上是由RenderPadding来进行的。
关于RenderPadding的实际布局表现,当child为null的时候:
1 | if (child == null) { |
返回一个宽为_resolvedPadding.left+_resolvedPadding.right,高为_resolvedPadding.top+_resolvedPadding.bottom的区域。
当child不为null的时候,经历了三个过程,即调整child尺寸、调整child位置以及调整Padding尺寸,最终达到实际的布局效果。
1 | // 调整child尺寸 |
到此处,上面介绍的padding布局行为就解释的通了。


打赏