Difference between revisions of "SwiftUI Menus"
Jump to navigation
Jump to search
PeterHarding (talk | contribs) |
PeterHarding (talk | contribs) |
||
(3 intermediate revisions by the same user not shown) | |||
Line 10: | Line 10: | ||
<pre> | <pre> | ||
Menu { | Menu { | ||
Button { | Button { | ||
Line 42: | Line 40: | ||
</pre> | </pre> | ||
you might consider the Picker: | you might consider the [https://developer.apple.com/documentation/swiftui/picker Picker]: | ||
<pre> | <pre> | ||
Line 49: | Line 47: | ||
var body: some View { | var body: some View { | ||
VStack { | VStack { | ||
Picker(selection: $selection, label: Text(" | Picker(selection: $selection, label: Text("Choices")) { | ||
Text("Five").tag(5) | |||
Text("Four").tag(4) | |||
Text("Three").tag(3) | |||
Text("Two").tag(2) | |||
Text("One").tag(1) | |||
} | } | ||
} | } | ||
} | } | ||
} | } | ||
</pre> | |||
==An Alternate Approach== | |||
< | <pre> | ||
Text("Options") | Text("Options") | ||
.contextMenu { | .contextMenu { |
Latest revision as of 12:52, 17 February 2022
Links
- https://stackoverflow.com/questions/57241409/is-there-a-way-to-open-a-contextmenu-in-swiftui-with-a-normal-touch
- https://stackoverflow.com/questions/69822148/how-to-show-menu-programmatically-in-swiftui
- https://stackoverflow.com/questions/56513339/is-there-a-way-to-create-a-dropdown-menu-button-in-swiftui
- https://developer.apple.com/documentation/swiftui/contextmenu
- https://developer.apple.com/forums/thread/664419
Examples
Menu { Button { style = 0 } label: { Text("Linear") Image(systemName: "arrow.down.right.circle") } Button { style = 1 } label: { Text("Radial") Image(systemName: "arrow.up.and.down.circle") } } label: { Text("Style") Image(systemName: "tag.circle") }
GroupBox { DisclosureGroup("Menu 1") { Text("Item 1") Text("Item 2") Text("Item 3") } }
you might consider the Picker:
struct ContentView : View { @State private var selection = 1 var body: some View { VStack { Picker(selection: $selection, label: Text("Choices")) { Text("Five").tag(5) Text("Four").tag(4) Text("Three").tag(3) Text("Two").tag(2) Text("One").tag(1) } } } }
An Alternate Approach
Text("Options") .contextMenu { Button(action: { // change country setting }) { Text("Choose Country") } Button(action: { // enable geolocation }) { Text("Detect Location") } }
From - https://www.hackingwithswift.com/quick-start/swiftui/how-to-show-a-context-menu
Dropdowns
You need to use an overlay to display your dropdown. Otherwise, parents' layout will be wrong when you show and hide the dropdown.
demo
Here is a simple answer, and the complete answer could be found here
struct Dropdown: View { var options: [DropdownOption] var onSelect: ((_ key: String) -> Void)? var body: some View { VStack(alignment: .leading, spacing: 0) { ForEach(self.options, id: \.self) { option in DropdownOptionElement(val: option.val, key: option.key, onSelect: self.onSelect) } } .background(Color.white) .cornerRadius(dropdownCornerRadius) .overlay( RoundedRectangle(cornerRadius: dropdownCornerRadius) .stroke(Color.coreUIPrimary, lineWidth: 1) ) } } struct DropdownButton: View { @State var shouldShowDropdown = false @Binding var displayText: String var options: [DropdownOption] var onSelect: ((_ key: String) -> Void)? let buttonHeight: CGFloat = 30 var body: some View { Button(action: { self.shouldShowDropdown.toggle() }) { HStack { Text(displayText) Spacer() .frame(width: 20) Image(systemName: self.shouldShowDropdown ? "chevron.up" : "chevron.down") } } .padding(.horizontal) .cornerRadius(dropdownCornerRadius) .frame(height: self.buttonHeight) .overlay( RoundedRectangle(cornerRadius: dropdownCornerRadius) .stroke(Color.coreUIPrimary, lineWidth: 1) ) .overlay( VStack { if self.shouldShowDropdown { Spacer(minLength: buttonHeight + 10) Dropdown(options: self.options, onSelect: self.onSelect) } }, alignment: .topLeading ) .background( RoundedRectangle(cornerRadius: dropdownCornerRadius).fill(Color.white) ) } }