Flutter学习第十一课：组件之Flexible & Expanded

Flutter学习第十一课：组件之Flexible & Expanded

一：组件之Flexible & Expanded
用于控制Row、Column 、Flex的子控件伸缩布局的
Flexible 小部件必须是 Row、Column 或 Flex 的后代，并且从 Flexible 小部件到其封闭的 Row、Column 或 Flex 的路径必须仅包含 StatelessWidget 或 StatefulWidget（而不是其他类型的小部件，如 RenderObjectWidget）
。

//Flexible组件
 const Flexible({
 Key? key,
 this.flex = 1,
 this.fit = FlexFit.loose,
 required Widget child,
 }) : super(key: key, child: child);
//Expanded组件是Flexible组件的子类
const Expanded({
 Key? key,
 int flex = 1,
 required Widget child,
 }) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);

2.Expanded
Expanded 继承于Flexible ,
Expanded是默认把属性 fit 设置为:FlexFit.tight且不可修改,
Expanded的flex属性默认等于1,flex属性可修改.
在Row内的所有子组件,全部使用Expanded嵌套的话,就可以解决横向越界的问题.系统会默认把Row的所有子组件挤压在父类宽度范围内;

栗子：

 return Scaffold(
 body: Center(
 child: Row(
 /*
 * 在一个横向排布的组件Row中放入两个Flexible组件
 * Flexible 内嵌套了一个child:Container,并且制定宽高,
 * 两个Flexible组件加上一个包裹Text组件的Container,总宽度不占满一行
 * 因为两个Flexible都设置了fit: FlexFit.tight值,
 * 则系统会为Container.Text组件分配完空间后将剩余空间为两个Flexible按比例分配
 * flex:2 , flex:1 , 将剩余空间均分为3等份,
 * 第一个Flexible 占比两份 第二个 Flexible 占比 1分;
 * */
 mainAxisSize: MainAxisSize.max,
 children: [
 Flexible(
 //这个属性会影响到自动分配尺寸
 //FlexFit.loose 包裹子部件，子部件最多和可用空间一样大，但允许最小
 // FlexFit.tight 扩展子部件，子部件强制填满整个可用空间
 fit: FlexFit.loose,
 //fit: FlexFit.tight,
 //决定剩余空间的分配比例
 flex: 2,
 child: Container(
 width: 100,
 height: 60,
 color: Colors.red,
 alignment: Alignment.center,
 )),
 Flexible(
 //这个属性会影响到自动分配尺寸
 fit: FlexFit.loose,
 //fit: FlexFit.tight,
 //决定剩余空间的分配比例
 flex: 1,
 child: Container(
 width: 10,
 height: 100,
 color: Colors.orange,
 alignment: Alignment.center,
 )),
 Container(
 color: Colors.purple,
 child: Text("Hello World"),
 )
 ],
 )),
 );

如果 fit: FlexFit.loose换成fit: FlexFit.tight