How it works
ManipulableModifier is the modifier type that adds direct, gesture-driven manipulation to a view, letting people grab it and move or rotate it in place. You don't construct it directly; you apply it through the manipulable() modifier on any view that should respond to drag-to-move and drag-to-rotate interaction. Reach for it when a piece of your interface is meant to be handled rather than merely tapped — an object a person repositions, reorients, or inspects — and you want that behavior without wiring up your own gesture state, transform math, or coordinate bookkeeping.
Apply manipulable() to make a view handlable
Calling
manipulable()on a view returns it wrapped in aManipulableModifier, which installs the move-and-rotate interaction. In the example it sits at the end of the chain on theImage(systemName: "globe"), so the globe itself becomes the object a person can drag and turn.Order the modifier after appearance modifiers
Because modifiers compose top-down,
manipulable()should follow the styling that defines the view's visible shape and bounds. Here it comes afterforegroundStyle(.blue),padding(), andbackground(.regularMaterial, in: .rect(cornerRadius: 16)), so the manipulation region matches the rounded material card the viewer actually sees and touches.Let the modifier own the transform
ManipulableModifiertracks the accumulated translation and rotation internally and applies them to the wrapped view, so you don't declare@Statefor offset or angle or build aDragGesture. TheImagein the example carries no gesture or transform state of its own — the modifier supplies all of it.Keep manipulable subjects distinct in the layout
The modifier affects only the single view it's attached to, leaving its container untouched. The surrounding
VStack, theText("Globe")heading, and theText("Drag to move and rotate")caption stay fixed in place; only the globe responds, which is why the caption can describe the gesture while the label above it holds still.
.manipulable() from the Image up to the whole VStack (place it after the trailing .padding()) and watch the entire stack — heading, globe, and caption together — become a single object you drag and rotate as a unit.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct ManipulableModifierDemo: View {
var body: some View {
VStack(spacing: 16) {
Text("Globe")
.font(.headline)
Image(systemName: "globe")
.font(.system(size: 64))
.foregroundStyle(.blue)
.padding()
.background(.regularMaterial, in: .rect(cornerRadius: 16))
.manipulable()
Text("Drag to move and rotate")
.font(.caption)
.foregroundStyle(.secondary)
}
.padding()
}
}