前言
目前Flutter常見(jiàn)的布局方式主要有4種：1款筑、線性布局 2贸辈、流式布局 3兄春、彈性布局 4、層疊布局
今天我們主要介紹線性布局
流式布局
彈性布局
層疊布局
線性布局
所謂線性布局，即指沿水平或垂直方向排布子組件馍迄。
** Flutter中通過(guò)Row和Column來(lái)實(shí)現(xiàn)線性布局耀找，類似于Android中的LinearLayout怜械。**
關(guān)鍵字Row灾而、Column
1 水平方向（關(guān)鍵字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 垂直方向（關(guān)鍵字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 線性布局的注意事項(xiàng)
當(dāng)我們布局超過(guò)一行的時(shí)候，這時(shí)候系統(tǒng)是不會(huì)幫我們換行的阻课，也就是說(shuō)會(huì)造成一個(gè)問(wèn)題叫挟。UI溢出。
UI溢出
水平排列限煞，使用Row對(duì)視圖進(jìn)行水平排列
垂直排列抹恳，使用Column對(duì)視圖進(jìn)行垂直排列
Flutter中子視圖超過(guò)父視圖會(huì)報(bào)視圖溢出
為了解決這個(gè)問(wèn)題，我們就需要了解到Flutter第二個(gè)布局署驻，流式布局
