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…