Padding介绍

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

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

Container 是将许多更简略的 widget 组合在一个不便的包中，如果只须要设置 padding ，那咱们最好应用 Padding 而不是 Container

示例代码

本文中很多成果都没有截图，可下载源代码运行我的项目 源代码地址，或者通过视频教程查看 视频教程地址

Padding属性和阐明

总共2个属性
字段属性形容
paddingEdgeInsetsGeometry给子widget的间距
childWidget子widget

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<PaddingExample> {  @override  Widget 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<PaddingExample> {  @override  Widget 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介绍

    `Padding` 组件的动画版本，在设置的工夫内缩放或放大到指定的padding

AnimatedPadding构造函数

  AnimatedPadding({    Key? key,    required this.padding, // 边距    this.child,  // 子Widget    Curve 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<AnimatedPaddingExample> {  double paddingAllValue = 0.0;  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("AnimatedPaddingExample"),      ),      body: Column(        mainAxisAlignment: MainAxisAlignment.center,        children: <Widget>[          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;              });            }),        ],      ),    );  }}

AnimatedPadding成果展现

总结

当只须要给组件之间减少一些间距时，应用Padding 是最好的抉择。而如果的Padding在某种状况下须要扭转其大小并且须要减少动画成果时，应用AnimatedPadding 最佳，而不须要破费大量工夫去写动画。