Stack一般與Positioned配合使用，在Flutter中我們稱之為層疊布局，顧名思義，它允許子Widget按照代碼順序堆疊起來。并可以利用其相關(guān)屬性調(diào)整其子Widget的位置?？慈缦麓a：

Container (
  width: 300,
  height: 300,
  color: Colors.blue,
  child: Stack(
    children: [
      Positioned(child: Text("頂部居左"), left: 18,),
      Positioned(child: Text("底部居左"), left: 18, bottom: 18,),
      Positioned(child: Text("頂部居右"), right: 18 top: 18,),
      Positioned(child: Text("底部居右"), right: 18, bottom: 18,),
    ],
  ),
);

運(yùn)行效果：

通過Positioned的left，top，right，bottom屬性；在Stack中絕對(duì)定位到相應(yīng)位置

• alignment屬性
  作用是確定未指定位置信息的元素的對(duì)齊方式，屬于AlignmentGeometry類型（包括Alignment和AlignmentDirectional、FractionalOffset，Alignment和AlignmentDirectional使用方式相同，區(qū)別是AlignmentDirectional可以適配不同的TextDirection（ltr，rtl））。如下代碼：

Container (
  width: 300,
  height: 300,
  color: Colors.blue,
  child: Stack(
    // 未被Positioned包括或沒有設(shè)置位置的Widget對(duì)齊方式
    alignment: Alignment.center,
    children: [
      Text("沒有Positioned"),
      Positioned(child: Text("居中")),
      Positioned(child: Text("頂部居左"), left: 18,),
      Positioned(child: Text("底部居左"), left: 18, bottom: 18,),
      Positioned(child: Text("頂部居右"), right: 18 top: 18,),
      Positioned(child: Text("底部居右"), right: 18, bottom: 18,),
    ],
  ),
);

運(yùn)行效果：

我們?cè)O(shè)置了alignment值為 Alignment.center。那么居左的Text，現(xiàn)在在垂直方向上居中了。沒有設(shè)置上下左右間距的居中Widget和沒有被Positioned包括的Text與相對(duì)于父Widget居中了。

• fit屬性
  在Stack中還有另外一個(gè)屬性fit，我們可以通過fit屬性來設(shè)置未指定位置的子Widget的空間大小。
  fit有三個(gè)值可選：

enum StackFit {
   // 使用子Widget 自身的大小
   loose,
   // 使子widget與stack大小一致
   expand,
   // stack的父widget的布局大小約束無修改的傳遞給 Stack 的子Widget
   passthrough,
}

我們來看一下：loose

Container(
  width: 300,
  height: 300,
  color: Colors.blue,
  child: Stack(
    fit: StackFit.loose,
    children: [
      Container(
          width: 200,
          height: 20,
          color: Colors.orange,
          child: Text("沒有Positioned")
      ),
      Positioned(child: Text("底部居左"), left: 18, bottom: 18,),
    ],
  ),
);

運(yùn)行效果：

我們發(fā)現(xiàn)設(shè)置fit: StackFit.loose后橘色區(qū)域與設(shè)置的寬高一致，我們看設(shè)置fit: StackFit.expand的效果：

• clipBehavior屬性
  有四個(gè)值：

enum Clip {
    // 不裁剪
    none,
    // 裁剪，不抗鋸齒
    hardEdge,
    // 裁剪，抗鋸齒
    antiAlias,
    // 裁剪，抗鋸齒
    antiAliasWithSaveLayer,
}

當(dāng)clipBehavior屬性為none時(shí)，超出部分不會(huì)被裁剪；為hardEdge，antiAlias，antiAliasWithSaveLayer時(shí)，超出部分會(huì)被裁剪。默認(rèn)是hardEdge。
代碼如下：

Container(
    width: 300,
    height: 300,
    color: Colors.blue,
    child: Stack(
      clipBehavior: Clip.none,
      children: const [
        Positioned(left: 250, bottom: 18,child: Text("我是一段很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)的文字"),),
      ],
    ),
  );

運(yùn)行效果：

屬性為hardEdge，antiAlias，antiAliasWithSaveLayer時(shí)，運(yùn)行效果：