美文网首页Flutter
flutter可伸缩布局-Flexible和Expanded区别

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

作者: 感召的鳞 | 来源:发表于2021-03-01 10:53 被阅读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是允许更小的,如果实际内容没有那么大就按实际大小展示

    相关文章

      网友评论

        本文标题:flutter可伸缩布局-Flexible和Expanded区别

        本文链接:https://www.haomeiwen.com/subject/ivgofltx.html