Flutter中Flexible和Expanded区别

Flutter中Flexible和Expanded区别

在官网的介绍中感觉说的很模糊：

• Flexible：Flexible是一个控制Row、Column、Flex等子组件如何布局的组件，Flexible 组件可以控制 Row、Column、Flex 的子控件占满父组件，比如，Row 中有3个子组件，两边的宽是100，中间的占满剩余的空间
• Expanded：Expanded 继承字 Flexible，fit 参数固定为 FlexFit.tight，也就是说 Expanded 必须（强制）填满剩余空间

首先看下他们的构造：

Flexible

 const Flexible({
   
    Key? key,
    this.flex = 1,
    this.fit = FlexFit.loose,
    required Widget child,
  }) : super(key: key, child: child);

Expanded

  const Expanded({
   
    Key? key,
    int flex = 1,
    required Widget child,
  }) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);

构造中看出他们的 FlexFit 参数是不同的

FlexFit是个枚举类型

///
///  * [RenderFlex], the flex render object.
///  * [Column], [Row], and [Flex], the flex