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
}
}
}