Row与Column,mainAxisAlignment和crossAxisAlignment使用分析

初识Row与Column,很崩溃,分不清主轴跟交叉轴,主轴决定子widget排放方式,水平或者垂直,跟安卓的线性布局一样,分为两种模式

水平模式,子widget的会按照水平,从中到右依次排放
垂直模式,子widget会按照垂直方向,从上到下依次排放
  • 然而在Row或者Column中,如何来控制主轴方向呢,通过下面这个来控制
    //交叉轴设置模式
   crossAxisAlignment: CrossAxisAlignment.start,
   //主轴设置模式
    mainAxisAlignment: MainAxisAlignment.spaceBetween,

如果是Row,widget使用的时候,代表子widget水平方式排放,主轴就是水平方向,mainAxisAlignment来设置主轴模式,crossAxisAlignment就是垂直方向设置,也就是交叉轴就是垂直
Row与Column,mainAxisAlignment和crossAxisAlignment使用分析_第1张图片

如果是Column,widget使用的时候,代表子widget垂直方式排放,主轴就是垂直方向,mainAxisAlignment来设置主轴模式,crossAxisAlignment就是水平方向设置,也就是交叉轴就是水平
Row与Column,mainAxisAlignment和crossAxisAlignment使用分析_第2张图片

你可能感兴趣的:(flutter开发)