Flutter 基础知识 - Row Column

Row实现行布局
通过 Expanded 实现灵活布局
Row 默认等于父容器的宽度

可以理解为 Row 是前端的 flex 布局， Expanded 是 flex 布局中的 flex:1; 属性值

new Container(
    child: new Row(
        children: <Widget>[
            Expanded(
                child: new Container(
                    child: new Text('剩下都是我的')
                )
            ),
            
            new RaisedButton(
                onPressed: (){
                    print('object');
                },
                color: Colors.limeAccent,
                child: new Text('按钮'),
            ),
        ],
    ),
    width: 200.0,
    color: Colors.lightGreen
)

效果如图

Column 实现列布局

Center(
    // 宽度因子  当前Center的宽度是 子元素的 widthFactor 倍数
    widthFactor: 2.0,
    // 高度因子  当前Center的高度是 子元素的 heightFactor 倍数
    heightFactor: 1.0,
    child: new Container(
        child: Column(
            // Column 元素的横向对齐情况 
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
                Text('1'),
                Text('22222'),
                Text('3'),
            ],
        ),
        width: 200.0,
        height: 300.0,
        color: Colors.lightGreen
    ),
)