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挤到了最下面 这叫自适应