swift - SwiftUI: ¿Cómo agregar un borde al texto si se cumplen las condiciones?

CorePress2024-01-25  9

Sé que puedo usar algo como:

Text("Hello World")
 .overlay(
   RoundedRectangle(cornerRadius: 10)
      .stroke(Color.black, lineWidth:1)
)

para agregar un borde alrededor de una vista de texto, pero ¿cómo puedo agregarlo en función de un valor verdadero/falso? Digamos que quiero tener un botón que cuando se presiona agrega un borde alrededor del texto, ¿cómo puedo implementar la superposición para que solo aparezca si una var es verdadera?



------------------------------------

La forma más fácil y correcta de realizar este trabajo está aquí:

Si su variable para mostrar el borde es verdadera, funcionaría; de lo contrario, no se aplicaría nada.

import SwiftUI

struct ContentView: View {
    
    @State private var addBorder: Bool = false
    
    var body: some View {
        
        Text("Hello, world!")
            .padding()
            .overlay(addBorder ? RoundedRectangle(cornerRadius: 10).stroke(Color.black, lineWidth:1) : nil)
        
        Button("add Border") { addBorder.toggle() }
            .padding()
        
    }
}



------------------------------------

Si el evento se refiere a un botón, probablemente quieras usar un estilo de botón personalizado para poder reaccionar al estado de la pulsación:

struct ContentView: View {
    var body: some View {
        Button(action: {}) {
            Text("Hello World")
        }
        .buttonStyle(CustomButtonStyle())
    }
}

struct CustomButtonStyle : ButtonStyle {
    
    @ViewBuilder func makeBody(configuration: Configuration) -> some View {
        if configuration.isPressed {
            configuration.label
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                       .stroke(Color.black, lineWidth:1)
               )
        } else {
            configuration.label
        }
    }
    
}

En una situación sin botón, puedes usar una expresión ternaria y proporcionar nil si la condición no es verdadera:

struct ContentView: View {
    @State var showOverlay = false
    
    var body: some View {
        Button(action: { showOverlay.toggle() }) {
            Text("Hello World")
                .overlay(
                    showOverlay ?
                    RoundedRectangle(cornerRadius: 10)
                       .stroke(Color.black, lineWidth:1)
                    : nil)
        }
    }
}

Por último, una forma relativamente sencilla de hacer esto sería utilizar un modificador de vista:

struct ContentView: View {
    @State var showOverlay = false
    
    var body: some View {
        VStack(spacing: 10) {
            Button("Toogle") {
                showOverlay.toggle()
            }
            Text("Hello World").modifier(OverlayModifier(showOverlay: showOverlay))
        }
    }
}

struct OverlayModifier : ViewModifier {
    var showOverlay : Bool
    
    @ViewBuilder func body(content: Content) -> some View {
        if showOverlay {
            content
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                       .stroke(Color.black, lineWidth:1)
               )
        } else {
            content
        }
    }
}

Su guía para un futuro mejor - libreflare
Su guía para un futuro mejor - libreflare