Flutter 容器类组件(Padding, Container, ConstrainedBox)的介绍和用法

容器组件用法如下:

Padding

含义: Padding用来为子元素添加填充，也就是指定子元素与容器边界的距离，作用基本上与Android中ViewGroup的padding属性相同。

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

我们一般使用EdgeInsets类，它是EdgeInsetsGeometry的一个子类，定义了一些设置填充的便捷方法。

EdgeInsets

我们看看EdgeInsets提供的便捷方法：

• fromLTRB(double left, double top, double right, double bottom)：分别指定四个方向的填充。
• all(double value) : 所有方向均使用相同数值的填充。
• only({left, top, right ,bottom })：可以设置具体某个方向的填充(可以同时指定多个方向)。
• symmetric({ vertical, horizontal })：用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right。

接下来逐个演示这四个方法的用法：

• EdgeInsets.all(四个相同的方向)

body: Padding(
  padding: EdgeInsets.all(16),
  child: Container(
     color: Colors.blue   
  )
)

运行效果:

• EdgeInsets.symmetric(上下或左右)

body: Padding(
  padding: EdgeInsets.symmetric(vertical: 50)
  child: Container(
    color: Colors.blue,
  )
)

运行效果:

• EdgeInsets.fromLTRB

body: Padding(
    padding: EdgeInsets.fromLTRB(16, 32, 48, 64),
    child: Container(
      color: Colors.blue,
)),

    运行图忽略了(见外)

• EdgeInsets.only

body: Padding(
    padding: EdgeInsets.only(left: 16, bottom: 32),
    child: Container(
      color: Colors.blue,
)),

   运行图忽略了(见外)

最后, 大家还是要多加练习,勤写代码,熟能生巧,必成大器!!!