SwiftUI offers us Alert for supplying vital bulletins with one or two buttons, and sheet() for imparting total views on pinnacle of the cutting-edge view, however it additionally offers us ActionSheet: an choice to Alert that lets us add many buttons.

Visually indicators and motion sheets are very different: on iPhones, alert show up in the middle of the display and ought to actively be brushed aside by way of deciding on a button, whereas motion sheets slide up from the bottom, can comprise a couple of buttons, and can be disregarded by means of tapping on Cancel or via tapping outdoor of the motion sheet.

Apart from their presentation and differing numbers of buttons, motion sheets and signals share a lot of functionality. Both are created by using attaching a modifier to our view hierarchy – alert() for signals and actionSheet() for motion sheets – each get proven robotically with the aid of SwiftUI when a situation is true, each use the equal type of button, and each have some built-in default patterns for these buttons: default(), cancel(), and destructive().

To display motion sheets being used, we first want a fundamental view that toggles some kind of condition. For example, this indicates some text, and tapping the textual content modifications a Boolean:

struct ContentView: View { @State private var showingActionSheet = false @State private var backgroundColor = Color.white var body: some View { Text("Hello, World!") .frame(width: 300, height: 300) .background(backgroundColor) .onTapGesture { self.showingActionSheet = true } } }

Now for the essential part: we want to add some other modifier to the text, developing and displaying an motion sheet when we’re ready.

Just like alert(), we have an actionSheet() modifier that accepts two parameters: a binding that decides whether or not the motion sheet is presently introduced or not, and a closure that presents the motion sheet that need to be proven – commonly furnished as a trailing closure.

We furnish our motion sheet with a title and message, then an array of buttons. These are stacked up vertically on the display screen in the order you provide, and it’s commonly a proper notion to encompass a cancel button at the cease – yes, you can cancel by means of tapping some other place on the screen, however it’s plenty higher to supply customers the specific option!

So, add this modifier to your textual content view:

.actionSheet(isPresented: $showingActionSheet) { ActionSheet(title: Text("Change background"), message: Text("Select a new color"), buttons: [ .default(Text("Red")) { self.backgroundColor = .red }, .default(Text("Green")) { self.backgroundColor = .green }, .default(Text("Blue")) { self.backgroundColor = .blue }, .cancel() ]) } When you run the app, you need to locate that tapping the textual content reasons the motion sheet to slide over, and tapping its selections need to reason the text’s heritage coloration to change.