Flutter - Padding

Padding可以给其子节点添加填充（留白），和边距效果类似

const Padding({
    super.key,
    required this.padding,
    super.child,
  }) : assert(padding != null);
  
  /// The amount of space by which to inset the child.
  final EdgeInsetsGeometry padding;

在定义中,必需传一个 padding 的规则

在 使用 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

使用起来也比较简单

// 为`Text("Padding")` 添加一个 左15 底20的边距
 Padding(
 padding: EdgeInsets.only(left: 15,bottom: 20),
 child: Text("Padding"),
 ),

其他示例

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

class MyPaddingState extends StatefulWidget {
  const MyPaddingState({Key? key}) : super(key: key);

  @override
  State<MyPaddingState> createState() => _MyState();
}

class _MyState extends State<MyPaddingState> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Padding"),
      ),
      body: ConstrainedBox(
        constraints: BoxConstraints.tightFor(width: double.infinity),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(padding: EdgeInsets.only(left: 15,bottom: 20),child: Text("Padding"),),
            Row(
              children: <Widget>[
                Expanded(
                    flex: 1,
                    child: Text(
                      "xxx",
                      style: TextStyle(backgroundColor: Colors.red),
                    ))
              ],
            ),
            Row(
              children: <Widget>[
                Expanded(
                    flex: 1,
                    child: ElevatedButton(
                      onPressed: () {},
                      child: Text(
                        "xxx",
                        style: TextStyle(backgroundColor: Colors.yellow),
                      ),
                    ))
              ],
            ),
            Padding(
              padding: EdgeInsets.symmetric(vertical: 10, horizontal: 5),
              child: Row(
                children: <Widget>[
                  Expanded(
                      flex: 1,
                      child: ElevatedButton(
                        onPressed: () {},
                        child: Text(
                          "xxx",
                          style: TextStyle(backgroundColor: Colors.yellow),
                        ),
                      ))
                ],
              ),
            ),
            Padding(
              padding: EdgeInsets.only(top: 20),
              child: Row(
                children: <Widget>[
                  Expanded(
                      flex: 1,
                      child: ElevatedButton(
                        onPressed: () {},
                        child: Text(
                          "xxx",
                          style: TextStyle(backgroundColor: Colors.yellow),
                        ),
                      )
                  )
                ],
              ),
            ),
            Padding(
              padding: EdgeInsets.zero,
              child: Row(
                children: <Widget>[
                  Expanded(
                      flex: 1,
                      child: ElevatedButton(
                        onPressed: () {},
                        child: Text(
                          "xxx",
                          style: TextStyle(backgroundColor: Colors.yellow),
                        ),
                      ))
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}