博客地址：flutterall.com
Row 和 Column類似于Android里面的線性布局，只不過分別是水平方向和垂直方向。
Row
水平布局Widget
構(gòu)造方法
Row({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
})
Demo
class FlutterRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Row(
children: <Widget>[Text("One"), Text("Two"), Text("Three")],
),
);
}
}
Row
Column
垂直布局Widget
構(gòu)造方法
跟Row基本一致
Column({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
})
Column
Column Row屬性
MainAxisAlignment（布局的主軸對齊約束）
enum MainAxisAlignment {
start,
end,
center,
spaceBetween,
spaceAround,
spaceEvenly,
}
MainAxisAlignment start center end圖示
看代碼說話：
Code
Row(
children: <Widget>[Text("One"), Text("Two"), Text("Three")],
)
Row默認
Row MainAxisAlignment.start center end
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[Text("One"), Text("Two"), Text("Three")],
)
MainAxisAlignment.start center end
Column MainAxisAlignment.start center end
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Text("One"), Text("Two"), Text("Three")],
)
start
center
end
MainAxisAlignment.spaceBetween spaceAround spaceEvenly
spaceBetween spaceAround spaceEvenly
Expanded
如果我們在布局的時候，想對Widget進行等分，或者按比例占空間。就可以使用Expanded,使用這個Widget時候，會對非Expanded的子child進行布局，剩下的控件區(qū)域，留給Expanded的子child。
Expanded構(gòu)造
Expanded({
Key key,
int flex = 1,//默認一等分。類似LinearLayout中的weight=1
@required Widget child,
})
Demo
class FlutterRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Column(
children: <Widget>[
Expanded(child: Text("One")),
Expanded(child: Text("Two")),
Expanded(
child: Text("Three"),
)
]
),
);
}
}
Expanded處理前后（一等分）
Expanded flex屬性
類似于LinearLayout的weight
class FlutterRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Column(
children: <Widget>[
Expanded(child: Container(color: Colors.brown,),flex: 1,),
Expanded(child: Container(color: Colors.blue,), flex: 1,),
Container(color: Colors.amberAccent,constraints: BoxConstraints(minHeight: 100, maxHeight: 100),)//未參與Expanded，
// 除了此Widget的空余區(qū)域均留給Expanded修飾的Colors.brown & Colors.blue,進行1：1等分
],
),
);
}
}
Expanded flex
本地代碼地址
flutterall
Flutter 豆瓣客戶端，誠心開源
Flutter Container
Flutter SafeArea
Flutter Row Column MainAxisAlignment Expanded
Flutter Image全解析
Flutter 常用按鈕總結(jié)
Flutter ListView豆瓣電影排行榜
Flutter Card
Flutter Navigator&Router(導航與路由)
OverscrollNotification不起效果引起的Flutter感悟分享
Flutter 上拉抽屜實現(xiàn)
Flutter 豆瓣客戶端，誠心開源
Flutter 更改狀態(tài)欄顏色
