前言
目前Flutter常见的布局方式主要有4种：1、线性布局 2、流式布局 3、弹性布局 4、层叠布局
今天我们主要介绍线性布局
流式布局
弹性布局
层叠布局
线性布局
所谓线性布局，即指沿水平或垂直方向排布子组件。
** Flutter中通过Row和Column来实现线性布局，类似于Android中的LinearLayout。**
关键字Row、Column
1 水平方向（关键字Row）
class testState extends State<test> with BaseBar {
@override
Widget build(BuildContext context) {
ScreenUtil.init(context, width: defaultWidth, height: defaultHeight);
return Scaffold(
appBar: AppBaseBar("线性布局水平方向"),
body: Row(
children: [
Container(
margin: EdgeInsets.only(left: 30,top: 30),
width: 100,
height: 100,
color: Colors.red,
child: Text("1",style:TextStyle(
color: Colors.white,
fontSize: 60,
)),
),
Container(
margin: EdgeInsets.only(left: 30,top: 30),
width: 100,
height: 100,
color: Colors.yellow,
child: Text("3",style:TextStyle(
color: Colors.white,
fontSize: 60,
)),
),
Container(
margin: EdgeInsets.only(left: 30,top: 30),
width: 100,
height: 100,
color: Colors.blue,
child: Text("3",style:TextStyle(
color: Colors.white,
fontSize: 60,
)),
),
],
)
);
}
线性布局水平方向示例图
2 垂直方向（关键字Column）
class testState extends State<test> with BaseBar {
@override
Widget build(BuildContext context) {
ScreenUtil.init(context, width: defaultWidth, height: defaultHeight);
return Scaffold(
appBar: AppBaseBar("线性布局水平方向"),
body: Column(
children: [
Container(
margin: EdgeInsets.only(left: 30,top: 30),
width: 100,
height: 100,
color: Colors.red,
child: Text("1",style:TextStyle(
color: Colors.white,
fontSize: 60,
)),
),
Container(
margin: EdgeInsets.only(left: 30,top: 30),
width: 100,
height: 100,
color: Colors.yellow,
child: Text("3",style:TextStyle(
color: Colors.white,
fontSize: 60,
)),
),
Container(
margin: EdgeInsets.only(left: 30,top: 30),
width: 100,
height: 100,
color: Colors.blue,
child: Text("3",style:TextStyle(
color: Colors.white,
fontSize: 60,
)),
),
],
)
);
}
}
线性布局垂直方向
3 线性布局的注意事项
当我们布局超过一行的时候，这时候系统是不会帮我们换行的，也就是说会造成一个问题。UI溢出。
UI溢出
水平排列，使用Row对视图进行水平排列
垂直排列，使用Column对视图进行垂直排列
Flutter中子视图超过父视图会报视图溢出
为了解决这个问题，我们就需要了解到Flutter第二个布局，流式布局
