布局Layout

ZStackZStack

在同一平面上叠放多个视图，适合背景、浮层和徽标效果。Layers views on top of each other for backgrounds, overlays, and badges.

入门Beginner • 4 分钟4 min

更新于Updated Apr 22, 2026

视图层叠Layering Views

ZStack 通过层叠的方式组合视图，适合做卡片背景、加载态和角标。ZStack layers views, making it useful for card backgrounds, loading states, and badges.

角标卡片Badge Card

swift

1ZStack(alignment: .topTrailing) {
2    RoundedRectangle(cornerRadius: 24)
3        .fill(.blue.gradient)
4
5    Text("Pro")
6        .padding(.horizontal, 12)
7        .padding(.vertical, 6)
8        .background(.white.opacity(0.2), in: Capsule())
9        .padding(16)
10}

Pro