前言
相關(guān)文章：Flutter學習目錄
github地址：Flutter學習
文章結(jié)構(gòu)
-
CrossAxisAlignment Propery
- CrossAxisAlignment.start
- CrossAxisAlignment.center
- CrossAxisAlignment.end
- CrossAxisAlignment.stretch
- CrossAxisAlignment.baseline
-
MainAxisAlignment Propery
- MainAxisAlignment.start
- MainAxisAlignment.center
- MainAxisAlignment.end
- MainAxisAlignment.spaceAround
- MainAxisAlignment.spaceBetween
- MainAxisAlignment.spaceEvenly
-
TextDirection Propery
- TextDirection.ltr
- TextDirection.rtl
-
VerticalDirection Propery
- VerticalDirection.down
- VerticalDirection.up
-
MainAxisSize Propery
- MainAxisSize.max
- MainAxisSize.min
介紹
Row
row是一個用于水平展示多個子控件的控件随抠。row這個控件不會滾動。如果你有一行控件在空間不足的情況下可以滾動坛芽，考慮使用ListView類价涝。
如果想在row上展示3個子控件舞萄，我們可以這樣做。
代碼如下：
//Row
class Row_Text_Widget extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
child: Row(
children: <Widget>[
Container(
color: Colors.orange,
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.blue,
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.purple,
child: FlutterLogo(
size: 60.0,
),
)
],
),
);
}
}
效果圖如下：
圖1 row
Column
Column是一個用于垂直展示多個子控件的控件阱冶。Column這個控件不會滾動假丧。如果你有一行控件在空間不足的情況下可以滾動珍昨，考慮使用ListView類县耽。
如果想在row上展示3個子控件，我們可以這樣做镣典。
代碼如下：
//Column
class Column_Text_Widget extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
Container(
color: Colors.orange,
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.green,
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.purple,
child: FlutterLogo(
size: 60.0,
),
)
],
),
);
}
}
效果圖如下：
圖2 Column
一兔毙、CrossAxisAlignment Propery
Column和Row有相同的屬性。所以下面的例題兄春，我們同時展示兩個控件的效果澎剥。
CrossAxis介紹
CrossAxis是交叉軸，就是與當前控件方向垂直的軸赶舆。具體效果如下圖:
圖3 CrossAxis
1.1哑姚、crossAxisAlignment.start
crossAxisAlignment.start將子控件的起始邊與crossAxis的起始邊對齊。
row和Column代碼如下：
//row和Column
class CrossAxisAlignment_start_Propery_Widget extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
//child: Row(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
color: Colors.blue,
height: 50.0,
width: 50.0,
),
Icon(Icons.adjust, size: 50.0, color: Colors.pink),
Icon(Icons.adjust, size: 50.0, color: Colors.purple),
Icon(Icons.adjust, size: 50.0, color: Colors.greenAccent),
Container(
color: Colors.orange,
height: 50.0,
width: 50.0,
),
Icon(Icons.adjust, size: 50.0, color: Colors.cyan),
],
),
);
}
}
效果如下：
圖4
1.2芜茵、CrossAxisAlignment.center
放置子控件叙量，使它們的中心與十字軸的中間對齊。
圖6
1.3九串、CrossAxisAlignment.end
將子控件放置十字軸的末端绞佩。
圖7
1.4寺鸥、CrossAxisAlignment.stretch
子控件充滿十字軸
圖8
1.5、CrossAxisAlignment.baseline
將放置在屏幕上的子控件品山，基線匹配胆建。
您應該將TextBaseline Class與CrossAxisAlignment.baseline一起使用。
未使用Baseline代碼如下：
//CrossAxisAlignment.baseline
class CrossAxisAlignment_withOutbaseline_Widget extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Flutter",
style: TextStyle(
color: Colors.yellow,
fontSize: 30.0
),
),
Text(
"Flutter",
style: TextStyle(
color: Colors.blue,
fontSize: 20.0
),
),
],
),
);
}
}
效果圖如下：
圖9 Without Baseline
使用Baseline代碼如下：
//CrossAxisAlignment.baseline
//使用
class CrossAxisAlignment_withbaseline_Widget extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,與上面搭配使用肘交、否則會報錯
children: <Widget>[
Text(
"Flutter",
style: TextStyle(
color: Colors.yellow,
fontSize: 30.0
),
),
Text(
"Flutter",
style: TextStyle(
color: Colors.blue,
fontSize: 20.0
),
),
],
),
);
}
}
效果圖如下：
圖10 With Baseline
二笆载、MainAxisAlignment Propery
Column和Row有相同的屬性。所以下面的例題酸些，我們同時展示兩個控件的效果宰译。
MainAxis介紹
MainAxis是主軸，就是與當前控件方向平行魄懂。具體效果如下圖：
圖11 MainAxis
2.1沿侈、MainAxisAlignment.start
將子控件放在盡可能靠近主軸起點的位置。
代碼如下：
//MainAxisAlignment Propery
//MainAxisAlignment.start
class MainAxisAlignment_start_Propery_Widget extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
//child: Row(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
//mainAxisAlignment: MainAxisAlignment.center,
//mainAxisAlignment: MainAxisAlignment.end,
//mainAxisAlignment: MainAxisAlignment.spaceAround,
//mainAxisAlignment: MainAxisAlignment.spaceBetween,
//mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
color: Colors.blue,
height: 50.0,
width: 50.0,
),
Icon(Icons.adjust, size: 50.0, color: Colors.pink),
Icon(Icons.adjust, size: 50.0, color: Colors.purple),
Icon(Icons.adjust, size: 50.0, color: Colors.greenAccent),
Container(
color: Colors.orange,
height: 50.0,
width: 50.0,
),
Icon(Icons.adjust, size: 50.0, color: Colors.cyan),
],
),
);
}
}
效果圖如下：
圖12
2.2市栗、MainAxisAlignment.center
將子控件放在盡可能靠近主軸中間的位置缀拭。
效果圖如下：
圖13
2.3、MainAxisAlignment.end
將子控件放在盡可能靠近主軸末端的位置填帽。
效果圖如下：
圖14
2.4蛛淋、MainAxisAlignment.spaceAround
子控件之間均勻分布，間距為A篡腌；但是第一個和最后一個控件距離邊界的距離為子控件距離的一半褐荷，即A/2。
效果圖如下：
圖15
2.5嘹悼、MainAxisAlignment.spaceBetween
子控件之間均勻分布叛甫，間距為A；但是第一個和最后一個控件距離邊界的距離是0杨伙。
效果圖如下：
圖16
2.6其监、MainAxisAlignment.spaceEvenly
子控件之間均勻分布，間距為A限匣；但是第一個和最后一個控件距離邊界的距離也是A抖苦。
圖17
三、TextDirection Propery
決定水平方向上子控件的布局順序米死。
這里僅以CrossAxisAlignment為例锌历，mainAxisAlignment可以自行分析。
3.1峦筒、TextDirection.ltr
children中的子控件按照順序辩涝，從左向右排列。默認是從左向右排列勘天，即TextDirection.ltr怔揩。
CrossAxisAlignment.start
代碼如下：
//TextDirection Propery
class TextDirection_ltr_Propery extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
//child: Row(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
//crossAxisAlignment: CrossAxisAlignment.center,
//crossAxisAlignment: CrossAxisAlignment.end,
textDirection: TextDirection.ltr,
children: <Widget>[
Text(
"Flutter",
style: TextStyle(
color: Colors.yellow,
fontSize: 30.0
),
),
Text(
"Flutter",
style: TextStyle(
color: Colors.blue,
fontSize: 20.0
),
),
],
),
);
}
}
效果圖如下：
圖18
CrossAxisAlignment.center
效果圖如下：
圖19
CrossAxisAlignment.end
效果圖如下：
圖20
3.2捉邢、TextDirection.rtl
children中的子控件按照順序，從右向左排列商膊。
CrossAxisAlignment.start
代碼如下：
//TextDirection Propery
//TextDirection.rtl
class TextDirection_rtl_Propery extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
child: Row(
//child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
//crossAxisAlignment: CrossAxisAlignment.center,
//crossAxisAlignment: CrossAxisAlignment.end,
textDirection: TextDirection.rtl,
children: <Widget>[
Text(
"Flutter",
style: TextStyle(
color: Colors.yellow,
fontSize: 30.0
),
),
Text(
"Flutter",
style: TextStyle(
color: Colors.blue,
fontSize: 20.0
),
),
],
),
);
}
}
效果圖如下：
圖21
CrossAxisAlignment.center
效果圖如下：
圖22
CrossAxisAlignment.end
效果圖如下：
圖23
四伏伐、VerticalDirection Propery
決定垂直方向上子控件的布局順序。
默認是VerticalDirection.down晕拆。
這里僅以CrossAxisAlignment為例藐翎，mainAxisAlignment可以自行分析。
4.1实幕、VerticalDirection.down
CrossAxisAlignment.start
代碼如下：
//VerticalDirection Propery
//VerticalDirection.down
class VerticalDirection_down_Propery extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
child: Row(
//child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
//crossAxisAlignment: CrossAxisAlignment.center,
//crossAxisAlignment: CrossAxisAlignment.end,
verticalDirection: VerticalDirection.down,//默認是VerticalDirection.down
children: <Widget>[
Text(
"Flutter",
style: TextStyle(
color: Colors.yellow,
fontSize: 30.0
),
),
Text(
"Flutter",
style: TextStyle(
color: Colors.blue,
fontSize: 20.0
),
),
],
),
);
}
}
效果圖如下：
圖24
CrossAxisAlignment.center
效果圖如下：
圖25
CrossAxisAlignment.end
效果圖如下：
圖26
4.2吝镣、VerticalDirection.up
CrossAxisAlignment.start
代碼如下：
//VerticalDirection Propery
//VerticalDirection.up
class VerticalDirection_up_Propery extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
//child: Row(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
//crossAxisAlignment: CrossAxisAlignment.center,
//crossAxisAlignment: CrossAxisAlignment.end,
verticalDirection: VerticalDirection.up,//默認是VerticalDirection.down
children: <Widget>[
Text(
"Flutter",
style: TextStyle(
color: Colors.yellow,
fontSize: 30.0
),
),
Text(
"Flutter",
style: TextStyle(
color: Colors.blue,
fontSize: 20.0
),
),
],
),
);
}
}
效果圖如下：
圖28
CrossAxisAlignment.center
效果圖如下：
圖29
CrossAxisAlignment.end
效果圖如下：
圖30
五、MainAxisSize Propery
用來設(shè)置主軸上控件的大小昆庇。
MainAxisSize.max
根據(jù)當前的約束末贾，最大化當前控件的可用空間。
代碼如下：
//MainAxisSize Propery
//MainAxisSize.max
class MainAxisSize_max_Propery_Widget extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child: Container(
color: Colors.yellow,
//child: Row(
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.blue,
height: 50.0,
width: 50.0,
),
Icon(Icons.adjust, size: 50.0, color: Colors.pink),
Icon(Icons.adjust, size: 50.0, color: Colors.purple),
Icon(Icons.adjust, size: 50.0, color: Colors.greenAccent),
Container(
color: Colors.orange,
height: 50.0,
width: 50.0,
),
Icon(Icons.adjust, size: 50.0, color: Colors.cyan),
],
),
),
);
}
}
效果圖如下：
圖31
MainAxisSize.min
根據(jù)當前的約束整吆，最小化當前控件的可用空間拱撵。
代碼如下：
//MainAxisSize Propery
//MainAxisSize.min
class MainAxisSize_min_Propery_Widget extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child: Container(
color: Colors.yellow,
//child: Row(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.blue,
height: 50.0,
width: 50.0,
),
Icon(Icons.adjust, size: 50.0, color: Colors.pink),
Icon(Icons.adjust, size: 50.0, color: Colors.purple),
Icon(Icons.adjust, size: 50.0, color: Colors.greenAccent),
Container(
color: Colors.orange,
height: 50.0,
width: 50.0,
),
Icon(Icons.adjust, size: 50.0, color: Colors.cyan),
],
),
),
);
}
}
效果圖如下：
圖32
