简介：

Padding 作为一个基础组件，功能非常单一，给子节点设置padding属性，设置内边距属性，内边距的空白部分也是widget的一部分。

Padding基本用法。

  1. Container(
  2.    height: 80,
  3.    width: 300,
  4.    color: Colors.green[100],
  5.    child:Padding(
  6.        padding: EdgeInsets.all(0), // 所有方向以相同的值填充。
  7.        child: Container(
  8.          color: Colors.red[300],
  9.          child: Text("data", style : TextStyle(fontSize : 28, color: Colors.red[2])),
  10.        ),
  11.    )
  12.  )

WX20200910-110738.pngWX20200910-110818.png

Padding 中的属性都有

  1. const Padding({
  2.     Key key,
  3.     @required this.padding,
  4.     Widget child,
  5.   }) : assert(padding != null),
  6.        super(key: key, child: child);

Padding中属性padding必须部位空。

padding 有四个属性可以设置，源码如下。

  1.  const EdgeInsets.all(double value)
  2.     : left = value,
  3.       top = value,
  4.       right = value,
  5.       bottom = value;
  7.  const EdgeInsets.only({
  8.     this.left = 0.0,
  9.     this.top = 0.0,
  10.     this.right = 0.0,
  11.     this.bottom = 0.0,
  12.   });
  14.   const EdgeInsets.symmetric({
  15.     double vertical = 0.0,
  16.     double horizontal = 0.0,
  17.   }) : left = horizontal,
  18.        top = vertical,
  19.        right = horizontal,
  20.        bottom = vertical;
  22.   const EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom);
  • padding : EdgeInsets.all(30.0); 所有方向都用同一个值填充。
  • padding : EdgeInsets.only(left : 30.0); 能单个单个来设置值。
  • padding : EdgeInsets.symmetric(vertical : 30.0); vertical同时设置top,bottom, horizontal同时设置 left, right。
  • padding : EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom) 预知设置padding值。

Padding 给子元素添加内边距，当Padding外层有父级时，并且设置了宽高，则添加的内边超出了当前宽高时，则会隐藏超出部分。

下面的都是基于基本用法上修改padding

下面时没超出之前 和 超出之前的对比。

【padding】

【 EdgeInsets.only( ) 】

WX20200910-112643.pngWX20200910-112744.png

【 EdgeInsets.fromLTRB( ) 】

L ： 左， T : 上，R : 右，B : 下

WX20200910-113644.png

【 EdgeInsets.all( ) 】

WX20200910-113909.png

【 EdgeInsets.symmetric( ) 】

WX20200910-132307.pngWX20200910-132350.png

使用场景

在一个组件使用距离地方的Padding都能解决，但是也能用Container来替代Padding，毕竟Container里面包含了多个widget。Padding能够实现的，Container都能够实现，只不过，Container更加的复杂。,Container写法就比较复杂，单一的，比较简单的使用Padding 成本会比 Container 小一些。