flutter：Padding组件

大前端 flutter

发布时间 : 2025-08-17 00:00

字数:223 阅读 :

Padding 用来在 子组件外部（而不是内容内部）加上空白区域。就像给一个元素“留白”，避免它紧贴其他元素。

Padding 需要一个 padding 参数（EdgeInsets 类型），常用几种写法：

// 按钮
Container(
  width: 400,
  height: 400,
  color: Colors.amber,
  child: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          color: Colors.blue,
          child: Padding(
            padding: EdgeInsets.all(20.0), // 四个方向都是20
            child: Text("Hello"),
          ),
        ),

        Container(
          color: Colors.green,
          child: Padding(
            padding: EdgeInsets.symmetric(
              horizontal: 100,
              vertical: 40,
            ),
            child: Text("Hello"), // 左右 100，上下 40
          ),
        ),

        Container(
          color: Colors.red,
          child: Padding(
            padding: EdgeInsets.only(left: 80, top: 20),
            child: Text("Hello"), // 单独控制
          ),
        ),
      ],
    ),
  ),
),

以下是其中一个padding的大小

常见对比

Padding：是包在子组件外层，加外边距。
Container + padding：本质一样，但 Container 还有背景色、边框等属性。
Margin：Flutter 没有专门的 Margin 组件，一般用 Padding 或 SizedBox 替代。

口诀：

Padding = 外部留白
EdgeInsets 决定留白方向