Flutter笔记34：Column和Row水平垂直布局组件

Flutter Column和Row水平垂直布局组件，属性方法都一样，只不过把主轴和交叉轴进行了交换，这里以Column为例：

    return MaterialApp(
      title: 'Column和Row水平垂直布局组件',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Column和Row水平垂直布局组件'),
        ),
        body: Center(
            child: Container(
              width: 500.0,
              height: 500.0,
              decoration: BoxDecoration(color: Colors.blue),
              child: Column(
                /*
                  mainAxisAlignment属性：
                  MainAxisAlignment.spaceEvenly：将主轴方向空白区域均分，children之间空间相等，包括首尾空间
                  MainAxisAlignment.spaceAround：将主轴方向空白区域均分，children之间空间相等，首尾空间是中间空间的一半
                  MainAxisAlignment.spaceBetween：将主轴方向空白区域均分，children之间空间相等，首尾无空隙
                  MainAxisAlignment.start：children在主轴起点方向
                  MainAxisAlignment.end：children在主轴终点方向
                  MainAxisAlignment.center：children在主轴中间
                */
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                /*
                  crossAxisAlignment属性：
                  CrossAxisAlignment.start：children在交叉轴起点方向
                  CrossAxisAlignment.end：children在交叉轴终点方向
                  CrossAxisAlignment.center：children在交叉轴中间
                  CrossAxisAlignment.stretch：children拉伸占满交叉轴，不管children是否设置了宽度
                  CrossAxisAlignment.baseline：在交叉轴方向，使得于这个baseline对齐，如果主轴是垂直的，那么这个值就是start
                */
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Container(
                    color: Colors.green,
                    width: 100.0,
                    height: 60.0,
                  ),
                  Container(
                    color: Colors.green,
                    width: 100.0,
                    height: 60.0,
                  ),
                  Container(
                    color: Colors.green,
                    width: 100.0,
                    height: 60.0,
                  ),
                ],
              ),
          )
        ),
      ),
    );

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！