Flutter控件--Row、Column和Stack

摘要：也是中常用的控件。属性主轴对准方式对于来说，水平是主轴。对于，交叉轴是水平。由左到右，左为头，右为尾表示在水平方向主轴。表示从左上角开始排文本方向，的流动方向表示超过的部分是否裁剪掉不剪掉。默认是是包裹的高度即可。

flutter控件练习demo地址：github

因为 Row 和 Column 都是继承于 Flex，所以他们两个的属性也都是 Flex 的属性

Row 是 Flutter 中常用的控件。一个让 children 在水平方向依次排列 。如果 Row 空间 不足的话。 自身不带滚动的。

Column 也是 Flutter 中常用的控件。 一个 children 在垂直方向依次排列 。如果 Column 空间 不足的话。 自身不带滚动的。

2.1 mainAxisAlignment (主轴对准方式)

对于 Row 来说 ， 水平是主轴。垂直是 交叉轴。 对于 Column 来说， 垂直是主轴。水平是 交叉轴 把 children 放到 主轴 的哪个位置 。 如果要验证这个属性，记住把 mainAxisSize 设置成 MainAxisSize.max ，

2.2 mainAxisSize

也就是来规定自己( Row 或者 Column )的大小。

MainAxisSize.min : 主轴方向，包裹住 childre 即可。相当于 android 中的 wrap_content

MainAxisSize.max(默认值) : 主轴方向，铺满 ( Row 或者 Column )的父 Widget 的大小。 相当于 android 中的 match_parent

2.3 crossAxisAlignment (交叉轴)跟主轴垂直的一个轴

交叉轴 顾名思义： 就是 跟 主轴 垂直的 一个轴 对于 Row 。交叉轴 是 在垂直。对于 Column，交叉轴 是水平 。下面还是 以 Row 举个例子

2.4 textDirection

children 在 主轴 怎样排列。 正方向排列还是反方向排列

Row

TextDirection.ltr : 表示在水平方向(主轴)。由左到右 ， 左为头 ， 右为尾

TextDirection.rtl ：表示在水平方向(主轴)。由右到左 ， 右为头 ， 左为尾

Column

TextDirection.ltr : 表示在垂直方向(主轴)。由上到下 ， 上为头 ， 下为尾

TextDirection.rtl ：表示在垂直方向(主轴)。由下到上 ， 下为头 ，上为尾

2.5 verticalDirection

children 在 交叉轴 怎样排列。 正方向排列还是反方向排列

Row

VerticalDirection.down : 表示在垂直方向(交叉轴)。由上到下 ， 上为头 ， 下为尾

VerticalDirection.up ：表示在垂直方向(交叉轴)。由下到上 ， 下为头 ， 上为尾

Column

VerticalDirection.down : 表示在水平方向(交叉轴)。由左到右 ， 左为头 ， 右为尾

TextDirection.rtl ：表示在水平方向(交叉轴)。由右到左 ， 右为头 ， 左为尾

取代线性布局 (和Android中的LinearLayout相似,但是我感觉怎么这么像 FrameLayout 呢？)，Stack允许子 widget 堆叠， 你可以使用 Positioned 来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝度定位（absolute positioning )布局模型设计的。用于将多个childs相对于其框的边缘定位，多用于以简单方式重叠children

alignment： 默认值。AlignmentDirectional.topStart ( AlignmentDirectional(-1.0, -1.0) )。 表示从左上角开始排 children

textDirection： 文本方向 ， children 的流动方向

overflow： 表示 超过的部分是否裁剪掉 Overflow.visible 不剪掉。 Overflow.clip 减掉

fit： 让 children 怎样填充 Stack 。

StackFit.passthrough 不改变子节点约束 也就是说 children 是多大就是多大

StackFit.expand 子节点最大可能的占用空间 ，让 children 的大小 扩大到 Stack 的大小

StackFit.loose:放开了子节点宽高的约束，可以让子节点从0到最大尺寸

demo 代码

import "package:flutter/material.dart";

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("row"),
        centerTitle: true,
      ),
      body: RowDemo(),
    );
  }
}

class RowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    final _list = [
      RaisedButton(
        disabledColor: Colors.red,
        child: Text("儿子1"),
      ),
      Text("儿子2"),
      Text("儿子3"),
      Text("儿子4"),
      Text("儿子5"),
    ];
    return Column(
      children: [
        SizedBox(
          height: 30,
        ),
        Container(
          color: Colors.grey,
          child: Row(
            // 主轴(main axis)
            // 把 children 放到 Column 主轴 的哪个位置
            //  end : 尾部， start ：头部， center ： 中间 ，spaceBetween：在 children 之间均匀地放置 空间 ，spaceAround ： 每个 children
            mainAxisAlignment: MainAxisAlignment.start,

            // 此 Row 的宽度。默认是 MainAxisSize.max
            //          MainAxisSize.min 是 包裹 children 的高度 即可  。android 中 相当于 wrap_content
            //          MainAxisSize.max 是 铺满 Row 的父 Widget 的宽度  。android 中 相当于 match_parent
            //  如果设置成 MainAxisSize.min 。 那么 mainAxisAlignment 属性相当于无效。 因为是包裹 children
            mainAxisSize: MainAxisSize.max,
            // 交叉轴(cross axis)
            // 把 children 放到 Column 主轴 的哪个位置
            // end : 尾部， start ：头部， center ： 中间 ，
            crossAxisAlignment: CrossAxisAlignment.start,
            // children 在主轴 的排列顺序
            textDirection: TextDirection.ltr,
            // children 在 交叉轴 的排列顺序
            verticalDirection: VerticalDirection.down,
            children: _list,
          ),
        ),
        SizedBox(
          height: 30,
        ),
        SizedBox(
            width: 200,
            height: 200,
            child: Stack(
              alignment: AlignmentDirectional.topStart,
//            alignment:   AlignmentDirectional(-1.0, -1.0),
              fit: StackFit.loose,
              overflow: Overflow.visible,
              children: [
                Container(
                  color: Colors.black,
                  height: 200,
                  width: 200,
                ),
                Container(
                  color: Colors.deepPurple,
                  height: 100,
                  width: 100,
                ),
                Container(
                  color: Colors.green,
                  height: 50,
                  width: 50,
                ),
              ],
            )),
      ],
    );
  }
}