Padding

Padding 为子组件添加内边距。在 Flutter 中，外边距通过 Container 的 margin 属性实现。

构造函数

Padding({
  Key? key,                                    // 组件标识
  required EdgeInsetsGeometry padding,          // 内边距（必填）
  required Widget child,                         // 子组件（必填）
})

属性速查

属性	类型	必填	说明
padding	EdgeInsetsGeometry	是	内边距值
child	Widget	是	子组件

EdgeInsets 常用方法速查

方法	说明	示例
EdgeInsets.all(double)	四周统一内边距	EdgeInsets.all(16)
EdgeInsets.symmetric({horizontal, vertical})	对称内边距	EdgeInsets.symmetric(horizontal: 16, vertical: 8)
EdgeInsets.only({left, top, right, bottom})	指定方向	EdgeInsets.only(left: 16, top: 8)
EdgeInsets.fromLTRB(left, top, right, bottom)	按顺序：左上右下	EdgeInsets.fromLTRB(8, 16, 8, 16)

// 四周统一内边距
const EdgeInsets.all(16)

// 对称内边距
const EdgeInsets.symmetric(horizontal: 16, vertical: 8)

// 指定方向
const EdgeInsets.only(left: 16, top: 8, right: 16, bottom: 8)

// 按顺序：左、上、右、下
const EdgeInsets.fromLTRB(8, 16, 8, 16)

快速示例

文本内边距

import 'package:flutter/material.dart';

class PaddingTextExample extends StatelessWidget {
  const PaddingTextExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Padding 文本内边距')),
      // ─── ★ Padding + EdgeInsets ──────────────
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: const Text('有内边距的文本'),
      ),
      // ─── ☆ Padding + EdgeInsets ──────────────
    );
  }
}

左侧缩进

import 'package:flutter/material.dart';

class PaddingIndentExample extends StatelessWidget {
  const PaddingIndentExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Padding 缩进')),
      // ─── ★ EdgeInsets.only 缩进 ──────────────
      body: Padding(
        padding: const EdgeInsets.only(left: 32),
        child: const Text('缩进的文本'),
      ),
      // ─── ☆ EdgeInsets.only 缩进 ──────────────
    );
  }
}

卡片内部间距

import 'package:flutter/material.dart';

class PaddingCardExample extends StatelessWidget {
  const PaddingCardExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Padding 卡片间距')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Card(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: const [
                Text('标题', style: TextStyle(fontWeight: FontWeight.bold)),
                SizedBox(height: 8),
                Text('内容描述'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

外边距（通过 Container）

Flutter 没有 Margin 组件，外边距通过 Container 的 margin 属性实现：

Container(
  margin: const EdgeInsets.all(16),    // 外边距
  color: Colors.blue,
  child: const Text('外边距示例'),
)

内外边距的区别

// 外边距 —— Container 与外部组件的间距
// 内边距 —— Container 内部、子组件与边框的间距
Container(
  margin: const EdgeInsets.all(20),     // ← 外边距（蓝色区域外）
  padding: const EdgeInsets.all(16),    // ← 内边距（蓝色区域内）
  color: Colors.blue,
  child: const Text('Hello'),
)

┌─────── margin (外边距) ─────────┐
│  ┌──── padding (内边距) ────┐   │
│  │     child (子组件)       │   │
│  └─────────────────────────┘   │
└─────────────────────────────────┘

间距的最佳实践

组件之间的间距

Column(
  children: [
    const Text('第一行'),
    const SizedBox(height: 16),  // ✅ 推荐：用 SizedBox 控制间距
    const Text('第二行'),
    const SizedBox(height: 16),
    const Text('第三行'),
  ],
)

列表项之间的间距

ListView.separated(
  itemCount: items.length,
  separatorBuilder: (_, __) => const SizedBox(height: 8),  // 列表项之间的间距
  itemBuilder: (context, index) {
    return ListTile(title: Text(items[index]));
  },
)

页面整体边距

// 方式 1：用 Padding 包裹
Padding(
  padding: const EdgeInsets.all(16),
  child: Column(children: [...]),
)

// 方式 2：用 SafeArea + Padding
SafeArea(
  child: Padding(
    padding: const EdgeInsets.symmetric(horizontal: 16),
    child: Column(children: [...]),
  ),
)

EdgeInsets vs EdgeInsetsDirectional

类型	说明	适用场景
EdgeInsets	固定值，用 left/right	大多数情况
EdgeInsetsDirectional	支持方向性，用 start/end	需要支持 RTL 语言（如阿拉伯语）

// 固定值
EdgeInsets.all(16)

// 方向性（支持 RTL 语言）
EdgeInsetsDirectional.only(start: 16, end: 8)

提示

如果你的应用需要支持从右到左（RTL）的语言（如阿拉伯语），建议使用 EdgeInsetsDirectional。