Flutter之Flexible组件
2019-02-22 本文已影响0人
习惯了_就好
/**
* Flexible组件可以使Row、Column、Flex等子组件在主轴方向有填充可用空间的能力，但是不强制子组件填充可用空间。
* Expanded组件可以使Row、Column、Flex等子组件在其主轴方向上展开并填充可用空间，是强制子组件填充可用空间。
const Flexible({
Key key,
this.flex = 1,//组件占据剩余空间的比例
this.fit = FlexFit.loose,
@required Widget child,
})
*/
body: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
margin: EdgeInsets.all(5.0),
child: Text("Flexible1"),
color: Colors.blue,
),
Flexible(
flex: 10,
child: Container(
margin: EdgeInsets.all(5.0),
child: Text("Flexible"),
color: Colors.blue,
),
),
Flexible(
flex: 10,
child: Container(
margin: EdgeInsets.all(5.0),
child: Text("Flexible"),
color: Colors.blue,
),
),
Flexible(
flex: 10,
child: Container(
margin: EdgeInsets.all(5.0),
child: Text("Flexible"),
color: Colors.blue,
),
),
Container(
margin: EdgeInsets.all(5.0),
child: Text("Flexible1"),
color: Colors.blue,
),
],
),
Row(
children: <Widget>[
Container(
margin: EdgeInsets.all(5.0),
child: Text("Flexible1"),
color: Colors.blue,
),
Flexible(
flex: 1,
child: Container(
child: Text("Flexible2"),
color: Colors.blue,
),
),
Container(
margin: EdgeInsets.all(5.0),
child: Text("Flexible3"),
color: Colors.blue,
),
],
),
Row(
children: <Widget>[
Container(
margin: EdgeInsets.all(5.0),
child: Text("Expanded1"),
color: Colors.blue,
),
Expanded(
flex: 1,
child: Container(
child: Text("Expanded2"),
color: Colors.blue,
),
),
Container(
margin: EdgeInsets.all(5.0),
child: Text("Expanded3"),
color: Colors.blue,
)
],
),
Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.all(5.0),
child: Text("Expanded"),
color: Colors.blue,
),
),
Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.all(5.0),
child: Text("Expanded"),
color: Colors.blue,
),
),
Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.all(5.0),
child: Text("Expanded"),
color: Colors.blue,
),
),
],
)
],
),
