Flutter仿写Linear Layout（线性布局） for android developer

2019-10-2215:36:53APP与小程序开发Comments2,285 views字数 3340阅读模式

LinearLayout（线性布局）是在Android开发的时最常用的布局之一。今天在Flutter上实现LinaearLayout相关的属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

1.orientation

LinearLayout的android:orientation="horizontal"和android:orientation="vertical"分别对应Flutter的Row(横向布局)和Column(纵向布局)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

Row文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

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文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

Column(  children: [    const Icon(      Icons.add_shopping_cart,      size: 50,    ),    const Icon(      Icons.ac_unit,      size: 100,    ),    const Icon(      Icons.add_alarm,      size: 50,    ),  ],),

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

、wrap_content

match_parent子控件的和父控件一样大,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

wrap_content父控件包裹子控件，和所有子控件一样大文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

在flutter中使用MainAxisSize，即主轴对齐方式。match_parent、wrap_content分别对应max、min文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

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

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

子控件在允许范围内，对齐方式包括left、center、right，flutter提供了MainAxizAligment，主轴对齐方式，有更丰富的支持，start、center、end、spaceBetween、spaceEvenly、spaceAround。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

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文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

mainAxisAlignment: MainAxisAlignment.spaceAround文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

mainAxisAlignment: MainAxisAlignment.spaceBetween文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

mainAxisAlignment: MainAxisAlignment.spaceEvenly//平均的，相等的，平滑的文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

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文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

mainAxisAlignment: MainAxisAlignment.end文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

mainAxisAlignment: MainAxisAlignment.spaceAround文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

mainAxisAlignment: MainAxisAlignment.spaceBetween文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

mainAxisAlignment: MainAxisAlignment.spaceEvenly文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

crossAxisAlignment文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

顺便说下crossAxisAlignment，交叉轴的对齐方式，即Row的话，在y轴的对齐方式，Cloumn的话，在x轴的对齐方式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

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文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

crossAxisAlignment: CrossAxisAlignment.end文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

crossAxisAlignment: CrossAxisAlignment.stretch文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

layout_weight

创建布局经常会按照比例分布局，android中使用layout_weight设置数值，flutter中使用flex，使用Expanded包裹住子组件，添加flex。为了方便查看，使用Container包裹并添加颜色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16918.html

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