Flutter仿写Linear Layout（线性布局） for android developer
LinearLayout（线性布局）是在Android开发的时最常用的布局之一。今天在Flutter上实现LinaearLayout相关的属性。
1.orientation
LinearLayout的android:orientation="horizontal"和android:orientation="vertical"
Row
Row(children: [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: [const Icon(Icons.add_shopping_cart,size: 50,),const Icon(Icons.ac_unit,size: 100,),const Icon(Icons.add_alarm,size: 50,),],),
、wrap_content
match_parent子控件的和父控件一样大,
wrap_content父控件包裹子控件，和所有子控件一样大
在flutter中使用MainAxisSize，即主轴对齐方式。match_parent、wrap_content分别对应max、min
Row(mainAxisSize: MainAxisSize.max,children: [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: [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: [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: [const Icon(Icons.add_shopping_cart,size: 50,),const Icon(Icons.ac_unit,size: 100,),const Icon(Icons.add_alarm,size: 50,),],),
子控件在允许范围内，对齐方式包括left、center、right，flutter提供了MainAxizAligment，主轴对齐方式，有更丰富的支持，start、center、end、spaceBetween、spaceEvenly、spaceAround。
Row(mainAxisSize: MainAxisSize.max,mainAxisAlignment: MainAxisAlignment.start,children: [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: [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: [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: [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: [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,),),),],),
以上，可以完成基本的页面布局。
