Como crear un boton con imagenes y texto en SwiftUI

En un proyecto, tu mismo o tu diseñador puede que quiera mostrar un botón con una imagen. La sintaxis para crear un botón con una imagen es casi la misma excepto que tienes que usar el control Image en vez de Text, como se ve en el siguiente ejemplo:

Button(action: {
    print("Delete button tapped!")
}) {
    Image(systemName: "trash")
        .font(.largeTitle)
        .foregroundColor(.red)
}

en el que usamos la librería de SF Symbols para crear un botón con una imagen. En este ejemplo utilizamos el símbolo de la “papelera” como imagen. Para hacer la imagen levemente más larga utilizamos la opción .largeTitle en el modifier font. El botón resultante debería ser como este:

Similarmente, si quisieras crear un botón con una imagen circular y un color sólido como fondo, puedes hacerlo aplicando los siguientes modifiers:

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button {
            print("Hello World tapped!")
        } label: {
            
            Button(action: {
                print("Delete button tapped!")
            }) {
                Image(systemName: "trash")
                    .padding()
                    .background(.red)
                    .clipShape(Circle())
                    .font(.largeTitle)
                    .foregroundColor(.white)
            }
           
        }
    }
}

quedando como resultado lo siguiente:

Podemos usar textos e imágenes para crear un botón en SwiftUI. Imagina que quieres poner la palabra “Delete” al lado de la imagen de la papelera, como en el siguiente ejemplo:

En este snippet de código incrustamos tanto la imagen como el texto en una horizontal stack (HStack). Esta disposición permite que el icono de la papelera y el texto Delete sean mostrados juntos.

Por otro lado, los modifiers aplicados a la HStack especifican el color de fondo, el padding y las esquinas redondeadas del botón.