Padding 边距组件

可容纳一个子组件，添加自身内边距来限制孩子组件的占位，核心属性为padding。

相关组件

Container SliverPadding

Padding基本使用

   <br />【child】 : 孩子组件   【Widget】<br />【padding】 : 内四边距   【EdgeInsetsGeometry】"<br />EdgeInsets.all用来限定相同的四边边距<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/326147/1589462089616-00d4d3cc-6545-402f-92be-4c5a0aa48881.png#align=left&display=inline&height=170&margin=%5Bobject%20Object%5D&name=image.png&originHeight=340&originWidth=444&size=7056&status=done&style=none&width=222)

Dart

xxxxxxxxxx

1

import ‘package:flutter/material.dart’;

2

class PaddingAll extends StatelessWidget {

3

4

@override

5

Widget build(BuildContext context) {

6

return Container(

7

  color: Colors.grey.withAlpha(22),

8

  width: 200,

9

  height: 150,

10

  child: Padding(

11

    padding: EdgeInsets.all(20),

12

    child: _buildChild(),

13

  ),

14

);

15

}

16

17

Widget _buildChild() {

18

return Container(

19

  alignment: Alignment.center,

20

  color: Colors.cyanAccent,

21

  width: 100,

22

  height: 100,

23

  child: Text("孩子"),

24

);

25

}

26

}

Padding单独边距边距

   <br />EdgeInsets.only用来限定相同的四边边距<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/326147/1589462103462-d600bef6-decc-4278-8292-525acf86df23.png#align=left&display=inline&height=172&margin=%5Bobject%20Object%5D&name=image.png&originHeight=344&originWidth=490&size=7686&status=done&style=none&width=245)

import 'package:flutter/material.dart';
class PaddingOnly extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey.withAlpha(22),
      width: 200,
      height: 150,
      child: Padding(
        padding: EdgeInsets.only(top:10,left: 10),
        child: _buildChild(),
      ),
    );
  }

  Widget _buildChild() {
    return Container(
      alignment: Alignment.center,
      color: Colors.cyanAccent,
      width: 100,
      height: 100,
      child: Text("孩子"),
    );
  }
}

Padding方向边距

   <br />EdgeInsets.symmetric用来限定水平和竖直方向的边距<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/326147/1589462126494-f6e905de-7759-4550-92f0-a7ec8a09eca9.png#align=left&display=inline&height=177&margin=%5Bobject%20Object%5D&name=image.png&originHeight=354&originWidth=588&size=8983&status=done&style=none&width=294)

import 'package:flutter/material.dart';
class PaddingSymmetric extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey.withAlpha(22),
      width: 200,
      height: 150,
      child: Padding(
        padding: EdgeInsets.symmetric(vertical: 30,horizontal: 10),
        child: _buildChild(),
      ),
    );
  }

  Widget _buildChild() {
    return Container(
      alignment: Alignment.center,
      color: Colors.cyanAccent,
      width: 100,
      height: 100,
      child: Text("孩子"),
    );
  }
}