Flutter学习二-布局Row、Column、Stack

Flutter布局有Row(横向布局)、Column(纵向布局)、Stack(重叠布局)三种布局方式

Row

用Row布局的子部件会横向排列

return Container(
      color: Colors.orange,
      alignment: Alignment(0, 0),
      child: Row(
        children: <Widget>[
          Container(child: Icon(Icons.add,size: 60,),color: Colors.red,),
          Container(child: Icon(Icons.ac_unit,size: 60,),color: Colors.white,),
          Container(child: Icon(Icons.access_alarm,size: 60,),color: Colors.green,),
        ],
      ),
    );

Layout_Row@2x.png

Column

用Column布局的子部件会纵向排列，将代码中的Row改成Column运行结果如下 Layout_Column@2x.png

Stack

用Row布局的子部件会重叠排列，将代码中的Row改成Stack并改变icon的大小运行结果如下 Layout_Stack@2x.png

部件间的布局

• mainAxisAlignment,主轴是x轴上的布局
  mainAxisAlignment是主轴，枚举值如下

start 从左开始布局（默认值）
center 从中间开始布局
end 从又开始布局
spaceBetween从两边开始布局
spaceAround空间平均分布在子部件的周围
spaceEvenly等间距分配空间

• CrossAxisAlignment
  CrossAxisAlignment是交叉轴,交叉轴是y轴上的布局

• positioned

const Positioned({
Key key,
this.left,
this.top,
this.right,
this.bottom,
this.width,
this.height,
@required Widget child,
})

left、top 、right、 bottom分别代表离Stack左、上、右、底四边的距离。width和height用于指定定位元素的宽度和高度，注意，此处的width、height 和其它地方的意义稍微有点区别，此处用于配合left、top 、right、 bottom来定位widget，举个例子，在水平方向时，你只能指定left、right、width三个属性中的两个，如指定left和width后，right会自动算出(left+width)，如果同时指定三个属性则会报错，垂直方向同理。