文章目录

Row
Column
Stack
IndexedStack
GridView
ListView
Wrap 和 Flow
Expanded 和 Flexible

Flutter中包含多个子控件的布局类控件有很多，下面是官方文档
官方文档

我们来看看常用的

控件名称	作用
Row	水平方向排列子控件
Column	垂直方向排列子控件
Stack	堆叠的方式排列子控件
IndexedStack	堆叠的方式排列子控件，通过index控制显示哪一个子控件
GridView	网格布局
Flow	流式布局
Table	表格
Wrap	可以让子控件自动换行的控件
ListBody	将子控件按照指定的方向进行排列
ListView	列表控件
Expanded	可展开子控件的控件

Row

水平排列的线性布局，类似于Android中的LinearLayout把orientation属性设置为horizontal

构造方法

 Row({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,     //主轴起始位置
    MainAxisSize mainAxisSize = MainAxisSize.max,     //控制空闲空间的分配，如果外部容器没有明确指定宽高，那么此属性生效
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,  //交叉轴起始位置
    TextDirection textDirection,   //水平方向的起始位置和排列方向
    VerticalDirection verticalDirection = VerticalDirection.down,  //垂直方向的起始位置和排列方向
    TextBaseline textBaseline,   //基线
    List<Widget> children = const <Widget>[],  //子控件
  })

我们来简单用一用

Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Box("1"),
        Box("2"),
        Box("3"),
      ],
    );

image.png

当我们没有明确指定外部容器的宽高时，mainAxisSize属性会生效

Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min, //尽可能小的减少空闲空间
      children: <Widget>[
        Box("1"),
        Box("2"),
        Box("3"),
      ],
    );

image.png

Column

垂直排列的线性布局，类似于Android中的LinearLayout把orientation属性设置为vertical
用法跟Row基本一致

这里我们就直接用了

Container(
      width: double.infinity,
      height: double.infinity,
      margin: EdgeInsets.all(10),
      decoration: BoxDecoration(
          border: Border.all(
        color: Colors.black,
        width: 1,
      )),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          Box("1"),
          Box("2"),
          Box("3"),
          Box("4"),
        ],
      ),
    );

image.png

Stack

Stack({
    Key key,
    this.alignment = AlignmentDirectional.topStart, //对齐方式
    this.textDirection,  //textDirection文本对齐方式，一般不会修改
    this.fit = StackFit.loose,  //设置子控件的占用尺寸
    this.overflow = Overflow.clip,//超出区域是否裁剪
    List<Widget> children = const <Widget>[],
  })

堆叠的方式排列子控件，其属性比较简单。
下面我们简单用一用

Stack(
      children: <Widget>[
        Image.network(
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547639589928&di=6d46424b47eec79a7f80bace2999217d&imgtype=0&src=http%3A%2F%2Fp0.ssl.qhimg.com%2Ft01c3f5bf72e7d1ac67.png"),
        Text(
          "Stack",
          style: TextStyle(
            color: Colors.red,
            fontSize: 20,
            fontStyle: FontStyle.italic,
          ),
        ),
      ],
      alignment: Alignment.bottomCenter,
    );

image.png

IndexedStack

用法同Stack,多了一个index属性，用来控制显示哪个子控件

IndexedStack({
    Key key,
    AlignmentGeometry alignment = AlignmentDirectional.topStart,
    TextDirection textDirection,
    StackFit sizing = StackFit.loose,
    this.index = 0,   //显示控件的下标
    List<Widget> children = const <Widget>[],
  })

简单用一用

IndexedStack(
      index: 1,
      children: <Widget>[
        Text("IndexStackWidget"),
        Image.network(
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547639589928&di=6d46424b47eec79a7f80bace2999217d&imgtype=0&src=http%3A%2F%2Fp0.ssl.qhimg.com%2Ft01c3f5bf72e7d1ac67.png",
        ),
      ],