Flutter深入浅出组件篇---Padding、AnimatedPadding flutter

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 { @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 { @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 { double paddingAllValue = https://www.it610.com/article/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 = https://www.it610.com/article/paddingAllValue == 0.0 ? 50.0 : 0.0; }); }), ], ), ); } }

AnimatedPadding效果展示

文章图片

总结 【Flutter深入浅出组件篇---Padding、AnimatedPadding】? 当只需要给组件之间增加一些间距时，使用Padding 是最好的选择。而如果的Padding在某种情况下需要改变其大小并且需要增加动画效果时，使用AnimatedPadding 最佳，而不需要花费大量时间去写动画。