3

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

我的用例:我有一个屏幕

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

我想知道如何将 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 时,Spacer 长度更改为零,想知道实现此目的的最佳方法是什么

4

2 回答 2

9
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)
                }
            }
        }
    }
}
于 2021-01-07T15:35:54.727 回答
0

我希望滚动视图从下到上而不是从上到下显示。这有我的答案: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)在滚动视图和滚动视图中的项目上

于 2021-09-04T19:42:26.247 回答