Hola, soy Miguel y aquà les traigo otro tutorial.
Muestre a su usuario acciones adicionales que pueden realizar en su aplicación
Un menú contextual es una colección de botones que pueden desencadenar una acción. Por lo general, un menú contextual se activa presionando prolongadamente un elemento en la pantalla en iOS / iPadOS o haciendo clic con el botón derecho en macOS.
Se puede utilizar para acciones posteriores en un botón o elemento.
Para agregar un menú contextual, usaremos el contextMenu()
modificador y pasándolo Button()s
para mostrar.
Aquà hay una vista básica de SwiftUI con una vista de texto que tiene el color de fuente establecido en rojo:
import SwiftUI struct ContentView: View { @State private var fontColor = Color.black var body: some View { Text("Long press here to show a context menu") .foregroundColor(fontColor) } }
Hice que el color de la fuente sea una variable para que podamos cambiarlo con el menú contextual.
Para agregar un menú contextual al Text()
, agrega el modificador contextMenu()
como abajo:
struct ContentView: View { @State private var fontColor = Color.black var body: some View { Text("Long press here to show a context menu") .foregroundColor(fontColor) .contextMenu() } }
Esto producirá el error Type of expression is ambiguous without more context
ya que no hay botones dentro del ContextMenu
. Agreguemos un botón para cambiar el color de la fuente:
.contextMenu { Button(action:{ self.fontColor = Color.blue }){ Text("Set color to blue") } Button(action:{ self.fontColor = Color.red }){ Text("Set color to red") } }
Al agregar los dos botones, ahora podemos mantener presionado el texto y cambiar el color, como puede ver a continuación:
En la primera imagen, el menú contiene iconos. Estos se pueden agregar al Button()
envolviendo un HStack
alrededor del Texto y la imagen. Ahora, hagámoslo:
.contextMenu { Button(action:{ self.fontColor = Color.blue }){ HStack { Image(systemName: "pencil.tip.crop.circle") Text("Set color to blue") } } Button(action:{ self.fontColor = Color.red }){ HStack { Image(systemName: "pencil.tip.crop.circle") Text("Set color to red") } } }
Apple proporciona iconos para usar en sus aplicaciones con SÃmbolos SF.
¡Asà es como se crea un menú contextual en SwiftUI!
Gracias por leer este tutorial.
Añadir comentario