Flutter Stack 的布局规则

Stack 布局

Stack 是可以将视图根据children中子组件的顺序进行叠加的组件，根据子组件是否被Positioned包裹判断布局的方式

1. 存在无Positioned包裹的子组件

   Stack 首先会找到所有无位置的子组件，并向他们传入fit 属性所设置的布局约束（如，子组件不超过父级组件尺寸），允许他们在一定程度内选择自身的尺寸，并让他们依次回报最终尺寸结果，在得到全部无位置的子组件所确定的最终尺寸之后吗，Stack会把自身尺寸匹配到其，最大的子组件尺寸，在把其他子（小于或者等于最大尺寸的）组件，按照alignment设置的对齐方式摆放。如果没有设置对齐方式，则默认在（阅读方式从左到右的）左上角。一旦把无位置的子组件确认完毕，Stack自身的尺寸也确定完毕了，接下来就会处理有位置的组件，按照Positioned中的位置信息进行布局。

   在Stack没有设置尺寸的时候，决定Stack尺寸的是无位置的组件中的最大的尺寸，Positioned不会影响Stack的尺寸

Stack(
      children: [
        Container(color: Colors.red, width: 300, height: 300),
        Positioned(
            child: Container(color: Colors.green, width: 200, height: 200),
            right: 0),
        Container(color: Colors.blue, width: 100, height: 100),
      ],
    )

Simulator Screen Shot - iPhone 13 - 2022-06-29 at 14.52.58.png

2. 子类全部是Positioned包裹的子组件

   如果Stack中不存在无位置组件，即子组件全部都被Positioned包裹，Stack会将自身尺寸设置为父级布局约束所允许的最大尺寸，为对齐子组件创造条件。

   //这里通过Colors.amberAccent来显示Stack的尺寸
   Container(
         color: Colors.amberAccent,
         child: Stack(
           children: [
             Positioned(child: Container(color: Colors.red, width: 300, height: 300),left: 10,),
             Positioned(
                 child: Container(color: Colors.green, width: 200, height: 200),
                 right: 0),
             Positioned(child: Container(color: Colors.blue, width: 100, height: 100),bottom: 20,),
           ],
         ),
       );
   

Simulator Screen Shot - iPhone 13 - 2022-06-29 at 14.59.49.png

Stack 中fit的作用

Stack 的fit 属性用来控制Stack如何将自己的父级组件的尺寸约束传达给无位置组件，通过fit属性约束Stack中无位置组件的尺寸，默认值是 StackFie.loose. 如：Stack的父级组件要求Stack的尺寸是 200x200 ~ 500x500.在默认的StackFit.loose（宽松状态）下，Stack 可以运行其children在不违反父级约束的前提下，自由选择尺寸，即可在0x0~500x500的范围内任意选择。相反如何传入的fit是StackFit.expand（扩张状态）下，则会要求所有无位置children必须占满父级约束的最大空间，即尺寸必须为500x500,最后当传入的StackFit.passthrough（穿透状态）时，Stack会将自己父级组件的尺寸约束直接传递给子组件，即保留原有的200x200 ~ 500x500的约束。

StackFie.loose 和StackFit.passthrough的效果

Simulator Screen Shot - iPhone 13 - 2022-06-29 at 14.52.58.png

StackFit.expand的效果

Simulator Screen Shot - iPhone 13 - 2022-06-29 at 15.23.16.png