示意图:

Padding介绍

在应用程序中有许多widget 时，这个时候画面常常会变得很拥挤，这个时候如果想要在widget之间来保留一些间距，那就用 Padding

为什么使用 Padding 而不使用 Container.padding 属性的 Container?

Container 是将许多更简单的 widget 组合在一个方便的包中，如果只需要设置 padding ，那我们最好使用 Padding 而不是 Container

Padding属性和说明

Padding属性详细使用

1、padding 、child

padding 给子widget的间距

child 接收一个子 Widget

import 'package:flutter/material.dart';class PaddingExample extends StatefulWidget {@override_PaddingExampleState createState() => _PaddingExampleState();
}class _PaddingExampleState extends State {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("Padding example"),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Padding(padding: EdgeInsets.all(0),child: Container(width: 100,height: 100,color: Colors.red,),),Padding(padding: EdgeInsets.all(0),child: Container(width: 100,height: 100,color: Colors.green,),),Padding(padding: EdgeInsets.all(0),child: Container(width: 100,height: 100,color: Colors.orange,),)],),),);}
}

EdgeInsetsGeometry详解

EdgeInsetsGeometry 是一个描述边距的组件，一般都是使用它的子类 EdgeInsets 来进行设置。

1、fromLTRB

设置左、上、右、下的边距，可设定不同的值

Padding(padding: EdgeInsets.fromLTRB(10, 20, 30, 40),child: Container(width: 100,height: 100,color: Colors.red,),
),

 2、all

同时设置所有的边距为同一个值

Padding(padding: EdgeInsets.all(10),child: Container(width: 100,height: 100,color: Colors.green,),
)

 3、only

根据需要设置某一个边的间距

Padding(padding: EdgeInsets.only(left: 10,right: 10),child: Container(width: 100,height: 100,color: Colors.orange,),
)

 4、symmetric

设置水平（上下）、或者垂直（左右）的间距

Padding(padding: EdgeInsets.symmetric(vertical: 10,horizontal: 10),child: Container(width: 100,height: 100,color: Colors.orange,),
)

 完整代码

import 'package:flutter/material.dart';class PaddingExample extends StatefulWidget {@override_PaddingExampleState createState() => _PaddingExampleState();
}class _PaddingExampleState extends State {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("Padding example"),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Padding(padding: EdgeInsets.fromLTRB(10, 20, 30, 40),child: Container(width: 100,height: 100,color: Colors.red,),),Padding(padding: EdgeInsets.all(10),child: Container(width: 100,height: 100,color: Colors.green,),),Padding(padding: EdgeInsets.only(left: 10,right: 10),child: Container(width: 100,height: 100,color: Colors.orange,),),Padding(padding: EdgeInsets.symmetric(vertical: 10,horizontal: 10),child: Container(width: 100,height: 100,color: Colors.orange,),)],),),);}
}

AnimatedPadding介绍

AnimatedPadding构造函数

AnimatedPadding({Key? key,required this.padding, // 边距this.child,  // 子WidgetCurve curve = Curves.linear,  // 动画的运动速率required Duration duration,  // 动画的持续时间VoidCallback? onEnd,   // 动画结束时的回调}) : assert(padding != null),assert(padding.isNonNegative),super(key: key, curve: curve, duration: duration, onEnd: onEnd);

AnimatedPadding完整示例代码

import 'package:flutter/material.dart';class AnimatedPaddingExample extends StatefulWidget {@override_AnimatedPaddingExampleState createState() => _AnimatedPaddingExampleState();
}class _AnimatedPaddingExampleState extends State {double paddingAllValue = 0.0;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("AnimatedPaddingExample"),),body: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text('Padding: $paddingAllValue'),AnimatedPadding(padding: EdgeInsets.all(paddingAllValue),duration: Duration(milliseconds: 1000),curve: Curves.easeInOut,child: Container(width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height / 4,color: Colors.blue,),onEnd: () {print("动画结束时的回调");},),ElevatedButton(child: Text('改变padding的值'),onPressed: () {setState(() {paddingAllValue = paddingAllValue == 0.0 ? 50.0 : 0.0;});}),],),);}
}