Android系列2Flutter仿寫LinearLayout for android developer

LinearLayout（線性佈局）是在Android開發的時最經常使用的佈局之一，今天經過Flutter提供的相關組件，實現LinearLayout相關的屬性。

微信公衆號：Flutter入門

1.orientation

LinearLayout的android:orientation="horizontal"和android:orientation="vertical"分別對應Flutter的Row(橫向佈局)和Column(縱向佈局)

Row

Row(
  children: <Widget>[
    const Icon(
      Icons.add_shopping_cart,
      size: 50,
    ),
    const Icon(
      Icons.ac_unit,
      size: 100,
    ),
    const Icon(
      Icons.add_alarm,
      size: 50,
    ),
  ],
),
複製代碼

Column

Column(
  children: <Widget>[
    const Icon(
      Icons.add_shopping_cart,
      size: 50,
    ),
    const Icon(
      Icons.ac_unit,
      size: 100,
    ),
    const Icon(
      Icons.add_alarm,
      size: 50,
    ),
  ],
),
複製代碼

2.match_parent、wrap_content

match_parent子控件的和父控件同樣大,

wrap_content父控件包裹子控件，和全部子控件同樣大

在flutter中使用MainAxisSize，即主軸對齊方式。match_parent、wrap_content分別對應max、min

Row(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[
    const Icon(
      Icons.add_shopping_cart,
      size: 50,
    ),
    const Icon(
      Icons.ac_unit,
      size: 100,
    ),
    const Icon(
      Icons.add_alarm,
      size: 50,
    ),
  ],
),
複製代碼

Row(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    const Icon(
      Icons.add_shopping_cart,
      size: 50,
    ),
    const Icon(
      Icons.ac_unit,
      size: 100,
    ),
    const Icon(
      Icons.add_alarm,
      size: 50,
    ),
  ],
),
複製代碼

Column(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[
    const Icon(
      Icons.add_shopping_cart,
      size: 50,
    ),
    const Icon(
      Icons.ac_unit,
      size: 100,
    ),
    const Icon(
      Icons.add_alarm,
      size: 50,
    ),
  ],
),
複製代碼

Column(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    const Icon(
      Icons.add_shopping_cart,
      size: 50,
    ),
    const Icon(
      Icons.ac_unit,
      size: 100,
    ),
    const Icon(
      Icons.add_alarm,
      size: 50,
    ),
  ],
),
複製代碼

3.gravity

子控件在容許範圍內，對齊方式包括left、center、right，flutter提供了MainAxizAligment，主軸對齊方式，有更豐富的支持，start、center、end、spaceBetween、spaceEvenly、spaceAround。

Row(
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
    const Icon(
      Icons.add_shopping_cart,
      size: 50,
    ),
    const Icon(
      Icons.ac_unit,
      size: 100,
    ),
    const Icon(
      Icons.add_alarm,
      size: 50,
    ),
  ],
),
複製代碼

Row(
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    const Icon(
      Icons.add_shopping_cart,
      size: 50,
    ),
    const Icon(
      Icons.ac_unit,
      size: 100,
    ),
    const Icon(
      Icons.add_alarm,
      size: 50,
    ),
  ],
)
複製代碼

mainAxisAlignment: MainAxisAlignment.end

mainAxisAlignment: MainAxisAlignment.spaceAround

mainAxisAlignment: MainAxisAlignment.spaceBetween

mainAxisAlignment: MainAxisAlignment.spaceEvenly//平均的，相等的，平滑的

Column(
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
    const Icon(
      Icons.add_shopping_cart,
      size: 50,
    ),
    const Icon(
      Icons.ac_unit,
      size: 100,
    ),
    const Icon(
      Icons.add_alarm,
      size: 50,
    ),
  ],
)
複製代碼

mainAxisAlignment: MainAxisAlignment.center

mainAxisAlignment: MainAxisAlignment.end

mainAxisAlignment: MainAxisAlignment.spaceAround

mainAxisAlignment: MainAxisAlignment.spaceBetween

mainAxisAlignment: MainAxisAlignment.spaceEvenly

crossAxisAlignment

順便說下crossAxisAlignment，交叉軸的對齊方式，即Row的話，在y軸的對齊方式，Cloumn的話，在x軸的對齊方式

Row(
  mainAxisSize: MainAxisSize.min,
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    const Icon(
      Icons.add_shopping_cart,
      size: 50,
    ),
    const Icon(
      Icons.ac_unit,
      size: 100,
    ),
    const Icon(
      Icons.add_alarm,
      size: 50,
    ),
  ],
)
複製代碼

crossAxisAlignment: CrossAxisAlignment.center

crossAxisAlignment: CrossAxisAlignment.end

crossAxisAlignment: CrossAxisAlignment.stretch

layout_weight

建立佈局常常會按照比例分佈局，android中使用layout_weight設置數值，flutter中使用flex，使用Expanded包裹住子組件，添加flex。爲了方便查看，使用Container包裹並添加顏色。

Row(
  children: <Widget>[
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.red,
        child: const Icon(
          Icons.add_shopping_cart,
          size: 50,
        ),
      ),
    ),
    Expanded(
      flex: 2,
      child: Container(
        color: Colors.green,
        child: const Icon(
          Icons.ac_unit,
          size: 100,
        ),
      ),
    ),
    Expanded(
      flex: 4,
      child: Container(
        color: Colors.blue,
        child: const Icon(
          Icons.add_alarm,
          size: 50,
        ),
      ),
    ),
  ],
),
複製代碼

以上能夠完成基本的頁面佈局。

github:github.com/damengzai/f…