填充

在容器中可以使用 margin 和 padding 属性对其进行 外边距/内边距 控制:

Container(
  margin: EdgeInsets.all(20.0), // 容器外补白
  color: Colors.orange,
  child: Text("Hello world!"),
),
Container(
  padding: EdgeInsets.all(20.0), // 容器内补白
  color: Colors.orange,
  child: Text("Hello world!"),
),

以上等价于使用 Padding和BoxDecoration组件 进行排列

// 先 Padding 再 DecoratedBox, 等价于 padding
Padding(
  padding: EdgeInsets.all(20.0),
  child: DecoratedBox(
    decoration: BoxDecoration(color: Colors.orange),
    child: Text("Hello world!"),
  ),
),
// 先 DecoratedBox 再 Padding, 等价于 margin
DecoratedBox(
  decoration: BoxDecoration(color: Colors.orange),
  child: Padding(
    padding: const EdgeInsets.all(20.0),
    child: Text("Hello world!"),
  ),
),

类比于 css 中的 margin 和 padding 属性

Padding 组件

Padding组件的定义:

Padding({
  ...
  EdgeInsetsGeometry padding,
  Widget child,
})

EdgeInsetsGeometry 是一个抽象类,开发中,我们一般都使用 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(20.0)
EdgeInsets.only(left: 8.0, top: 10)
EdgeInsets.symmetric(vertical: 8.0)
EdgeInsets.fromLTRB(20.0,.0,20.0,20.0)

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress