class MyRowWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: new Row(
children: <Widget>[
//Expanded 自適應(yīng)
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 是自適應(yīng)屬性 會充滿屏幕
Column 縱向布局
// 注意事項: Expanded 這個是靈活的 具有充滿全屏的作用
class MyColumnWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center, //橫向?qū)R方式
mainAxisAlignment: MainAxisAlignment.center, //縱向?qū)R方式
children: <Widget>[
Text('我們的大中華啊'),
Expanded(
child: Text('好大的一個家'),
),
Text('那個中國,那個永遠'),
],
),
);
}
}
效果圖
因為中間那個Text使用了 Expanded 所以 他把下面的Text擠到了最下面 這叫自適應(yīng)
