【Flutter】十二、Flutter中常用的布局容器——Row、Column

一、Row

继承自Flex。可将children中的widget在水平方向上进行排列。与css的flex(flex-direction:row;)布局相似

1.1 构造函数

Row({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, // 主轴对齐方式（水平方向）
    MainAxisSize mainAxisSize = MainAxisSize.max, // 主轴间距大小
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, // 副轴对齐方式（垂直方向）
    TextDirection textDirection, // 水平方向：ltr从左向右；rtl从右向左
    VerticalDirection verticalDirection = VerticalDirection.down, // 竖直方向
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  }) 

示例代码

import 'package:flutter/material.dart';

class RowDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.max,
      textDirection: TextDirection.ltr,
      verticalDirection: VerticalDirection.down,
      textBaseline: TextBaseline.ideographic,
      children: <Widget>[
        Container(
          width: 80.0,
          height: 200.0,
          color: Colors.cyanAccent,
        ),
        Container(
          width: 80.0,
          color: Colors.red,
        ),
        Container(
          width: 80.0,
          height: 170.0,
          color: Colors.green,
        ),
        Container(
          width: 80.0,
          height: 600.0,
          color: Colors.orange,
        ),
      ],
    );
  }
}

1.mainAxisAlignment
    该属性决定了主轴方向上的对齐方式，可能的值有（当设置mainAxisSize为MainAxisSize.min时，以下间隔会消失）：

mainAxisAlignment值	说明	效果
MainAxisAlignment.star	从开始位置开始,textDirection若为TextDirection.rtl则为右对齐
MainAxisAlignment.end	从结束位置开始，textDirection若为TextDirection.rtl则为左对齐
MainAxisAlignment.center	居中
MainAxisAlignment.spaceBetween	两侧对齐
MainAxisAlignment.spaceAround	相邻子组件的间隔是左右两侧控件距离边缘的两倍
MainAxisAlignment.spaceEvenly	相邻间隔平均分配

2.crossAxisAlignment
    该属性决定了在副轴（竖直）方向上的对齐方式，可能的值有以下：

crossAxisAlignment	说明	效果
CrossAxisAlignment.center	默认值，竖直方向居中
CrossAxisAlignment.start	顶部对齐，若verticalDirection为VerticalDirection.up效果为底部对齐
CrossAxisAlignment.end	与CrossAxisAlignment.start相反
CrossAxisAlignment.stretch	填充满高度，children中的控件高度失效
CrossAxisAlignment.baseline	如果主轴是竖直的，效果与CrossAxisAlignment.start一样

二、Column

同样继承自Flex。children中的widget会在竖直方向上进行排列。相关属性与Row类似，只不过Column的主轴是竖直方向，副轴为水平方向

import 'package:flutter/material.dart';

class ColumnDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.center,
      textDirection: TextDirection.rtl,
      verticalDirection: VerticalDirection.down,
      children: <Widget>[
        Container(
          height: 100.0,
          width: 90.0,
          color: Colors.redAccent,
        ),
        Container(
          height: 100.0,
          width: 190.0,
          color: Colors.purpleAccent,
        ),
        Container(
          height: 100.0,
          color: Colors.cyanAccent,
        ),
        Container(
          height: 100.0,
          width: 200.0,
          color: Colors.greenAccent,
        ),
        Container(
          height: 100.0,
          width: 290.0,
          color: Colors.yellow,
        ),
      ],
    );
  }
}