Flutter基础控件：Row，Column

@TOCRow
行，以水平方式排列其内部children widget。
若需要使其内部某个children widget填充满剩余空间，可使用Expanded包裹该组件。

void main() => runApp(new MyApp());

//StatelessWidget 无状态widget
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //MaterialApp 安卓风格APP
    return new MaterialApp(
      title: 'welcome',
      // scoffold 脚手架
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('welcome to flutter'),
        ),
        body: new Center(
          child: new Row(
            children: <Widget>[
              new IconButton(
                  icon: new Icon(Icons.menu),
                  tooltip: 'Button',
                  onPressed: null),
              new Expanded(
                child: new IconButton(
                    //IconButton 和 Text 平分了剩下的位置
                    icon: new Icon(Icons.search),
                    tooltip: 'Search',
                    onPressed: null),
              ),
              new Expanded(
                child: new Text(
                  '按钮一个超级长的按钮',
                  style: TextStyle(
                      // 创建 paint 对象，设置 color 属性为想要的颜色
                      background: Paint()..color = Colors.red),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

布局

Row的布局有六个步骤，这种布局表现来自Flex（Row和Column的父类）：

• 首先按照不受限制的主轴（main axis）约束条件，对flex为null或者为0的child进行布局，然后按照交叉轴（ cross axis）的约束，对child进行调整；
• 按照不为空的flex值，将主轴方向上剩余的空间分成相应的几等分；
• 对上述步骤flex值不为空的child，在交叉轴方向进行调整，在主轴方向使用最大约束条件，让其占满步骤2所分得的空间；
• Flex交叉轴的范围取自子节点的最大交叉轴；
• 主轴Flex的值是由mainAxisSize属性决定的，其中MainAxisSize可以取max、min以及具体的value值；
• 每一个child的位置是由mainAxisAlignment以及crossAxisAlignment所决定。

属性

mainAxisAlignment

子组件沿着 Main 轴（在 Row 中是横轴）如何摆放，其实就是子组件排列方式，可选值有：
MainAxisAlignment.start：靠左排列。
MainAxisAlignment.end：靠右排列。
MainAxisAlignment.center：居中排列。
MainAxisAlignment.spaceAround：每个子组件左右间隔相等，也就是 margin 相等。
MainAxisAlignment.spaceBetween：两端对齐，也就是第一个子组件靠左，最后一个子组件靠右，剩余组件在中间平均分散排列。
MainAxisAlignment.spaceEvenly：每个子组件平均分散排列，也就是宽度相等。

mainAxisSize

Main 轴大小，可选值有：
MainAxisSize.max
MainAxisSize.min

crossAxisAlignment

chidren widget沿着 Cross 轴（在 Row 中是纵轴）摆放，其实就是子组件对齐方式，可选值有：
CrossAxisAlignment.start：子组件在 Row 中顶部对齐。
CrossAxisAlignment.end：子组件在 Row 中底部对齐。
CrossAxisAlignment.center：子组件在 Row 中居中对齐。
CrossAxisAlignment.stretch：拉伸填充满父布局。
CrossAxisAlignment.baseline：在 Row 组件中会报错。

textDirection

chidren widget水平排列顺序，可选值有：
TextDirection.ltr：从左往右开始排列。
TextDirection.rtl：从右往左开始排列。

verticalDirection

chidren widget垂直排列顺序，可选值有：
VerticalDirection.up
VerticalDirection.down

textBaseline

这里不做解释可以去看Baseline。

children

body: new Center(
          child: new Row(
            children: <Widget>[
              new IconButton(
                  icon: new Icon(Icons.menu),
                  tooltip: 'Button',
                  onPressed: null),
              new Expanded(
                child: new Text(
                  'yayayay',
                  style: TextStyle(
                      fontSize: 35.0,
                      background: Paint()..color = Colors.red[50]),
                ),
              ),
              new Expanded(
                child: new Text(
                  'aaaaaaaaaaaaa1',
                  style: TextStyle(
                      // 创建 paint 对象，设置 color 属性为想要的颜色
                      background: Paint()..color = Colors.red),
                ),
              ),
            ],
            //从右边往左边开始排列
            textDirection: TextDirection.rtl,
            //对齐字符底部的水平线 好像没卵用
            textBaseline: TextBaseline.alphabetic,
          ),
        ),

Baseline

关于字符的Baseline，可以看下下面这张图，这具体就涉及到了字体排版，感兴趣的同学可以自行了解。

1.2 布局行为
Baseline控件布局行为分为两种情况：

如果child有baseline，则根据child的baseline属性，调整child的位置；
如果child没有baseline，则根据child的bottom，来调整child的位置。