向 ScrollView 注入一个按钮

Question

我正在开发一个依赖 SwiftUI 的 iOS 应用程序。

我有一个 ZStack 视图，在它里面，我调用了另一个视图和一个按钮。

ZStack(alignment: .bottomTrailing) {
    ImageStepView(data: self.data[randomImageNum])

    Button(action: { self.showFavorites = true }) {
        HStack {
            Image(systemName: "suit.heart.fill")
            Text("FAVORITES")
        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 15)
        .foregroundColor(.white)
        .padding()
        .background(Color.black.opacity(0.6))
        .cornerRadius(5)
        .padding(.horizontal, 20)
    }
}

ImageStepView.swift

struct ImageStepView: View {
    var data: ImageDataModel
        
    var body: some View {
        
        GeometryReader { geometry in
            ScrollView(.vertical) {
                VStack{
                    Image(data.image)
                        .resizable() 
                        .border(Color.white, width: 5)
                        .overlay(
                            Rectangle().stroke(Color.white, lineWidth: 4))
                        .shadow(color: Color.gray, radius: 10, x: 10, y: 10)
                        .scaledToFit()
                        .frame(height: geometry.size.height-110)
                } .padding()
                VStack{
                    
                    VStack(alignment: .leading) {
                        HStack{...}
                        HStack {...}
                    }
                    Spacer()
                        .frame(height: 50)
                    VStack(alignment: .leading){
                        VStack{
                            HStack {...}
                            HStack {...}
                            HStack {...}
                        }
                    }
                }.padding()
            }.background(Color("Color").ignoresSafeArea(.all))
            .frame(width: geometry.size.width)
            .frame(minHeight: geometry.size.height)
        }
    }
}

ImageStepView有一个ScroolView ，这就是为什么Button没有出现在ScroolView的末尾，它出现在屏幕底部。

我想要的是在屏幕底部而不是在ImageStepView末尾显示 The Button 。

Answer 1

您可以让ImageStepView接受一个通用参数 - 要注入的视图：

struct ImageStepView<Injected: View>: View {
    var data: ImageDataModel
    var injectedView: () -> Injected

    var body: some View {
        GeometryReader { geometry in
            ScrollView(.vertical) {
                // ScrollView contents
                injectedView()
            }
            .background(Color("Color").ignoresSafeArea(.all))
            .frame(width: geometry.size.width)
            .frame(minHeight: geometry.size.height)
        }
    }
}

并将注入的视图传递给ImageStepView ：

ImageStepView(data: self.data[randomImageNum]) {
    Button(action: { self.showFavorites = true }) { ... }
}

或者

ImageStepView(data: self.data[randomImageNum]) { EmptyView() }