Flutter为Android开发者模拟线性布局（Linear Layout）

线性布局（Linear Layout）是Android开发中最常用的布局之一。今天Flutter实现了LinaearLayout相关的属性。

1.orientation

LinearLayout android:orientation="horizo​​ntal" 和 和 android:orientation="ro 布局）和列（VerticalLayout）

行

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子控件与父控件大小相同t父控件❙tent子控件与所有子控件相同大

在wiggle中使用MainAxisSize，即主轴对齐。 match_parent和wrap_content

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,    ),  ],),

在允许的范围内。对齐包括左，中心，右。扑来提供mainaxizalignment，并提供更丰富的支持。 ，中间，末端，空间之间，空间均匀，空间周围。

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.MainAxisAlignment。 Alignment.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

mainAxisAlign ment: MainAxisAlignment.xi AxisAlignment.spaceEvenly

crossAxisAlignment

顺便说一句crossAxisAlignment，交叉轴对齐，即Row的y轴对齐，Clumn的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。 .end

crossAxisAlignment：CrossAxisAlignment.stretch

layout_weight

创建布局时，布局通常是按比例的。 Android中使用layout_weight设置值，flutter中flexi，Expanded包裹子组件并添加flex。将其包裹在容器中并添加颜色以使其更容易看到。

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,      ),    ),  ),],),

以上就可以完成页面的主要布局了。