Expanded組件是flutter中使用率很高的一個(gè)組件克懊，它可以動(dòng)態(tài)調(diào)整child組件沿主軸的尺寸衡载，比如填充剩余空間烈菌，比如設(shè)置尺寸比例抗蠢。它常常和Row或Column組合起來使用。
構(gòu)造函數(shù)
const Expanded({
Key? key,
? int flex =1,
? required Widget child,
}) :super(key: key, flex: flex, fit: FlexFit.tight, child: child);
它除了child之外亦鳞，有一個(gè)flex屬性比較常用馍忽。flex表示彈性系數(shù)，默認(rèn)是1燕差。
結(jié)合Row來實(shí)驗(yàn)Expanded的用法
1.橫向平分三等份布局遭笋，設(shè)置右邊框? 漸變顏色
代碼如下：
Widget_rowLine(){
return Row(
children: [
Expanded(
child:Container(
//設(shè)置右邊框?yàn)榘咨?/p>
? ? ? ? ? decoration:BoxDecoration(
//線行漸變
? ? ? ? ? ? ? gradient:LinearGradient(colors: [hotelstartColor, hotelendColor]),
? ? ? ? ? ? ? border:Border(right:BorderSide(color: Colors.white,width:5))
),
? ? ? ? ? height:100,
? ? ? ? ),
? ? ? ),
? ? ? Expanded(
child:Container(
//設(shè)置右邊框?yàn)榘咨?/p>
? ? ? ? ? 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 平分，設(shè)置右邊框徒探，設(shè)置漸變
代碼如下：
Widget_rowFixLine(){
return Row(
children: [
Expanded(
flex:2,
? ? ? ? child:Container(
//設(shè)置右邊框?yàn)榘咨?/p>
? ? ? ? ? decoration:BoxDecoration(
//線行漸變
? ? ? ? ? ? ? gradient:LinearGradient(colors: [hotelstartColor, hotelendColor]),
? ? ? ? ? ? ? border:Border(right:BorderSide(color: Colors.white,width:5))
),
? ? ? ? ? height:100,
? ? ? ? ),
? ? ? ),
? ? ? Expanded(
child:Container(
//設(shè)置右邊框?yàn)榘咨?/p>
? ? ? ? ? decoration:BoxDecoration(
color: Colors.yellow,
? ? ? ? ? ? ? border:Border(right:BorderSide(color: Colors.white,width:5))
),
? ? ? ? ? height:100,
? ? ? ? ),
? ? ? ),
? ? ? Expanded(
child:Container(
height:100,
? ? ? ? ? color: Colors.red,
? ? ? ? ),
? ? ? )
],
? );
}
