[SU] Shapes

#swiftui #swift #ios

Consideraciones

Una forma asume el tamaño del frame que la contiene.

Formas comunes

struct ContentView: View {
  var body: some View {
    HStack {
      Rectangle()
        .frame(width:100, height: 120)

      RoundedRectangle(cornerRadius: 20, style: .continuous)
        .frame(width: 100, height: 120)

      Circle()
        .frame(width: 100, height: 120)

      Ellipse()
        .frame(width: 100, height: 120)

      Capsule()
        .frame(width: 100, height: 120)
    }
    .padding()
  }
}

Modificares

Shape.fill(_:style:): Rellena la forma con un color o gradiente.
ShapeView.stroke(_:lineWidth:antialiased:): Dibuja el borde de esta forma usando un color o un gradiente. El borde se expande 50% hacia afuera y 50% hacia dentro.
ShapeView.stroke(_:style:antialiased:): Dibuja el borde de esta forma usando un color o gradiente. Además, se puede especificar más información sobre el estilo del borde con StrokeStyle.
ShapeView.strokeBorder(_:style:antialiased:): Devuelve una vista que es el resultado de aplicar un margen interior a esta vista equivalente a la mitad del grosor de línea de su estilo. El borde se expande 100% hacia dentro.
ShapeView.strokeBorder(_:lineWidth:antialiased:)

struct ContentView: View {
  var body: some View {
    HStack {
      Rectangle()
        .fill(.red)
        .frame(width:100, height: 120)

      RoundedRectangle(cornerRadius: 20, style: .continuous)
        .fill(.white)
        .stroke(.red, lineWidth: 2)
        .frame(width: 100, height: 120)

      Circle()
        .fill(Color.white)
        .stroke(.red, style: .init(lineWidth: 4, lineCap: .round, lineJoin: .miter, miterLimit: 0, dash: [10, 10], dashPhase: 10))
        .frame(width: 100, height: 120)

      Ellipse()
        .fill(Color.white)
        .strokeBorder(.red, style: .init(lineWidth: 4, lineCap: .round, lineJoin: .miter, miterLimit: 0, dash: [10, 10], dashPhase: 10))
        .frame(width: 100, height: 120)

      Capsule()
        .fill(Color.white)
        .strokeBorder(.red, style: .init(lineWidth: 4, lineCap: .round, lineJoin: .miter, miterLimit: 0, dash: [10, 10], dashPhase: 10))
        .frame(width: 100, height: 120)
    }
    .padding()
  }
}

Aplicando forma a otras vistas de SwiftUI

Se puede aplicar una forma (Shape) como fondo de una vista con View.background(_:in:fillStyle:)

struct ContentView: View {
  var body: some View {
    VStack {
      Button {
        debugPrint("Hola1")
      } label: {
        Text("Activar 1")
          .padding()
      }
      .tint(.white)
      .background(
        Capsule()
          .fill(Color.blue)
      )

      Button {
        debugPrint("Hola2")
      } label: {
        Text("Activar 2")
          .padding()
      }
      .tint(.white)
      .background(.blue, in:Capsule())
    }
    .padding()
  }
}