05-Flutter 布局类组件

布局类组件

Column 和 Row 竖向或者横向的线性布局
Flex 弹性布局，按比例布局
Wrap 流式布局
Stack Positioned 绝对布局
Align和Center 对齐与相对定位

Column 和 Row 竖向或者横向的线性布局

以Column为例讲解，3个属性比较重要：

mainAxisAlignment 主轴方向的对齐方式
crossAxisAlignment 纵轴方向的对齐方式
children 孩子Widget

mainAxisAlignment有6个

start
end
center
spaceBetween
spaceAround
spaceEvenly

具体效果看下图

Column(
  mainAxisAlignment: MainAxisAlignment.start,//主轴方向的对齐方式
  crossAxisAlignment: CrossAxisAlignment.start,//纵轴方向的对齐方式
  children: <Widget>[
    Text("start"),
    Text("start"),
    Text("start"),
    Text("start"),
    Text("start"),
  ],
),

widget_column_mainAxisAlignment.png

crossAxisAlignment属性常用的有3个

start
center
end

widget_column_crossAxisAlignment.png

Flex 弹性布局，按比例布局

Column和Row是继承Flex，用Flex也能实现两者的效果

用Flex实现按比例布局，需要结合Expanded进行指定比例

Flex(
  direction: Axis.horizontal,//如果是垂直的话，需要指定父容器的高度，否则会报错
  children: <Widget>[
    Expanded(
      flex: 1,
      child: Container(color: Colors.orange, child: Text("flex=1")),
    ),
    Expanded(
      flex: 2,
      child: Container(color: Colors.red, child: Text("flex=2")),
    ),
  ],
),

widget_flex.png

Wrap 流式布局

使用方式和Row和Colunm类似，会自动换行

Container(
        color: Colors.blue,
        height: 400,
        child: Wrap(
          //水平方向
          direction: Axis.horizontal,
          //主轴上child的间距
          spacing: 10,
          //纵轴child的间距
          runSpacing: 50,
          //主轴child的对齐方式
          alignment: WrapAlignment.start,
          //纵轴child的对齐方式
          runAlignment: WrapAlignment.spaceEvenly,
          //纵轴居中对齐
          crossAxisAlignment: WrapCrossAlignment.center,
          children: <Widget>[
            Container(color: Colors.red, child: Text("AAAAAAAAAAAAAA")),
            Container(
              color: Colors.red,
              child: OutlineButton(
                child: Text("CCCCCCCCCCCCCCC"),
                onPressed: () => {},
              ),
            ),
            Container(color: Colors.red, child: Text("SSSSSSSSS")),
            Container(color: Colors.red, child: Text("AAAAAA")),
            Container(
              color: Colors.red,
              child: OutlineButton(
                child: Text("按钮1111"),
                onPressed: () => {},
              ),
            ),
          ],
        ),
      ),

widget_wrap.png

Stack Positioned 绝对布局

Stack：绝对布局，使用Positioned进行定位，子widget相对于父widget进行定位

Container(
  height: 100,
  color: Colors.red,
  child: ConstrainedBox(
    constraints: BoxConstraints.expand(), //撑满父容器
    child: Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Positioned(left: 0, top: 0, child: Text("左上角")),
        Positioned(right: 0, top: 0, child: Text("右上角")),
        Positioned(left: 0, bottom: 0, child: Text("左下角")),
        Positioned(right: 0, bottom: 0, child: Text("右下角")),
        //这里水平使用外层设置的居中对齐方式
        Positioned(top: 0, child: Text("AA")),
        //这里垂直和水平都是外层设置的居中对齐方式
        Positioned(child: Text("BB")),
        Positioned(bottom: 0, child: Text("CC")),
      ],
    ),
  ),
),

widget_stack_pisitioned.png

Align和Center，对齐与相对定位

单一孩子Widget，设置子组件的位置，并且根据子组件的大小设置自己的大小，Center是Align的一个包装类，不能设置对齐方式，对齐方式是居中对齐

Column(
  children: <Widget>[
    Container(
      color: Colors.red,
      child: Align(
        //子Widget
        child: Container(
          color: Colors.blue,
          child: Text("AAAAA"),
        ),
        /*父Widget的宽度是子Widget的3倍*/
        widthFactor: 3,
        /*父Widget的高度是子Widget的2倍*/
        heightFactor: 2,
        alignment: Alignment.center,//或者 FractionalOffset(0.5, 0.5),
      ),
    ),
    Container(
      margin: EdgeInsets.only(top: 20),
      color: Colors.red,
      child: Center(
        //子Widget
        child: Container(
          color: Colors.blue,
          child: Text("AAAAA"),
        ),
        /*父Widget的宽度是子Widget的3倍*/
        widthFactor: 3,
        /*父Widget的高度是子Widget的2倍*/
        heightFactor: 2,
      ),
    ),
  ],
),

widget_align_center.png