1. 引言

        在 Flutter 中，Stack 是一个用于层叠布局的组件，允许多个子组件按照 Z 轴（深度方向）进行排列。Stack 适用于构建重叠 UI，如头像叠加、卡片阴影、引导页等。本文将介绍 Stack 的基本用法、主要属性及常见的自定义技巧。

2. Stack 的基本用法

    Stack 通过 children 传入多个子组件，默认按顺序堆叠。

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

        此示例中，蓝色矩形作为底层背景，红色矩形使用 Positioned 偏移叠加。

3. 主要属性

属性	说明
alignment	控制子组件的对齐方式，如 Alignment.center
clipBehavior	处理超出 Stack 边界的子组件
fit	调整 Stack 的大小适应子组件
textDirection	设置文本方向，影响对齐方式

示例：

Stack(
  alignment: Alignment.center,
  clipBehavior: Clip.none,
  children: [
    Icon(Icons.star, size: 100, color: Colors.yellow),
    Icon(Icons.favorite, size: 50, color: Colors.red),
  ],
)

4. 自定义 Stack 布局

4.1 叠加图片和文本

Stack(
  children: [
    Image.asset('assets/background.jpg'),
    Positioned(
      bottom: 10,
      right: 10,
      child: Text(
        '叠加文本',
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    ),
  ],
)

4.2 使用 IndexedStack 控制可见子组件

IndexedStack(
  index: 1, // 仅显示第二个子组件
  children: [
    Text('页面 1'),
    Text('页面 2'),
  ],
)

5. 结论

    Stack 组件在 Flutter 布局系统中非常强大，适用于构建层叠 UI。结合 Positioned、alignment 及 IndexedStack，可以实现更灵活的布局效果。熟练掌握 Stack，有助于提升 Flutter 界面的设计能力。

相关推荐

Flutter PopupMenuButton 详解-CSDN博客文章浏览阅读1.5k次，点赞61次，收藏52次。PopupMenuButton 是一个用于创建弹出菜单的组件，适用于提供上下文操作、设置选项等功能。用户点击按钮后，会弹出一个菜单列表，供用户选择。本文将介绍 PopupMenuButton 的基本用法、主要属性及自定义样式。_flutter popupmenubuttonhttps://shuaici.blog.csdn.net/article/details/146069960Flutter PopupMenuButton 详解-CSDN博客文章浏览阅读1.5k次，点赞61次，收藏52次。PopupMenuButton 是一个用于创建弹出菜单的组件，适用于提供上下文操作、设置选项等功能。用户点击按钮后，会弹出一个菜单列表，供用户选择。本文将介绍 PopupMenuButton 的基本用法、主要属性及自定义样式。_flutter popupmenubuttonhttps://shuaici.blog.csdn.net/article/details/146069960