Flutter 基础控件之 Row 横向布局 Column 纵向布局

class MyRowWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
  child: new Row(
    children: <Widget>[
      //Expanded 自适应
      Expanded(
        child: new RaisedButton(
          onPressed: () {},
          color: Colors.lightBlue,
          child: new Text('蓝色按钮'),
        ),
      ),
      Expanded(
        child: new RaisedButton(
          onPressed: () {},
          color: Colors.pink,
          child: new Text('红色按钮'),
        ),
      ),
      Expanded(
        child: new RaisedButton(
          onPressed: () {},
          color: Colors.orange,
          child: new Text('橙色按钮'),
        ),
      ),
      Expanded(
        child: new RaisedButton(
          onPressed: () {},
          color: Colors.purple,
          child: new Text('紫色按钮'),
        ),
      ),
    ],
  ),
);
}
}

效果图

Expanded 是自适应属性 会充满屏幕

Column 纵向布局

  // 注意事项: Expanded 这个是灵活的  具有充满全屏的作用
      class MyColumnWidget extends StatelessWidget {
  @override
Widget build(BuildContext context) {
return Center(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center, //横向对齐方式
    mainAxisAlignment: MainAxisAlignment.center, //纵向对齐方式
    children: <Widget>[
      Text('我们的大中华啊'),
      Expanded(
        child: Text('好大的一个家'),
      ),
      Text('那个中国,那个永远'),
    ],
  ),
);
}
}

效果图

因为中间那个Text使用了 Expanded 所以 他把下面的Text挤到了最下面 这叫自适应