[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]