「这是我参与11月更文应战的第7天，活动详情检查：2021最终一次更文应战」

层叠布局和Web中的肯定定位，以及iOS中的Frame布局是相似的，子部件能够根据间隔父部件资格角的方位来确认本身的方位；其允许子部件按照代码中声明(增加)的次序堆叠起来。

通常情况下，在Flutter中咱们运用Stack和Positioned两个部件组合运用来完成肯定定位。Stack来完成足部件堆叠起来，而Positioned用来根据Stack的四个角来确认子部件的具体方位；

Stack

在Flutter中，Stack界说如下：

  Stack({
    Key? key,
    this.alignment = AlignmentDirectional.topStart,
    this.textDirection,
    this.fit = StackFit.loose,
    this.overflow = Overflow.clip,
    this.clipBehavior = Clip.hardEdge,
    List<Widget> children = const <Widget>[],
  })

• alignment：此参数表明假如咱们没有定位子部件或许子部件只进行了部分定位时的对齐方法；
  • 没有定位：没有运用Positioned进行定位；
  • 部分定位：特指没有在某一个轴上定位：
    • left，right为横轴；top，bottom为纵轴；只要包括某个轴上的一个定位特点，那么就算在该轴上有定位
• textDirection：和Row的textDirection功能一样，都用于确认alignment对齐时的参考系；
  • textDirection值为TextDirection.ltr，则alignment的start表明左面，end表明右边；也便是从左到右的次序；
  • textDirection值为TextDirection.rtl，则alignment的start表明右边，end表明左面；也便是从右到左的次序；
• fix：用来确认没有定位的子部件怎么适应Stack的巨细；
  • StackFit.loose：运用子部件的巨细；
  • StackFit.expand：拉伸到Stack的巨细；
• overflow：用来决议怎么显现超出了Stack显现区域的子部件；
  • Overflow.clip：子部件超出Stack显现区域的那部分会被裁剪，或许说躲藏；
  • Overflow.visible：超出显现区域的那部分不会被裁剪；

Positioned

Positioned界说如下：

  const Positioned({
    Key? key,
    this.left,
    this.top,
    this.right,
    this.bottom,
    this.width,
    this.height,
    required Widget child,
  })

• left：间隔Stack左面的间隔；
• top：间隔Stack上边的间隔；
• right：间隔Stack右边的间隔；
• bottom：间隔Stack下边的间隔；
• width：指定当时需求定位的部件的宽度；
• height：指定当时需求定位的部件的高度；

需求留意的是：**Positioned**的**width**和**height**与其它当地的含义不同，在**Positioned**中**width**和**height**是用来配合**left**，**top**，**right**和**bottom**来定位部件的；比如在水平方向上，咱们只能指定**left**，**right**和**width**三个特点中的两个特点，由于剩余的那个会根据指定的两个特点计算得到。举个例子：当咱们指定了**left**和**width**之后，那么**right**的值就会自动计算得到(**left**+**width**)。一同指定三个特点则会报错，垂直方向同理；

Stack布局

咱们创建一个Stack布局，在里边放三个Container，先来看一下默认的作用：

能够看到，先创建的部件在最基层，之后创建的部件，从里到外以此叠放在一同； ​

接下来，咱们Positioned来修正上边Container部件的方位：

将蓝色Container间隔最底层Container左面10像素，赤色Container间隔右边10个像素； ​

同样的作用，咱们运用margin也能完成：

需求留意的是margin是相对于父视图而言的； ​

那么，假如咱们一同设置了Positioned的right和margin的话，成果怎么呢：

最终成果：一同设置Positioned的right和margin时，最终方位由margin决议； ​

假如咱们只考虑部件的方位，不考虑其与父部件的联系的话，这时咱们一般推荐运用Positioned，否则运用margin；需求留意的是，假如外部部件是灵敏布局的话，那么margin或许将会影响外部部件的巨细； ​

AspectRatio

除了Positioned之外，在Stack部件中，咱们还常常运用一个宽高比组件AspectRatio，其界说如下：

  const AspectRatio({
    Key? key,
    required this.aspectRatio,
    Widget? child,
  })

• aspectRatio：必传特点，宽高比；

​

咱们先来看一段代码：

咱们的蓝色区域为宽100，高500的矩形区域，这个时分咱们运用AspectRatio来进行宽高比的设置：

咱们发现，经过AspectRatio设置了宽高比之后，蓝色区域并没有发生改变，这是由于，咱们将蓝色区域的height和width都给了固定的值，此时AspectRatio将不会收效，咱们将高度去掉：

AspectRatio设置的宽高比收效了，蓝色区域的高度发生了改变，并且是宽度的2倍； ​

AspectRatio影响的是其父部件，父部件只需求设置宽高中的一个特点即可；AspectRatio的child特点一般不再赋值；由于child赋值的部件不受AspectRatio约束，其巨细有AspectRatio影响的父部件决议；