Descubre los nuevos Ornaments Views para VisionOS

Marcelo Laprea
28 febrero, 20242min de lectura
Ornament View es una nueva vista que podemos utilizar en VisionOS para mostrar elementos de control o información relacionados con una ventana. Estas vistas pueden aparecer en cualquier borde de la ventana.
Vistas como las TabView
y ToolBar
utilizan Ornaments para representar su interfaz de usuario en VisionOS. También podemos crear nuestro Ornament personalizado utilizando el modificador ornament(visibility:attachmentAnchor:contentAlignment:ornament:)
. Veamos cada uno de los parámetros que acepta el modificador:
-
visibility
: Define si el ornament estará visible en nuestra ventana o no. Tiene tres valores:.automatic
(su valor por defecto), donde el sistema decidirá si estará visible o no,.visible
y.hidden
. -
attachmentAnchor
: Indica dónde se posicionará nuestro ornament en nuestra ventana. -
contentAlignment
: Define la alineación que tendrá el contenido de nuestra vista, siendo por defecto.center
. -
ornament
: Define el contenido de nuestro ornament.
Ahora veamos cómo usar el modificador:
import SwiftUIstruct ContentView: View {var body: some View {VStack {Text("AsyncLearn")}.padding()// 1.ornament(attachmentAnchor: .scene(.trailing)) {// 2VStack {Button(action: {// Action}, label: {Image(systemName: "pencil")})Button(action: {// Action}, label: {Image(systemName: "trash.fill")})}.padding()// 3.glassBackgroundEffect()}}}
- Primero implementamos el modificador del
ornament
, indicando la posición como.scene(.trailing)
. - Creamos nuestra vista, en este caso dos botones dentro de un
VStack
. - Le agregamos el modificador
.glassBackgroundEffect()
para que tenga un fondo con el estilo de VisionOS.

Como mencionamos al principio del artículo, las vistas TabView
y ToolBar
también usan Ornaments. Veamos cómo se ven:
TabView usando Ornaments en VisionOS
import SwiftUIstruct ContentView: View {var body: some View {TabView {Text("Folder").tabItem {Label("Folder", systemImage: "folder")}Text("Calendar").tabItem {Label("Calendar", systemImage: "calendar")}}.padding()}}

ToolBar usando Ornaments en VisionOS
import SwiftUIstruct ContentView: View {var body: some View {Text("AsyncLearn").toolbar {ToolbarItem(placement: .bottomOrnament) {Button(action: {// Action}, label: {Image(systemName: "pencil")})}ToolbarItem(placement: .bottomOrnament) {Button(action: {// Action}, label: {Image(systemName: "trash.fill")})}}}}
