🔰Button Styles

SwiftUI ⟩ Controls ⟩ Button ⟩ Styles

💾 程式

📗 參考：Sundell ⟩ Encapsulating SwiftUI view styles

// ⭐️ 1. custom button style
struct PrimaryButtonStyle: ButtonStyle {
    // ⭐️ protocol requirement: makeBody()
    func makeBody(configuration: Configuration) -> some View {
        // ⭐️ button label
        configuration.label
            .foregroundColor(.white)
            .font(.body.bold())
            .padding(10)
            .padding(.horizontal, 20)
            .background(.blue)
            // ⭐️ button state
            .opacity(configuration.isPressed ? 0.5 : 1)
            .cornerRadius(10)
    }
}

// ⭐️ 2. convenience extension
private extension ButtonStyle where Self == PrimaryButtonStyle {
    // ⭐️ ButtonStyle.primary
    static var primary: Self { .init() }
}

// custom view
struct LoginView: View {
    
    @State private var username = ""
    @State private var password = ""
    
    var body: some View {
        VStack(spacing: 15) {
            TextField("Username", text: $username)
            SecureField("Password", text: $password)
            Button("Log in") {}
        }
        .textFieldStyle(.roundedBorder)
        // ⭐️ 3. apply custom button style
        .buttonStyle(.primary)
    }
}

🔴 主題

• PrimitiveButtonStyle

• Button ⟩ custom styles

🖥️ 影片

📗 參考

• Tunde ⟩ SwiftUI Button Styles, SwiftUI Materials

• AppCoda ⟩ How To Style SwiftUI Buttons in iOS 15

• Sundell ⟩ Encapsulating SwiftUI view styles

📘 手冊

• SwiftUI ⟩

  • View ⟩ Appearance Modifiers ⟩

    • .controlSize(_:) - size for controls within this view.

  • Controls ⟩ Button ⟩

    • .buttonStyle<S: ButtonStyle>()

    • .buttonStyle<S: PrimitiveButtonStyle>(_:)

    • .buttonBorderShape(_:) - border shape.

    • ButtonStyle (protocol) - standard button interaction behavior.

    • ButtonBorderShape (struct)

    • ButtonRole (struct) - purpose of a button.

    • PrimitiveButtonStyle (protocol) - custom interaction behavior & appearance.

      • .automatic, .bordered, .borderedProminent, .borderless, .plain

      • .card (tvOS 14), .link (macOS 10.15)

👥 相關

• Toggle Styles

• Label Styles