Flutter

flutter可伸缩布局-Flexible和Expanded区别

2021-03-01  本文已影响0人  感召的鳞

1.Expanded实际上是继承自Flexible

class Expanded extends Flexible {
  /// Creates a widget that expands a child of a [Row], [Column], or [Flex]
  /// so that the child fills the available space along the flex widget's
  /// main axis.
  const Expanded({
    Key key,
    int flex = 1,
    @required Widget child,
  }) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);
}

2.关键区别在于fit的值不同,Expanded使用的是FlexFit.tight,Flexible默认使用的是 FlexFit.loose
看下这两个值的区别

/// How the child is inscribed into the available space.
///
/// See also:
///
///  * [RenderFlex], the flex render object.
///  * [Column], [Row], and [Flex], the flex widgets.
///  * [Expanded], the widget equivalent of [tight].
///  * [Flexible], the widget equivalent of [loose].
enum FlexFit {
  /// The child is forced to fill the available space.
  ///
  /// The [Expanded] widget assigns this kind of [FlexFit] to its child.
  tight,

  /// The child can be at most as large as the available space (but is
  /// allowed to be smaller).
  ///
  /// The [Flexible] widget assigns this kind of [FlexFit] to its child.
  loose,
}

主要区别在于loose中的这句话

but is allowed to be smaller
所以Expanded是会强制占剩余空间、Flexible是允许更小的,如果实际内容没有那么大就按实际大小展示

上一篇 下一篇

猜你喜欢

热点阅读