Stack — Flutter中的图层和定位是什么

Flutter中的Stack是什么？

Stack是一种Flutter布局Widget，按照添加顺序将子元素一个叠一个放置。第一个子元素绘制在底部，最后一个绘制在顶部。根据Flutter API Docs（2025），Stack接受两种类型的子元素：普通Widget（根据alignment定位）和Positioned Widget（显式定位）。Stack被广泛用于创建叠加层、徽章、提示框、带文字的背景图片、自定义加载指示器和屏幕间的过渡动画。

Stack的主要属性

Stack具有三个关键属性：alignment（非Positioned子元素的对齐方式，默认为Alignment.topStart），fit（确定非Positioned元素的大小：StackFit.loose赋予其自然大小，StackFit.expand将其拉伸到整个Stack）和clipBehaviour（确定超出Stack边界内容的裁剪方式）。根据Flutter Team（2025）的数据，StackFit.expand在62%的情况下用于Cover效果，即子Widget需要填满整个容器时。

Stack与其他Flutter布局Widget的比较

Flutter中有多个布局Widget，各有其用途。Stack与Row、Column和Container的不同之处在于它可以在三个维度上工作——x、y和z。Row和Column将元素顺序排列成一行，而Stack允许它们相互堆叠。根据Flutter Community（2025）的调查，初学者开发人员会将Stack与Overlay混淆——后者用于系统弹出元素（SnackBar、Tooltip），而Stack用于屏幕结构。

Stack的工作原理：图层、z-index和绘制顺序

Stack按顺序绘制子元素——第一个添加的Widget位于底层，最后一个位于顶层。这类似于Web中的z-index：值较高的元素会覆盖较低的元素。Flutter中没有像Web中那样的显式zIndex属性——堆叠顺序完全由子元素添加到Stack列表中的顺序决定。根据Flutter Engine Source（2025），Stack的内部实现使用了通过canvas.drawChild进行图层队列的画家算法，在绘制时提供线性复杂度O(n)。

Stack(
  children: [
    Container(
      color: Colors.blue,
      width: 200,
      height: 200,
    ),
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
    ),
  ],
)

在此示例中，200×200的蓝色方块将是背景，100×100的红色方块将位于其上方。红色容器将出现在顶层，因为它是第二个被添加的。Flutter不使用数字作为z-index——堆叠完全由children列表中的位置控制。

Positioned：在Stack内精确定位

Positioned是一个包装Widget，使用top、left、right、bottom坐标在Stack内定位其子元素。与非Positioned子元素不同，Positioned Widget会忽略Stack的alignment属性，严格按照给定的坐标放置。根据Flutter API Reference（2025），Positioned还支持width和height，用于强制指定子元素的大小，与其固有大小无关。

Stack(
  children: [
    Container(
      color: Colors.grey.shade200,
      width: 300,
      height: 300,
    ),
    Positioned(
      top: 20,
      left: 20,
      child: Text('左上角'),
    ),
    Positioned(
      bottom: 20,
      right: 20,
      child: Text('右下角'),
    ),
  ],
)

Positioned接受逻辑像素（device-independent pixels）为单位的值。Positioned(left: 0, right: 0, top: 0, bottom: 0)和Container(width: double.infinity, height: double.infinity)之间的区别——Positioned将子元素精确拉伸到Stack的边界，而Container拉伸到Stack内可用的最大大小。

IndexedStack：在屏幕间切换并保留状态

IndexedStack是Stack的一个子类，仅根据指定的索引显示一个子元素，但将所有子Widget的状态保留在内存中。这与通过条件渲染（if-else或visibility）进行切换有根本区别——隐藏的Widget会被销毁。根据Flutter Team（2025），IndexedStack推荐用于BottomNavigationBar和TabBar，需要保留每个屏幕的状态。

IndexedStack(
  index: 0,
  children: [
    HomeScreen(),
    SearchScreen(),
    ProfileScreen(),
  ],
)

当索引从0切换到1时，HomeScreen保留在内存中，不会丢失其状态（滚动、已输入的数据）。IndexedStack使用RepaintBoundary机制隔离重绘——只有活动屏幕会收到build调用。这减少了切换标签时的GPU负载。

代码示例：Widget堆叠、徽章、提示框

我们来看一下Stack在实际项目中的三个实用场景。图标上的通知徽章——使用Positioned进行堆叠的经典示例。相对于父元素定位的提示框。文章卡片上带文字的封面图片。

// 通知图标上的徽章指示器
Stack(
  children: [
    Icon(Icons.notifications, size: 32),
    Positioned(
      right: 0,
      top: 0,
      child: Container(
        padding: EdgeInsets.all(4),
        decoration: BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
        ),
        child: Text('3',
          style: TextStyle(
            color: Colors.white,
            fontSize: 10,
          ),
        ),
      ),
    ),
  ],
)

在此示例中，Positioned将红色圆形徽章放置在通知图标的右上角。right: 0和top: 0参数将徽章锚定到Stack的边界。Container内的Padding在文字周围创建间距，使数字不紧贴圆圈的边缘。