Flutter组件--Padding和AnimatedPadding

示意图:

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<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介绍

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: [
          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;
              });
            }),
        ],
      ),
    );
  }
}