SwiftUI：使用ZStack时垂直ScrollView完全无法滚动的问题

问题根源 #

• 用.offset时，ZStack的布局高度只会等于单个Rectangle的高度（300），ScrollView检测不到内容超出可视范围，自然无法滚动——offset只是改变视图的绘制位置，不会影响父容器的尺寸。
• 换成.padding(.top)后，ZStack高度虽然能累加，但每个Rectangle的固定frame加上padding，会导致最后一个元素底部出现多余空白，或者叠加逻辑混乱引发显示问题。

可行解决方案 #

方案1：给ZStack设置明确总高度（保留ZStack+offset写法）

手动计算ZStack的总高度，让ScrollView识别到可滚动的范围：

ScrollView{
    ZStack {
        ForEach(Array(bookTags.enumerated()), id: \.element.id) { index, tag in
            Rectangle()
                .frame(height: 300)
                .edgesIgnoringSafeArea(.bottom)
                .foregroundColor(Color(hex: tag.color))
                .overlay {
                    VStack {
                        HStack {
                            Text(tag.name)
                                .font(.system(size: 30, weight: .bold, design: .rounded))
                                .foregroundColor(.white)
                            Spacer()
                        }
                        .padding(.horizontal, 30)
                        Spacer()
                    }
                    .padding(.top, 30)
                }
                .offset(y: index != 0 ? CGFloat(index) * 75 : 0)
        }
    }
    // 总高度 = 第一个元素高度 + 后续每个元素的偏移量
    .frame(height: 300 + CGFloat(max(0, bookTags.count - 1)) * 75)
}

方案2：改用VStack+负间距（更符合SwiftUI布局逻辑）

用负间距实现元素层叠，让SwiftUI自动处理布局，避免手动计算高度的麻烦：

ScrollView{
    VStack(spacing: -225) { // 300-75=225，负间距让元素向上叠加75
        ForEach(bookTags, id: \.id) { tag in
            Rectangle()
                .frame(height: 300)
                .edgesIgnoringSafeArea(.bottom)
                .foregroundColor(Color(hex: tag.color))
                .overlay {
                    VStack {
                        HStack {
                            Text(tag.name)
                                .font(.system(size: 30, weight: .bold, design: .rounded))
                                .foregroundColor(.white)
                            Spacer()
                        }
                        .padding(.horizontal, 30)
                        Spacer()
                    }
                    .padding(.top, 30)
                }
        }
    }
}

方案优势说明 #

方案2更推荐，因为它遵循SwiftUI的原生布局规则，不需要手动维护高度计算，元素数量变化时也能自动适配，彻底避免padding带来的显示异常问题。

内容的提问来源于stack exchange，提问作者N G