鸿蒙跨端框架Flutter学习day 2、常用UI组件-层叠布局 Stack & Positioned

前言

在现实世界中，物体总是相互堆叠的：桌子上的水杯，墙壁上的画作。在 Flutter 的 UI 构建中，如果我们想要实现组件之间的"覆盖"效果，Stack（层叠布局） 就是不可或缺的神兵利器。

通过 Stack，我们可以打破 Column 和 Row 的线性约束，在 Z 轴（深度）上进行自由堆叠。结合 Positioned 绝对定位，开发者能够构建出如"带头像的封面"、"悬浮操作按钮"等极具视觉冲击力的界面。

[一、 Stack 的逻辑：后进者居上](#一、 Stack 的逻辑：后进者居上)
[二、 Positioned：空间的绝对支配者](#二、 Positioned：空间的绝对支配者)
[三、溢出处理：裁剪的艺术](#三、溢出处理：裁剪的艺术)
[四、实战解析：带标签的专辑封面](#四、实战解析：带标签的专辑封面)
[五、结语](#五、结语)

一、 Stack 的逻辑：后进者居上

Stack 的工作原理非常简单：它会按照代码的书写顺序，由底层向上依次渲染子组件。
底层组件 1
中层组件 2
顶层组件 3

非定位组件 ：会根据 alignment 属性进行对齐。
定位组件 ：通过 Positioned 包裹，脱离文档流进行定位。

二、 Positioned：空间的绝对支配者

当子组件被 Positioned 包裹后，它便拥有了 top, bottom, left, right 四个方向的绝对控制权。

属性	作用	说明
top / bottom	垂直定位	距离 Stack 顶/底部的像素值
left / right	水平定位	距离 Stack 左/右侧的像素值
width / height	强制尺寸	优先级高于子组件自身的尺寸设置

三、溢出处理：裁剪的艺术

如果子组件的尺寸超出了 Stack 的父容器，可以通过 clipBehavior 属性决定是直接裁剪 (Clip.hardEdge) 还是允许溢出显示 (Clip.none)。这在处理动态阴影或悬浮挂架时非常有用。

四、实战解析：带标签的专辑封面

在 lib/main.dart 的音乐播放器示例中，我们利用 Stack 在封面图右上角叠加了一个"LIVE"标签：

dart 复制代码

Stack(
  children: [
    Image.network(...), // 底层封面
    Positioned(         // 顶层标签
      top: 40,
      right: 40,
      child: Container(...),
    ),
  ],
)

五、结语

Stack 是 Flutter 布局中突破二维限制的关键。它赋予了 UI "深度"，让我们可以像搭建乐高积木一样，在屏幕上构建出层次分明、动静结合的视觉空间。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

鸿蒙跨端框架Flutter学习day 2、常用UI组件-层叠布局 Stack & Positioned

前言

目录

一、 Stack 的逻辑：后进者居上

二、 Positioned：空间的绝对支配者

三、 溢出处理：裁剪的艺术

四、 实战解析：带标签的专辑封面

五、 结语

三、溢出处理：裁剪的艺术

四、实战解析：带标签的专辑封面

五、结语