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…