Flutter之Row/Column用法詳解

時間  2019-11-16
標籤 flutter row column 用法 詳解 简体版
原文   原文鏈接

前言

相關文章:Flutter學習目錄 git

github地址:Flutter學習github

文章結構bash

  • CrossAxisAlignment Properyless

    • CrossAxisAlignment.start
    • CrossAxisAlignment.center
    • CrossAxisAlignment.end
    • CrossAxisAlignment.stretch
    • CrossAxisAlignment.baseline

  • MainAxisAlignment Properyide

    • MainAxisAlignment.start
    • MainAxisAlignment.center
    • MainAxisAlignment.end
    • MainAxisAlignment.spaceAround
    • MainAxisAlignment.spaceBetween
    • MainAxisAlignment.spaceEvenly

  • TextDirection Propery佈局

    • TextDirection.ltr
    • TextDirection.rtl

  • VerticalDirection Properypost

    • VerticalDirection.down
    • VerticalDirection.up

  • MainAxisSize Propery學習

    • MainAxisSize.max
    • MainAxisSize.min

介紹

Row

row是一個用於水平展現多個子控件的控件。row這個控件不會滾動。若是你有一行控件在空間不足的狀況下能夠滾動，考慮使用ListView類。ui

若是想在row上展現3個子控件，咱們能夠這樣作。 代碼以下：spa

//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

1、CrossAxisAlignment Propery

Column和Row有相同的屬性。因此下面的例題，咱們同時展現兩個控件的效果。

CrossAxis介紹

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

圖3 CrossAxis

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.二、CrossAxisAlignment.center

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

圖6

1.三、CrossAxisAlignment.end

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

圖7

1.四、CrossAxisAlignment.stretch

子控件充滿十字軸

圖8

1.五、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

2、MainAxisAlignment Propery

Column和Row有相同的屬性。因此下面的例題，咱們同時展現兩個控件的效果。

MainAxis介紹

MainAxis是主軸，就是與當前控件方向平行。具體效果以下圖：

圖11 MainAxis

2.一、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.二、MainAxisAlignment.center

將子控件放在儘量靠近主軸中間的位置。 效果圖以下：

圖13

2.三、MainAxisAlignment.end

將子控件放在儘量靠近主軸末端的位置。 效果圖以下：

圖14

2.四、MainAxisAlignment.spaceAround

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

圖15

2.五、MainAxisAlignment.spaceBetween

子控件之間均勻分佈，間距爲A；可是第一個和最後一個控件距離邊界的距離是0。 效果圖以下：

圖16

2.六、MainAxisAlignment.spaceEvenly

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

圖17

3、TextDirection Propery

決定水平方向上子控件的佈局順序。

這裏僅以CrossAxisAlignment爲例，mainAxisAlignment能夠自行分析。

3.一、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.二、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

4、VerticalDirection Propery

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

默認是VerticalDirection.down。

這裏僅以CrossAxisAlignment爲例，mainAxisAlignment能夠自行分析。

4.一、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.二、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

5、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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程