Botones simples en SwifUI

Button es uno de los componentes que se utilizan habitualmente en SwiftUI. Usamos botones para permitir a los usuarios producir acciones. Por eso es tan esencial generalizar la apariencia de los botones en nuestras aplicaciones.

Botones por defecto

Se puede usar dos formas de iniciarlizar botones en SwiftUI, la manera más compacta

Button("Crick Me!") {
    print("tap btn")
}

y la manera que permite más personalización

Button(action: {
    print("tap btn")
}, label: {
    Text("Crick Me!")
})

Ambos códigos mostarán el siguiente botón

Botones por defecto

Con el modificador buttonStyle se puede modificar la apariencia del botón, SwifUI ofrece los por defecto, PlainButtonStyle, BorderlessButtonStyle, DefaultButtonStyle

Button("plain", action: {
    print("click")
}).buttonStyle(PlainButtonStyle())

Button("Borderless", action: {
    print("click")
}).buttonStyle(BorderlessButtonStyle())

Button("Default", action: {
    print("click")
}).buttonStyle(DefaultButtonStyle())

Botón sólido

Más parámetros par usar en buttonStyle y crear variedad de botones

Button("Bordered", action: {
    print("click")
}).buttonStyle(.bordered)

Definir el tamaño del botón

Para modificar su tamaño se puede usar el modificador controlSize que permite 3 estados small regular y large, se visualiza de diferente forma

Button("large", action: {
    print("click")
}).buttonStyle(.bordered)
    .controlSize(.large)

Button("regular", action: {
    print("click")
}).buttonStyle(.bordered)
    .controlSize(.regular)

Button("small", action: {
    print("click")
}).buttonStyle(.bordered)
    .controlSize(.small)

Con forma de capsula se usará el modificador clipShape

Button("Capsule", action: {
    print("click")
}).buttonStyle(.bordered)
    .clipShape(Capsule())

Botón sólido colorido

Si se quiere mostar un botón sólido y coloreado se usa borderedProminent

Button("bordered prominent", action: {
    print("click")
}).buttonStyle(.borderedProminent)

Button("large", action: {
    print("click")
}).buttonStyle(.borderedProminent)
    .controlSize(.large)

Button("regular", action: {
    print("click")
}).buttonStyle(.borderedProminent)
    .controlSize(.regular)

Button("small", action: {
    print("click")
}).buttonStyle(.borderedProminent)
    .controlSize(.small)

Con forma de capsula se usará el modificador clipShape

Button("Capsule", action: {
    print("click")
}).buttonStyle(.borderedProminent)
    .clipShape(Capsule())

Para cambiar su color se puede usar el modificador tint y a continuación el color

Button("Vamos", action: {
    print("click")
}).buttonStyle(.borderedProminent)
    .tint(.green)

Roles en los botones

Puede proporcionar una función de botón opcional. De forma predeterminada, no especifica ningúno, se puede establecer el rol predefinido proporcionado por ButtonRole enum. Los valores pueden ser destructive o cancel, dependiendo lo establecido se mostará un botón azul para cancelación o rojo para los destructivos.

Button("Delete", role: .destructive) {
    print("deleting...")
}

Button("Delete", role: .destructive) {
    print("deleting...")
}.buttonStyle(.bordered)

Button("Delete", role: .destructive) {
    print("deleting...")
}.buttonStyle(.borderedProminent)

Button("Delete", role: .destructive) {
    print("deleting...")
}.buttonStyle(.borderedProminent)
    .controlSize(.small)

Button("Cancel", role: .cancel) {
    print("deleting...")
}

Button("Cancel", role: .cancel) {
    print("deleting...")
}.buttonStyle(.bordered)

Button("Cancel", role: .cancel) {
    print("deleting...")
}.buttonStyle(.borderedProminent)

Button("Cancel", role: .cancel) {
    print("deleting...")
}.buttonStyle(.borderedProminent)
    .controlSize(.small)

Botón con un bordeado colorido

Añadir un borde fino y redondeado al botón

Button(action: {
    print("click btn")
}) {
    Text("Home").padding(10)
        .overlay(
            RoundedRectangle(cornerRadius: 10.0)
                .stroke(lineWidth: 2.0)
        )
}

Si lo queremos con forma de capsula

Button(action: {
    print("click btn")
}) {
    Text("Home").padding(10)
        .overlay(
            Capsule().stroke(lineWidth: 2)
        )
}

Botones con icono

Si se requiere añadir un icono al botón

Button(action: {
    print("click btn")
}) {
    HStack() {
        Image(systemName: "paperplane.fill")
        Text("Send")
    }
}

Button(action: {
    print("click btn")
}) {
    HStack() {
        Image(systemName: "paperplane.fill")
        Text("Send")
    }
}.buttonStyle(.bordered)

Button(action: {
    print("click")
}){
    HStack() {
        Image(systemName: "paperplane.fill")
        Text("Send")
    }.padding(2)
}.buttonStyle(.borderedProminent)
.clipShape(Capsule())

Button(action: {
    print("click btn")
}) {
    HStack() {
        Image(systemName: "bookmark.fill")
        Text("Bookmark")
    }.padding(8.0)
        .overlay(
            RoundedRectangle(cornerRadius: 10.0)
                .stroke(lineWidth: 2.0)
        )
}

Button(action: {
    print("click btn")
}) {
    HStack() {
        Image(systemName: "bookmark.fill")
        Text("Bookmark")
    }.padding(8.0)
        .overlay(
            Capsule().stroke(lineWidth: 2)
        )
}
            
Button(role: .destructive, action: {
    print("click delete")
}) {
    HStack() {
        Image(systemName: "trash.fill")
        Text("Delete")
    }
    
}.buttonStyle(.borderedProminent)

Button(role: .destructive, action: {
    print("click delete")
}){
    HStack() {
        Image(systemName: "trash.fill")
        Text("Delete")
    }.padding(2)
}.buttonStyle(.borderedProminent)
.clipShape(Capsule())

Button(role: .destructive, action: {
    print("click delete")
}) {
    HStack() {
        Image(systemName: "trash.fill")
        Text("Delete")
    }.padding(8.0)
        .overlay(
            RoundedRectangle(cornerRadius: 10.0)
                .stroke(lineWidth: 2.0)
        )
}

Anuncio publicitario