Tuesday, July 5, 2022
HomeiOS Developmentios - Learn how to deliver overlay view to entrance in swiftUI?

ios – Learn how to deliver overlay view to entrance in swiftUI?

[ad_1]

I’m attempting to create a dropdown like this Anticipated picture , Many of the tutorial instructed to make use of overlay for a similar, however when applied I get the UI output picture
Its coming behind the subsequent view which in flip would not give the look I wished, Learn how to deliver the overlay view to entrance, It appears to be straightforward in UIKit and however would not appear to work with Swift UI, Any suggestion?

pattern code

import SwiftUI

struct DropdownOption: Hashable {
    let key: String
    let worth: String
    
    public static func == (lhs: DropdownOption, rhs: DropdownOption) -> Bool {
        return lhs.key == rhs.key
    }
}

struct DropdownRow: View {
    var choice: DropdownOption
    var onOptionSelected: ((_ choice: DropdownOption) -> Void)?
    
    var physique: some View {
        Button(motion: {
            if let onOptionSelected = self.onOptionSelected {
                onOptionSelected(self.choice)
            }
        }) {
            HStack {
                Textual content(self.choice.worth)
                    .font(.system(dimension: 14))
                    .foregroundColor(Coloration.black)
                Spacer()
            }
        }
        .padding(.horizontal, 16)
        .padding(.vertical, 5)
    }
}

struct Dropdown: View {
    var choices: [DropdownOption]
    var onOptionSelected: ((_ choice: DropdownOption) -> Void)?
    
    var physique: some View {
        ScrollView {
            VStack(alignment: .main, spacing: 0) {
                ForEach(self.choices, id: .self) { choice in
                    DropdownRow(choice: choice, onOptionSelected: self.onOptionSelected)
                }
            }
        }
        .body(minHeight: CGFloat(choices.rely) * 30, maxHeight: 250)
        .padding(.vertical, 5)
        .background(Coloration.white)
        .cornerRadius(5)
        .overlay(
            RoundedRectangle(cornerRadius: 5)
                .stroke(Coloration.grey, lineWidth: 1)
        )
    }
}

struct DropdownSelector: View {
    @State personal var shouldShowDropdown = false
    @State personal var selectedOption: DropdownOption? = nil
    var placeholder: String
    var choices: [DropdownOption]
    var onOptionSelected: ((_ choice: DropdownOption) -> Void)?
    personal let buttonHeight: CGFloat = 45
    
    var physique: some View {
        Button(motion: {
            self.shouldShowDropdown.toggle()
        }) {
            HStack {
                Textual content(selectedOption == nil ? placeholder : selectedOption!.worth)
                    .font(.system(dimension: 14))
                    .foregroundColor(selectedOption == nil ? Coloration.grey: Coloration.black)
                
                Spacer()
                
                Picture(systemName: self.shouldShowDropdown ? "arrowtriangle.up.fill" : "arrowtriangle.down.fill")
                    .resizable()
                    .body(width: 9, top: 5)
                    .font(Font.system(dimension: 9, weight: .medium))
                    .foregroundColor(Coloration.black)
            }
        }
        .padding(.horizontal)
        .cornerRadius(5)
        .body(width: .infinity, top: self.buttonHeight)
        .overlay(
            RoundedRectangle(cornerRadius: 5)
                .stroke(Coloration.grey, lineWidth: 1)
        )
        .overlay(
            VStack {
                Picture("top-image")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .scaledToFit()
                if self.shouldShowDropdown {
                    Spacer(minLength: buttonHeight + 10)
                    Dropdown(choices: self.choices, onOptionSelected: { choice in
                        shouldShowDropdown = false
                        selectedOption = choice
                        self.onOptionSelected?(choice)
                    })
                }
            }, alignment: .topLeading
        )
        .background(
            RoundedRectangle(cornerRadius: 5).fill(Coloration.white)
        )
    }
}

struct DropdownSelector_Previews: PreviewProvider {
    @State personal static var deal with: String = ""
    
    static var uniqueKey: String {
        UUID().uuidString
    }
    
    static let choices: [DropdownOption] = [
        DropdownOption(key: uniqueKey, value: "Sunday"),
        DropdownOption(key: uniqueKey, value: "Monday"),
        DropdownOption(key: uniqueKey, value: "Tuesday"),
        DropdownOption(key: uniqueKey, value: "Wednesday"),
        DropdownOption(key: uniqueKey, value: "Thursday"),
        DropdownOption(key: uniqueKey, value: "Friday"),
        DropdownOption(key: uniqueKey, value: "Saturday")
    ]
    
    
    static var previews: some View {
        VStack(spacing: 20) {
            
            
            HStack(){
                DropdownSelector(
                    placeholder: "Day of the week",
                    choices: choices,
                    onOptionSelected: { choice in
                        print(choice)
                    })
                    .padding(.horizontal)
                    .zIndex(1)
                
                DropdownSelector(
                    placeholder: "Day of the week",
                    choices: choices,
                    onOptionSelected: { choice in
                        print(choice)
                    })
                    .padding(.horizontal)
                    .zIndex(1)
            }
            
            
            Group {
                TextField("Full Deal with", textual content: $deal with)
                    .font(.system(dimension: 14))
                    .padding(.horizontal)
            }
            .body(width: .infinity, top: 45)
            .overlay(
                RoundedRectangle(cornerRadius: 5)
                    .stroke(Coloration.grey, lineWidth: 1)
            )
            .padding(.horizontal)
        }
    }
}

[ad_2]

RELATED ARTICLES

Most Popular

Recent Comments