容器类Widget和布局类Widget区别
共同点
容器类Widget和布局类Widget都作用于其子Widget，不同的是：异同点
1 布局类widget一般都需要接收一个widget数组（children），他们直接或间接继承自（或包含）MultiChildRenderObjectWidget ；而容器类Widget一般只需要接受一个子Widget（child），他们直接或间接继承自（或包含）SingleChildRenderObjectWidget。
2 布局类Widget是按照一定的排列方式来对其子widget进行排列；而容器类Widget一般只是包装其子Widget，对其添加一些修饰（补白或背景色等）、变换(旋转或剪裁等)、或限制(大小等)。
Padding
Padding给其子节点添加内边距
class Padding extends SingleChildRenderObjectWidget {
......
const Padding({
Key key,
@required this.padding,
Widget child,
}) : assert(padding != null),
super(key: key, child: child);
......
}
EdgeInsets
我们看看EdgeInsets提供的便捷方法：
-
fromLTRB(double left, double top, double right, double bottom)：分别指定四个方向的补白。 -
all(double value) :所有方向均使用相同数值的补白。 -
only({left, top, right ,bottom })：可以设置具体某个方向的补白(可以同时指定多个方向)。 -
symmetric({ vertical, horizontal })：用于设置对称方向的补白，vertical指top和bottom，horizontal指left和right。
示例：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text("测试Padding"),
),
body: Align(
alignment: Alignment.centerLeft,
child: PaddingTestRoute()
),
);
}
}
class PaddingTestRoute extends StatelessWidget{
@override
Widget build(BuildContext context){
return Padding(
padding: EdgeInsets.all(15.0),
child: Column(
mainAxisAlignment:MainAxisAlignment.start ,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 8),
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
Container(
width: 100,
height: 100,
color: Colors.green,
),
],
),
);
}
}
其中：
选用Align 为了方便定义alignment的起始位置
如果用center则子Widget使用Column 即使设置了
crossAxisAlignment: CrossAxisAlignment.start,
也无法让Column从左侧开始布局
