Conjunto de Espaciado de Botón en posición específica en SwiftUI.

Answer

1. 

   davy.ai

   August 5, 2023 at 9:13 am

   Para recortar el trazo en una posición particular, puedes usar el modificador .trim(from:to:) en la forma RoundedRectangle. El modificador .trim(from:to:) toma dos valores: el punto de inicio desde donde debe comenzar el recorte y el punto final donde debe terminar el recorte. En el código anterior, ya se usa el modificador .trim(from:to:), pero recorta el trazo desde 0 hasta 0.8, lo cual recorta el trazo desde la esquina superior izquierda hasta la esquina inferior izquierda.

   Para recortar el trazo en una posición particular, necesitas calcular los puntos de inicio y final en función de la posición que desees recortar. En este caso, si quieres recortar el trazo desde la parte superior del botón, puedes calcular que el punto de inicio sea 0.25 (25%) y el punto final sea 0.75 (75%). Así es como puedes modificar el código para lograr esto:

   struct RoundTrimImage: View {
       var body: some View {
           VStack{
               Button(action: {
                   print("Round Action")
               }) {
                   Text("Presiona")
                       .frame(width: 100, height: 100)
                       .foregroundColor(Color.black)
                       .background(Color.red)
                       .clipShape(Circle()).padding(5)
                       .overlay(
                           RoundedRectangle(cornerRadius: 100)
                               .trim(from: 0.25, to: 0.75) // Recorta el trazo desde la parte superior del botón
                               .stroke(Color.blue, lineWidth: 2)
                       )
               }
           }
       }
   }
   

   Esto recortará el trazo desde la parte superior del botón, como se muestra en la imagen de salida deseada.

   Para obtener un progreso mientras se recorta el trazo, puedes usar una variable @State y actualizarla en función del progreso. Por ejemplo, puedes crear una variable Double @State llamada progress y usarla para actualizar los puntos de inicio y final del modificador .trim(from:to:):

   struct RoundTrimImage: View {
       @State private var progress: Double = 0
   
       var body: some View {
           VStack{
               Button(action: {
                   print("Round Action")
               }) {
                   Text("Presiona")
                       .frame(width: 100, height: 100)
                       .foregroundColor(Color.black)
                       .background(Color.red)
                       .clipShape(Circle()).padding(5)
                       .overlay(
                           RoundedRectangle(cornerRadius: 100)
                               .trim(from: progress, to: CGFloat(min(progress + 0.8, 1.0))) // Comienza el recorte desde el progreso y recorta el 80% del trazo
                               .stroke(Color.blue, lineWidth: 2)
                       )
               }
           }
           .onAppear {
               withAnimation(Animation.easeInOut(duration: 2).repeatForever()) {
                   self.progress = 1.0 // Inicia la animación y actualiza el progreso a 1, lo cual recorta el trazo desde 0 hasta 0.8
               }
           }
       }
   }
   

   En este código, estamos usando una Animation con repeatForever() para animar el progreso de 0 a 1 en un bucle. También estamos usando la función min() para evitar que supere 1, lo cual puede causar problemas con el modificador .trim(from:to:).

   Esto debería darte un botón con un trazo recortado y una animación de progreso mientras se recorta el trazo.

Comments are closed.