第 8 课：Stack叠放界面

• 日期：2026-09-08
• 课程序号：第 8 课
• 知识点：Stack 与 Positioned

用途

把状态标签叠放在课程卡片右上角。

核心概念

Stack 按子组件顺序叠放内容，Positioned 用相对边距确定子组件在 Stack 中的位置。

最小代码或操作示例

Stack(
  children: [
    const SizedBox(width: 180, height: 80, child: Card(child: Text('Flutter'))),
    const Positioned(top: 8, right: 8, child: Text('学习中')),
  ],
)

3～5 分钟练习

把标签移到左下角，并保留 8 像素边距。

参考答案

把 top、right 改为 bottom: 8、left: 8。

与上一课的联系

上一课用 Column 纵向排列；本课让两个组件在同一平面上叠放。