Flutter 佈局控制元件篇-->Row、Column

夜夕i發表於2019-09-30
Flutter控制元件

Flutter 中的Row和Column被稱之為線性佈局，所謂線性佈局，即指沿水平或垂直方向排布子元件。

軸的概念

對於線性佈局，有主軸和縱軸之分。

如果佈局是沿水平方向，那麼主軸就是指水平方向，而縱軸即垂直方向；

如果佈局沿垂直方向，那麼主軸就是指垂直方向，而縱軸就是水平方向。

線上性佈局中，有兩個定義對齊方式的列舉類MainAxisAlignment和CrossAxisAlignment，分別代表主軸對齊和縱軸對齊。

Row

Row可以在水平方向排列其子元件

建構函式如下：

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

屬性解釋

textDirection

表示水平方向子元件的佈局順序(是從左往右還是從右往左)，預設從左往右

mainAxisSize

表示Row在主軸(水平)方向佔用的空間，
預設是MainAxisSize.max，表示儘可能多的佔用水平方向的空間
而MainAxisSize.min表示儘可能少的佔用水平空間

mainAxisAlignment

表示子元件在Row所佔用的水平空間內對齊方式(只有當mainAxisSize的值為MainAxisSize.max時，此屬性才有意義)

  • MainAxisAlignment.start表示沿textDirection的初始方向對齊，(如textDirection取值為TextDirection.ltr時，則表示左對齊，textDirection取值為TextDirection.rtl時表示從右對齊。)

  • MainAxisAlignment.end和MainAxisAlignment.start正好相反；

  • MainAxisAlignment.center表示居中對齊

verticalDirection

表示Row縱軸（垂直）的對齊方向，預設是VerticalDirection.down，表示從上到下。

crossAxisAlignment

表示子元件在縱軸方向的對齊方式，Row的高度等於子元件中最高的子元素高度，它的取值和MainAxisAlignment一樣(包含start、end、 center三個值)，

不同的是crossAxisAlignment的參考系是verticalDirection，

即verticalDirection值為VerticalDirection.down時crossAxisAlignment.start指頂部對齊，

verticalDirection值為VerticalDirection.up時，crossAxisAlignment.start指底部對齊；
而crossAxisAlignment.end和crossAxisAlignment.start正好相反；

children

子元件陣列

Column

Column可以在垂直方向排列其子元件。
引數和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>[],
})
複製程式碼

注：Row和Column都只會在主軸方向佔用儘可能大的空間，而縱軸的長度則取決於他們最大子元素的長度

如果我們想讓文字控制元件在整個手機螢幕中間對齊，那麼我們有兩種方法：

  1. 將Column的寬度指定為螢幕寬度，我們可以通過ConstrainedBox或SizedBox來強制更改寬度限制，

例如：

ConstrainedBox(
  constraints: BoxConstraints(minWidth: double.infinity), 
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Text("Hello"),
      Text("World"),
    ],
  ),
);
複製程式碼

將minWidth設為double.infinity，可以使寬度佔用儘可能多的空間。

  1. 使用Center Widget；

控制元件巢狀

如果Row裡面巢狀Row，或者Column裡面再巢狀Column，

那麼只有對最外面的Row或Column會佔用盡可能大的空間，裡面Row或Column所佔用的空間為實際大小，

示例：

Container(
  color: Colors.green,
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.max, //有效，外層Colum高度為整個螢幕
      children: <Widget>[
        Container(
          color: Colors.red,
          child: Column(
            mainAxisSize: MainAxisSize.max,//無效，內層Colum高度為實際高度  
            children: <Widget>[
              Text("hello world "),
              Text("I am Jack "),
            ],
          ),
        )
      ],
    ),
  ),
);
複製程式碼

如果要讓裡面的Column佔滿外部Column，可以使用Expanded元件：

Expanded( 
  child: Container(
    color: Colors.red,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center, //垂直方向居中對齊
      children: <Widget>[
        Text("hello world "),
        Text("I am Jack "),
      ],
    ),
  ),
)
複製程式碼

關於Expanded的使用，請參考文章：Flutter 佈局控制元件篇-->Flex、Expanded

T_T

相關文章