Stack一般與Positioned配合使用渺杉，在Flutter中我們稱之為層疊布局，顧名思義琴儿，它允許子Widget按照代碼順序堆疊起來(lái)孕索。并可以利用其相關(guān)屬性調(diào)整其子Widget的位置∪停看如下代碼：

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)行效果：

通過(guò)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，我們可以通過(guò)fit屬性來(lái)設(shè)置未指定位置的子Widget的空間大小伍掀。
  fit有三個(gè)值可選：

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

我們來(lái)看一下：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)行效果：