SwiftUI #26: Button

Button es un control que inicia una acción cuando se presiona.

• init(action:label:)
• init(_:action:)
• init(role:action:label:): Los roles pueden ser cancel, destructive, close y confirm.

struct ContentView: View {
  @State private var active = false

  var body: some View {
    VStack {
      Text(active ? "Hola" : "Adiós")
      Button("Conmutar") {
        active.toggle()
      }
    }
  }
}

Modificadores

Algunos modificadores útiles del botón

• disabled(_:)
• buttonStyle(_:) configura un estilo de tipo ButtonStyle. Este último es un protocolo que necesita tener el método makeBody(configuration:). Se puede usar alguna de las propiedades estáticas de PrimitiveButtonStyle como automatic, bordered, borderedProminent.
• controlSize(_:): Cambia el tamaño de los controles dentro de una vista. Puede tomar valores mini, small, regular, large, extraLarge.

struct ContentView: View {
  var body: some View {
    VStack(spacing: 15) {
      Button("Cancelar") {
        print("Cancelando")
      }.buttonStyle(.bordered)

      Button("Enviar") {
        print("Enviando")
      }.buttonStyle(.borderedProminent)
    }
  }
}

Los botones prominentes solo deberían ser usados para acciones primarias, indicando que una tarea importante va a ocurrir.

Rol de un botón

Cambiar el rol de un botón provoca un cambio en su estilo.

struct ContentView: View {
  var body: some View {
    VStack(spacing: 15) {
      Button("Cancelar", role: .destructive) {
        print("Cancelando")
      }.buttonStyle(.bordered)

      Button("Enviar", role: .destructive) {
        print("Enviando")
      }.buttonStyle(.borderedProminent)
    }
  }
}

Estilo de botón personalizado

Se puede crear un estilo personalizado conformando el protocolo ButtonStyle., cuyo único requerimiento es definir el método makeBody(configuration:), que recibe un ButtonStyle.Configuration, con las siguientes propiedades:

• isPressed: Booleano que indica si el botón está presionado
• label: Una vista que describe visualmente al botón.

struct ExpandingButtonStyle: ButtonStyle {
  func makeBody(configuration: Configuration) -> some View {
    configuration.label
      .padding()
      .border(.red, width: 5)
      .scaleEffect(configuration.isPressed ? 1.5 : 1.0)
  }
}

struct ContentView: View {
  var body: some View {
    VStack(spacing: 15) {
      Button("Enviar", role: .confirm) {
        print("Enviando")
      }.buttonStyle(ExpandingButtonStyle())
    }
  }
}