Con SwiftUI, fácilmente puedes crear un botón con un fondo que sea un gradiente. No solamente puedes definir un color especifico del modifier background sino que tambien puedes aplicar un efecto de gradiente a cualquier botón.
Todo lo que necesitas hacer es reemplazar esta línea de código:
.background(.blue)por esta
.background(LinearGradient(gradient: Gradient(colors: [.red, .blue]), startPoint: .leading, endPoint: .trailing)El framework SwiftUI viene con muchos modifiers de gradientes incorporados. El código anterior aplica un gradiente linear desde la izquierda (.leading) hasta la derecha (.trailing). Empieza con rojo en la izquierda y termina con azul en la derecha.
Este seria el resultado:
Como añadir sombra a un botón
Para añadir sombra a un botón utilizamos el modifier shadow que nos permite dibujar una sombra alrededor del botón (o de cualquier vista). Solo añade esta línea de código para añadir una sombra:
.shadow(radius: 5.0)En nuestro ejemplo el código quedaría así:
import SwiftUI
struct ContentView: View {
var body: some View {
Button {
print("Delete button tapped")
} label: {
Label(
title: {
Text("Macbook")
.fontWeight(.semibold)
.font(.title)
},
icon: {
Image(systemName: "macbook")
.font(.title)
}
)
.padding()
.foregroundStyle(.white)
.background(LinearGradient(gradient: Gradient(colors: [.red, .blue]), startPoint: .leading, endPoint: .trailing))
.cornerRadius(40)
.shadow(radius: 5.0)
}
}
}Opcionalmente, puedes controlar el color, el radio y la posición de la sombra. Aqui puedes ver un ejemplo:
.shadow(color: .gray, radius: 20.0, x: 20, y: 10)
