Injecting A Button to ScrollView

user_7321779 0
Viewed 34

I'm developing a iOS app relies on SwiftUI.

I have a ZStack view and inside it, I call a another view along with a button.

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 has a ScroolView, that's why Button not appears on the end of ScroolView, it appears on bottom of the screen.

What I want is to show The Button not on bottom of the screen but end of the ImageStepView.

swiftui ios
1 Answers

You can make the ImageStepView accept a generic parameter - a view to be injected:

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

and pass the injected view to the ImageStepView:

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

or

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