SwiftUI中如何让VStack占满屏幕剩余高度将褐灰色块推至底部

问题原因 #

ScrollView的内容容器默认高度仅适配内部内容的总高度，不会自动撑满ScrollView的可视区域高度，你直接在内部加Spacer没有可拉伸的空闲空间，因此无法生效。

具体修改步骤 #

1. 把ScrollView内所有现有视图包裹到一个外层VStack中，给这个外层VStack设置frame(maxHeight: .infinity)，让它撑满ScrollView的整个可视高度
2. 在图片展示区块和褐灰色（taupe）区块之间添加Spacer()，即可把taupe区块推到屏幕底部

修改后的完整代码 #

ZStack {
    Color.white
    ScrollView  {
        // 新增外层VStack，撑满ScrollView高度
        VStack(spacing: 0) {
            VStack {
                KFImage(URL(string: bottle?.image ?? "Test"))
                    .resizable()
                    .frame(width: 200, height: 300)
                    .padding([.top], 50)
            }
            .padding([.bottom], 40)
            
            // 新增Spacer，撑开中间区域
            Spacer()
            
            VStack(alignment: .leading) {
                HStack {
                    Text(bottle?.name ?? "Test")
                        .font(.title2)
                        .fontWeight(.semibold)
                    Spacer()
                    SpiritTag(spirit: bottle?.varietal ?? "Other")
                }
                if((bottle?.brand_id) != nil) {
                    NavigationLink(destination: BrandView(brandId: bottle?.brand_id ?? "1")) {
                        HStack {
                            KFImage(URL(string: brand?.logo ?? "Test"))
                             .resizable()
                            .frame(width: 48, height: 48)
                                .cornerRadius(10)
                            VStack(alignment: .leading) {
                                Text("\(brand?.name ?? "Unknown")")
                                    .fontWeight(.bold)
                                Text("\(brand?.bottle_count ?? 0) bottles")
                                    .font(.caption)
                            }
                        }
                    }
                }
                
                HStack {
                    Button(action: {
                      self.show_modal = true
                    }) {
                        Text("Add to list")
                    }
                    .frame(height: 15)
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(Color("Onyx"))
                    .foregroundColor(Color.white)
                    .cornerRadius(10)
                    .sheet(isPresented: self.$show_modal) {
                        CollectionAddition(userId: session.auth.currentUser!.uid, bottleId: bottle!.id)
                    }
                }
                VStack(alignment: .leading) {
                    Text("Information")
                        .font(.title3)
                        .fontWeight(.semibold).padding([.bottom], 1)
                    Text(bottle?.information ?? "")
                        .fixedSize(horizontal: false, vertical: true)
                }.padding([.bottom])
            }
            .padding()
            .padding(.top)
            .background(Color("Tope"))
            .cornerRadius(30, corners: [.topLeft, .topRight])
            .offset(x: 0, y: -30.0)
        }
        .frame(maxHeight: .infinity)
    }
    .edgesIgnoringSafeArea(.top)
}

补充说明 #

如果后续taupe区块的内容长度增加，超过了屏幕剩余高度，ScrollView会自动适配内容总高度，支持正常滚动，不会出现布局错乱的问题。

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