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

Question

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

我的用例：我有一个屏幕，其中屏幕有

Spacer（分配以下元素后剩下的内容）
徽标视图
垫片() - 30
一些文本 - 4/5 行
Spacer() - 50（这将根据 GR 尺寸高度计算）
带两个按钮的 HStack - 这应该固定到视图/滚动视图的底部

I would like to know how Can I pin the HStack view to ScrollView Bottom

我已经在 Swift playground 中复制了我的设置并重现了我的问题

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时view Spacer length更改为零，想知道实现这个的最好方法是什么

Answer 1

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)
                }
            }
        }
    }
}

Answer 2

我希望滚动视图从下到上显示，而不是从上到下显示。这有我的答案：https://www.thirdrocktechkno.com/blog/implementing-reversed-scrolling-behaviour-in-swiftui/

TLDR：.rotationEffect(Angle(degrees: 180)).scaleEffect(x: -1.0, y: 1.0, anchor: .center) 滚动视图和滚动视图中的项目

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

SwiftUI: Build View from bottom alignment in scrollView

scrollview

ios

swift

swiftui

geometryreader