SwiftUI：从滚动视图中的底部对齐构建视图

问题描述

有没有办法在带有底部对齐的滚动视图内在 SwiftUI 中构建 UI 元素？

我的用例：我有一个屏幕，屏幕上有

1. Spacer（分配下面的元素后还剩下什么）
2. 徽标视图
3. Spacer() - 30
4. 一些文字 - 4/5 行
5. Spacer() - 50（这将根据 GR 大小高度计算）
6. 带有两个按钮的 HStack - 这应该固定在视图/ScrollView 的底部

我想知道如何将 HStack 视图固定到 ScrollView 底部

我已经复制了我的设置并在像这样的 Swift 游乐场中重现了我的问题

struct ContentView: View {
        var body: some View {
        GeometryReader { gr in
            ScrollView {
                vstack {
                    Spacer()
                    Image(systemName: "applelogo")
                        .resizable()
                        .frame(width: gr.size.width * 0.5,height: gr.size.height * 0.3,alignment: .center)
                    Spacer().padding(.bottom,gr.size.height * 0.01)
                    Text("SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME")
                        .fontWeight(.regular)
                        .foregroundColor(.green)
                        .multilineTextAlignment(.center)
                        .padding(.top,gr.size.height * 0.05)
                        .padding(.horizontal,40)
                        .layoutPriority(1)
                    Spacer()
                        .frame(minHeight: gr.size.height * 0.12)
                    HStack {
                        Button(action: {

                        },label: {
                            Text("Button 1")
                        })
                        .foregroundColor(Color.white)
                        .padding(.vertical)
                        .frame(minWidth: 0,maxWidth: .infinity)
                        .background(Color.blue)
                        .cornerRadius(8)

                        Button(action: {

                        },label: {
                            Text("Button 2")
                        })
                        .foregroundColor(Color.white)
                        .padding(.vertical)
                        .frame(minWidth: 0,maxWidth: .infinity)
                        .background(Color.blue)
                        .cornerRadius(8)
                    }
                    .padding(.horizontal,20)
                }
                //.frame(maxWidth: .infinity,maxHeight: .infinity)
            }
        }
    }
}

我知道当在 SwiftUI 视图中引入 scrollView 时间隔长度更改为零，想知道实现此目的的最佳方法是什么

解决方法

struct SampleView: View {
    var body: some View {
        GeometryReader { gr in
            VStack {
                ScrollView {
                    VStack {

                        // Fills whatever space is left
                        Rectangle()
                            .foregroundColor(.clear)

                        Image(systemName: "applelogo")
                            .resizable()
                            .frame(width: gr.size.width * 0.5,height: gr.size.height * 0.3,alignment: .center)
                            .padding(.bottom,gr.size.height * 0.06)


                        Text("SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME")
                            .fontWeight(.regular)
                            .foregroundColor(.green)
                            .multilineTextAlignment(.center)
                            .padding(.horizontal,40)
                            .layoutPriority(1)


                        // Fills 12 %
                        Rectangle()
                            .frame(height: gr.size.height * 0.12)
                            .foregroundColor(.clear)

                        HStack {

                            Button(action: {
                            },label: {
                                Text("Button 1")
                            })
                            .foregroundColor(Color.white)
                            .padding(.vertical)
                            .frame(minWidth: 0,maxWidth: .infinity)
                            .background(Color.blue)
                            .cornerRadius(8)

                            Button(action: {
                            },label: {
                                Text("Button 2")
                            })
                            .foregroundColor(Color.white)
                            .padding(.vertical)
                            .frame(minWidth: 0,maxWidth: .infinity)
                            .background(Color.blue)
                            .cornerRadius(8)
                        }
                        .padding(.horizontal,20)
                        .padding(.bottom,20)

                    }

                    // Makes the content stretch to fill the whole scroll view,but won't be limited (it can grow beyond if needed)
                    .frame(minHeight: gr.size.height)
                }
            }
        }
    }
}