Flutter深入浅出组件篇---Padding、Animate

Padding介绍

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

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

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

示例代码

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

Padding属性和说明

总共2个属性

字段	属性	描述
padding	EdgeInsetsGeometry	给子widget的间距
child	Widget	子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效果展示

image

总结

    当只需要给组件之间增加一些间距时，使用`Padding` 是最好的选择。而如果的`Padding`在某种情况下需要改变其大小并且需要增加动画效果时，使用`AnimatedPadding` 最佳，而不需要花费大量时间去写动画。