Flutter开发技巧：深入理解Stack、IndexedStack与Positioned布局

一、概述

• Stack是Flutter框架中的一个布局组件，用于实现子组件的层叠显示，每个子组件根据其在列表中的顺序自下而上叠加。
• IndexedStack继承自Stack，但与Stack不同的是，它只显示索引指定的子组件，适用于需要动态切换显示内容的场景。
• Positioned是一个辅助组件，通常用作Stack的直接子组件，能够精确控制子组件在父容器中的位置。

二、Stack详解

2.1 基本概念

• 在Stack中，如果未明确设置fit或alignment属性，子组件的位置和大小将是不确定的，这为布局提供了更大的灵活性。

2.2 实例演示

示例代码

Stack(alignment: Alignment.topLeft, children: [Container(height: 200, width: 200, color: Colors.red), Container(height: 150, width: 150, color: Colors.orange), Container(height: 100, width: 100, color: Colors.blue)])

效果展示（绘制顺序）

三、IndexedStack详解

3.1 功能介绍

• IndexedStack组件可以看作是Stack的一个特例，它只显示由index参数指定的子组件，其余子组件将被隐藏。
• 通过调整index值，可以实现子组件之间的平滑过渡，常用于实现标签页切换等交互效果。

3.2 使用示例

代码示例

IndexedStack(index: 1, children: [Container(height: 200, width: 200, color: Colors.red), Positioned(left: 10, top: 10, height: 100, width: 100, child: Container(color: Colors.green))])

视觉效果

四、Positioned详解

4.1 组件特性

• Positioned组件主要用于配合Stack使用，通过设置left、top、right、bottom等属性，可以精确控制子组件在Stack内的位置。
• 当子组件超出Stack边界时，可以通过设置Stack的overflow属性来决定是否裁剪超出部分的内容。

4.2 实际应用

示例代码

Stack(children: [Container(height: 200, width: 200, color: Colors.red), Positioned(left: 10, top: 10, height: 100, width: 100, child: Container(color: Colors.green))])

展示效果

4.3 进阶说明

• 对于超出Stack范围的子组件，Stack的overflow属性提供了两种处理方式：Overflow.clip（默认值）表示裁剪超出部分，而Overflow.visible则让超出部分可见。