Flutter之Row/Column用法詳解

摘要： 相關文章:Flutter學習目錄 github地址: Flutter學習 文章結構 CrossAxisAlignment Propery CrossAxisAlignment.start CrossAxisAlignment.cent...

相關文章:Flutter學習目錄

github地址: Flutter學習

文章結構

• 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,
),
)
],
),
);
}
}
複製程式碼

效果圖如下：

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,
),
)
],
),
);
}
}
複製程式碼

效果圖如下：

一、CrossAxisAlignment Propery

Column和 Row 有相同的屬性。所以下面的例題，我們同時展示兩個控制元件的效果。

CrossAxis介紹

CrossAxis是交叉軸，就是與當前控制元件方向垂直的軸。具體效果如下圖:

1.1、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),
],
),
);
}
}
複製程式碼

效果圖如下：

1.2、CrossAxisAlignment.center

放置子控制元件，使它們的中心與十字軸的中間對齊。

1.3、CrossAxisAlignment.end

將子控制元件放置十字軸的末端。

1.4、CrossAxisAlignment.stretch

子控制元件充滿十字軸

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
),
),
],
),
);
}
}
複製程式碼

效果圖如下：

使用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
),
),
],
),
);
}
}
複製程式碼

效果圖如下：

二、MainAxisAlignment Propery

Column和Row有相同的屬性。所以下面的例題，我們同時展示兩個控制元件的效果。

MainAxis介紹

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),
],
),
);
}
}
複製程式碼

效果圖如下：

2.2、MainAxisAlignment.center

將子控制元件放在儘可能靠近主軸中間的位置。 效果圖如下：

2.3、MainAxisAlignment.end

將子控制元件放在儘可能靠近主軸末端的位置。 效果圖如下：

2.4、MainAxisAlignment.spaceAround

子控制元件之間均勻分佈，間距為A；但是第一個和最後一個控制元件距離邊界的距離為子控制元件距離的一半，即A/2。 效果圖如下：

2.5、MainAxisAlignment.spaceBetween

子控制元件之間均勻分佈，間距為A；但是第一個和最後一個控制元件距離邊界的距離是0。 效果圖如下：

2.6、MainAxisAlignment.spaceEvenly

子控制元件之間均勻分佈，間距為A；但是第一個和最後一個控制元件距離邊界的距離也是A。

三、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
),
),
],
),
);
}
}
複製程式碼

效果圖如下：

CrossAxisAlignment.center

效果圖如下：

CrossAxisAlignment.end

效果圖如下：

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
),
),
],
),
);
}
}
複製程式碼

效果圖如下：

CrossAxisAlignment.center

效果圖如下：

CrossAxisAlignment.end

效果圖如下：

四、VerticalDirection Propery

決定垂直方向上子控制元件的佈局順序；解釋了垂直方向上的start和end作用。

預設是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
),
),
],
),
);
}
}
複製程式碼

效果圖如下：

CrossAxisAlignment.center

效果圖如下：

CrossAxisAlignment.end

效果圖如下：

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
),
),
],
),
);
}
}
複製程式碼

效果圖如下：

CrossAxisAlignment.center

效果圖如下：

CrossAxisAlignment.end

效果圖如下：

五、MainAxisSize Propery

用來設定主軸上控制元件的大小。

MainAxisSize.max

根據當前的約束，最大化當前控制元件的可用空間。 程式碼如下：

//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),
],
),
),
);
}
}
複製程式碼

效果圖如下：

MainAxisSize.min

根據當前的約束，最小化當前控制元件的可用空間。 程式碼如下：

//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),
],
),
),
);
}
}
複製程式碼

效果圖如下：