示意图:
Padding介绍
在应用程序中有许多widget 时，这个时候画面常常会变得很拥挤，这个时候如果想要在widget之间来保留一些间距，那就用 Padding
为什么使用 Padding 而不使用 Container.padding 属性的 Container?
Container 是将许多更简单的 widget 组合在一个方便的包中，如果只需要设置 padding ，那我们最好使用 Padding 而不是 Container
Padding属性和说明
| 序列号 | 字段 | 属性 | 描述 |
|---|---|---|---|
| 1 | padding | EdgeInsetsGeometry | 给子widget的间距 |
| 2 | 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介绍
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;
-
});
-
}),
-
],
-
),
-
);
-
}
-
}
转载：https://blog.csdn.net/eastWind1101/article/details/127966941
查看评论