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);

属性	类型	可选?	作用
fit	FlexFit	命名可选	决定是否局域布局剩余的空间分配给该组件
flex	int	命名可选	分配的比例
child	Widget	@required	Flexible内部必须嵌套一个子组件才能使用

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