Flutter之Row/Column用法詳解

yscMichaell發表於2019-02-18
原文網址 : https://juejin.im/post/5c6a5892e51d4542331c5528
Flutter

前言

相關文章: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,
              ),
            )
          ],
        ),
    );
  }
}
複製程式碼

效果圖如下：

圖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

將子控制元件的起始邊與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

決定垂直方向上子控制元件的佈局順序；解釋了垂直方向上的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
            ),
          ),
        ],
      ),
    );
  }
}
複製程式碼

效果圖如下：

圖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

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

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

效果圖如下：

圖31

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

效果圖如下：

圖32

參考文章

Flutter — Row/Column Cheat Sheet

相關文章