SwiftUI 解决Spacer失效 实现Stack上下对齐适配窗口支持滚动

你遇到的Spacer失效、布局不对齐的根本原因是：需要上下对齐的布局内容直接被放在了ScrollView的内容层级里。ScrollView的内容区是支持无限垂直延伸的，本身没有固定的高度边界，放在这个层级里的Spacer()没有可撑开的参照空间，自然没法把内容顶到容器的上下两端。同时原代码里部分frame参数写法不符合SwiftUI的约束规则，也会导致布局计算异常。

• 拆分布局层级：把「需要首屏撑满可视区域的上下对齐块」和「可滚动的附加内容块」按照垂直流的顺序放在ScrollView内部，不要把需要固定高度的布局和滚动内容混在同一个无边界的容器里。
• 给首屏布局块设置明确的高度阈值：给承载Spacer的ZStack/VStack区块加上minHeight: UIScreen.main.bounds.height的约束，让这个区块的最小高度刚好等于手机屏幕的可视高度，此时区块内部的VStack获得了明确的固定高度边界，Spacer()就可以正常撑开，实现顶部内容靠上、底部HStack靠下、中间留动态空白的效果。
• 修正无效的布局参数：原代码中.frame(width: .infinity, alignment: .bottom)的写法存在错误，SwiftUI的frame方法不支持直接把infinity作为固定宽高传入，需要替换为maxWidth: .infinity，才能让视图正确拉满可用宽度。
• 背景与渐变层的适配：把半透明渐变、背景色层放在首屏ZStack的底层，给这两层加上.edgesIgnoringSafeArea(.all)，让背景可以铺满整个首屏区块，不会被安全区裁剪，同时不会干扰内部文本、按钮的布局计算。
• 滚动交互的实现：等首屏布局块设置完成占满一屏的最小高度后，直接在这个区块的下方堆叠你需要展示的附加滚动内容即可，初始状态下可视区域刚好完全展示首屏的上下对齐布局，用户向下滑动时就会自然带出下方的附加内容，不需要额外写滚动监听逻辑。

ScrollView(.vertical, showsIndicators: false) {
    VStack(spacing: 0) {
        // 首屏占满高度的布局区块
        ZStack {
            // 动态背景层
            bgColors[weatherDescription]
            
            // 半透明渐变层
            LinearGradient(
                gradient: Gradient(colors: [Color(hex: 0x212121, alpha: 0.5), Color(hex: 0x212121, alpha: 0.5)]),
                startPoint: .top,
                endPoint: .bottom
            )
            .edgesIgnoringSafeArea(.all)
            
            // 内部上下对齐布局
            VStack(alignment: .leading, spacing: 0) {
                // 顶部文本组
                Text("Hello!")
                    .foregroundColor(.white)
                    .fontWeight(.heavy)
                    .font(.largeTitle)
                    .padding(.top, 20)
                    .padding(.bottom, 1)
                Text("Hello!")
                    .foregroundColor(.white)
                    .font(.title)
                    .padding(.bottom, 1)
                Text("Hello!")
                    .foregroundColor(.white)
                    .font(.title3)
                    .padding(.bottom, 20)
                
                // 中部左右分列的横向内容
                HStack(alignment: .center) {
                    Text("TEXT1")
                        .foregroundColor(.white)
                        .font(.title3)
                        .fontWeight(.bold)
                        .frame(maxWidth: .infinity, alignment: .leading)
                    Text("TEXT2")
                        .foregroundColor(.white)
                        .font(.title3)
                        .fontWeight(.bold)
                        .frame(maxWidth: .infinity, alignment: .trailing)
                }
                .frame(maxWidth: .infinity)

                // 弹性撑开的空白区域
                Spacer()

                // 底部大字号的横向布局
                HStack(alignment: .center, spacing: 30) {
                    Text("Text1")
                        .foregroundColor(.white)
                        .font(.system(size: 90))
                    Text("Text2")
                        .foregroundColor(.white)
                        .font(.caption)
                        .animation(.easeIn)
                }
                .frame(maxWidth: .infinity, alignment: .bottom)

            }
            .padding()
        }
        // 关键约束：让首屏区块高度匹配屏幕尺寸，给Spacer提供撑开边界
        .frame(minHeight: UIScreen.main.bounds.height)
        .edgesIgnoringSafeArea(.top)

        // 下方需滚动展示的附加内容，直接按顺序堆叠在此处即可
        AdditionalScrollContentView()
    }
}

• 不要把Spacer直接放在ScrollView的直接子层级，无边界容器里的Spacer不会产生任何布局撑开效果，必须把Spacer包裹在有明确高度约束的父容器内部才能生效。
• 如果需要精准适配不同设备的底部安全区，可以把固定屏幕高度的计算替换为通过GeometryReader获取的容器可用高度，避免出现底部内容被Home指示条遮挡的问题。

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