Expanded组件是flutter中使用率很高的一个组件，它可以动态调整child组件沿主轴的尺寸，比如填充剩余空间，比如设置尺寸比例。它常常和Row或Column组合起来使用。
构造函数
const Expanded({
Key? key,
int flex =1,
required Widget child,
}) :super(key: key, flex: flex, fit: FlexFit.tight, child: child);
它除了child之外，有一个flex属性比较常用。flex表示弹性系数，默认是1。
结合Row来实验Expanded的用法
1.横向平分三等份布局，设置右边框 渐变颜色
如图所示
代码如下：
Widget_rowLine(){
return Row(
children: [
Expanded(
child:Container(
//设置右边框为白色
decoration:BoxDecoration(
//线行渐变
gradient:LinearGradient(colors: [hotelstartColor, hotelendColor]),
border:Border(right:BorderSide(color: Colors.white,width:5))
),
height:100,
),
),
Expanded(
child:Container(
//设置右边框为白色
decoration:BoxDecoration(
color: Colors.yellow,
border:Border(right:BorderSide(color: Colors.white,width:5))
),
height:100,
),
),
Expanded(
child:Container(
height:100,
color: Colors.red,
),
)
],
);
}
2.横向2:1:1 平分，设置右边框，设置渐变
代码如下：
Widget_rowFixLine(){
return Row(
children: [
Expanded(
flex:2,
child:Container(
//设置右边框为白色
decoration:BoxDecoration(
//线行渐变
gradient:LinearGradient(colors: [hotelstartColor, hotelendColor]),
border:Border(right:BorderSide(color: Colors.white,width:5))
),
height:100,
),
),
Expanded(
child:Container(
//设置右边框为白色
decoration:BoxDecoration(
color: Colors.yellow,
border:Border(right:BorderSide(color: Colors.white,width:5))
),
height:100,
),
),
Expanded(
child:Container(
height:100,
color: Colors.red,
),
)
],
);
}
网友评论