【Xcode/SwiftUI】SwiftUI modifier cheatsheet

SwiftUI is a modern and powerful framework for building user interfaces on Apple platforms. One of its key features is the ability to customize the appearance and behavior of views using modifiers. With a wide range of modifiers available, it can be challenging to remember all the options and parameters. In this article, we will provide a SwiftUI modifier cheatsheet, covering some of the most commonly used modifiers.

Note that this is not an exhaustive list of all modifiers available in SwiftUI. For a complete list of modifiers, refer to the official Apple documentation.

Layout Modifiers

Layout modifiers are used to control the position, size, and spacing of views.

• padding(): Adds padding around the view.
• frame(width:height:alignment:): Sets the size of the view.
• offset(x:y:): Moves the view by a specified amount in the x and y directions.
• background(_:): Sets the background color or view for the view.
• overlay(_:): Adds a view on top of the view.
• alignmentGuide(_:computeValue:): Sets a custom alignment guide for the view.

Text("Hello, world!")
    .padding()

Text("Hello, world!")
    .frame(width: 200, height: 50)

Text("Hello, world!")
    .offset(x: 50, y: 50)

Text("Hello, world!")
    .background(Color.blue)

Text("Hello, world!")
    .overlay(
        RoundedRectangle(cornerRadius: 10)
            .stroke(Color.blue, lineWidth: 2)
    )

Text("Hello, world!")
    .alignmentGuide(.leading) { dimension in
        dimension[.leading]
    }

Appearance Modifiers

Appearance modifiers are used to customize the appearance of views.

• foregroundColor(_:): Sets the foreground color of the view.
• font(_:): Sets the font of the view.
• fontWeight(_:): Sets the weight of the font.
• multilineTextAlignment(_:): Sets the text alignment for multi-line text.
• lineLimit(_:): Sets the maximum number of lines for multi-line text.
• background(_:): Sets the background color or view for the view.
• cornerRadius(_:): Sets the corner radius of the view.
• border(_:width:): Sets the border color and width of the view.
• shadow(color:radius:x:y:): Adds a shadow to the view.

Text("Hello, world!")
    .foregroundColor(.red)

Text("Hello, world!")
    .font(.headline)

Text("Hello, world!")
    .fontWeight(.bold)

Text("Hello, world!")
    .multilineTextAlignment(.center)

Text("Hello, world!")
    .lineLimit(1)

Text("Hello, world!")
    .background(Color.blue)

Text("Hello, world!")
    .cornerRadius(10)

Text("Hello, world!")
    .border(Color.blue, width: 2)

Text("Hello, world!")
    .shadow(color: Color.gray, radius: 5, x: 0, y: 5)

Behavior Modifiers

Behavior modifiers are used to control the behavior of views.

• onTapGesture(count:perform:): Adds a tap gesture recognizer to the view.
• gesture(_:): Adds a gesture recognizer to the view.
• onAppear(perform:): Executes a closure when the view appears.
• onDisappear(perform:): Executes a closure when the view disappears.
• disabled(_:)->View: Disables user interaction on the view if the condition is met.
• onReceive(_:perform:): Executes a closure when the view receives a value from a publisher.

Text("Hello, world!")
    .onTapGesture {
        print("Tapped")
    }

Text("Hello, world!")
    .gesture(
        DragGesture()
            .onChanged { value in
                // handle drag gesture
            }
    )

Text("Hello, world!")
    .onAppear {
        print("Appeared")
    }

Text("Hello, world!")
    .onDisappear {
        print("Disappeared")
    }

Button("Tap Me") { /* handle button tap */ }
    .disabled(isDisabled)

Text("Hello, world!")
    .onReceive(publisher) { value in
        // handle received value
    }

Conditional Modifiers

Conditional modifiers are used to apply a modifier conditionally based on some state or property.

• if(_:)->View: Applies the modifier if the condition is met.
• ifLet(_:_:)->View: Applies the modifier if the optional value is not nil.
• ifElse(_:then:else:)->View: Applies one modifier if the condition is met, and another if it is not.

Text("Hello, world!")
    .if(someCondition) {
        $0.font(.largeTitle)
    }

if let someValue = optionalValue {
    Text("Value is: \(someValue)")
        .ifLet(someCondition) {
            $0.font(.largeTitle)
        }
}

Conclusion

SwiftUI modifiers are a powerful tool for customizing the appearance and behavior of views. This cheatsheet covers some of the most commonly used modifiers, but there are many more available. By combining and nesting modifiers, you can create complex and sophisticated views with ease. To learn more about SwiftUI modifiers, refer to the official Apple documentation.