簡體   English   中英

SwiftUI:在 scrollView 中從底部 alignment 構建視圖

[英]SwiftUI: Build View from bottom alignment in scrollView

有沒有辦法在底部 Alignment 的滾動視圖內的 SwiftUI 中構建 UI 元素?

我的用例:我有一個屏幕

  1. Spacer(分配以下元素后剩下的內容
  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 時,間隔長度更改為零,想知道實現此目的的最佳方法是什么

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

我希望滾動視圖從下到上而不是從上到下顯示。 這有我的答案: https://www.thirdrocktechkno.com/blog/implementing-reversed-scrolling-behaviour-in-swiftui/

TLDR: .rotationEffect .rotationEffect(Angle(degrees: 180)).scaleEffect(x: -1.0, y: 1.0, anchor: .center)在滾動視圖和滾動視圖中的項目上

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM