SwiftUI固定高度卡片底部对齐布局问题求助

需求回顾 #

• 白色卡片高度为屏幕总高度的62%
• 卡片置于屏幕最底部
• 含两个按钮的HStack尽可能贴近底部
• 标题距卡片顶部边缘20pt
• 主文本ScrollView占据剩余全部空间

修改后的代码 #

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .bottom) {
            // 顶部背景图
            GeometryReader { gp in
                Image("wave")
                    .resizable()
                    .scaledToFill()
                    .frame(width: gp.size.width, height: gp.size.height * 0.38)
            }
            .ignoresSafeArea()
            
            // 底部白色卡片
            GeometryReader { gp in
                VStack(spacing: 0) {
                    // 标题：距顶部20pt
                    Text("Neque porro quisquam est qui dolorem")
                        .font(.largeTitle)
                        .multilineTextAlignment(.center)
                        .bold()
                        .padding(.top, 20)
                        .padding(.horizontal)
                    
                    // 主文本ScrollView：占据剩余空间
                    ScrollView {
                        VStack(spacing: 10) {
                            Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis sem vel placerat lobortis. Mauris accumsan pulvinar tellus non blandit. Fusce fermentum maximus arcu, eu facilisis mi. Vivamus consequat dapibus augue non feugiat. Vivamus sollicitudin tincidunt hendrerit. Pellentesque in accumsan orci.")
                            Text("In convallis bibendum nisi, in molestie lacus ultricies non. Nullam eget diam id est ultrices porta. Vestibulum pulvinar massa viverra, tincidunt nisi vel, luctus nibh. Suspendisse tincidunt, erat non fringilla auctor, lacus magna vulputate elit, a faucibus nibh justo sed elit. S")
                        }
                        .padding(.horizontal)
                    }
                    .font(.subheadline)
                    .frame(maxHeight: .infinity) // 填充剩余空间
                    
                    // 按钮行：贴近底部
                    HStack {
                        Button {
                        } label: {
                            Image(systemName: "square.and.arrow.up")
                            Text("Share")
                        }
                        .padding(10)
                        .background(RoundedRectangle(cornerRadius: 10).fill(Color("whitesand")))
                        .tint(.black)
                        
                        Spacer()
                        
                        Button {
                        } label: {
                            Image(systemName: "book")
                            Text("Read more")
                        }
                        .padding(10)
                        .background(RoundedRectangle(cornerRadius: 10).fill(.purple))
                        .tint(.white)
                    }
                    .padding()
                }
                .background(RoundedRectangle(cornerRadius: 25).fill(.white))
                .frame(width: gp.size.width, height: gp.size.height * 0.62) // 卡片高度62%屏幕高度
            }
        }
    }
}

关键调整说明 #

• 卡片定位优化：移除原代码手动设置的position(x:y:)，利用ZStack的.bottom对齐属性，结合卡片固定高度gp.size.height * 0.62，确保卡片精准停靠在屏幕底部。
• 标题间距控制：将标题的通用padding()拆分为.padding(.top, 20)和.padding(.horizontal)，严格保证标题与卡片顶部的20pt间距，同时保留水平方向的内边距提升可读性。
• ScrollView自适应填充：为ScrollView添加.frame(maxHeight: .infinity)，使其自动占据标题与按钮之间的所有剩余空间，实现内容区域的最大化利用。
• 按钮底部贴合：移除按钮行的固定高度设置，改用.padding()控制按钮与卡片底部的间距，借助VStack的垂直布局特性，让按钮自然停靠在卡片最下方。

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