SwiftUI es una nueva forma conveniente de crear interfaces de usuario en Xcode. Si desea una introducción rápida a SwiftUI, esta publicación de blog es para usted.
Para comenzar, creemos un proyecto con soporte SwiftUI. Los requisitos mínimos del sistema para esto son macOS Catalina y Xcode 11. Cree un nuevo proyecto
"Archivo> Nuevo> Proyecto ..." , seleccione
"Aplicación de vista única" y asegúrese de que
esté seleccionada la "Interfaz de usuario: SwiftUI" .
El proyecto se verá más o menos así:
Como habrás notado, ahora puedes ver todos los cambios inmediatamente en la
Vista previa . Por ejemplo, intente cambiar el texto a
"¡Hola, Habr!" . Genial si?
Si no hay cambios, haga clic en el botón
Reanudar (en la esquina superior derecha). Si
Vista previa no
está visible, haga clic en las
opciones del Editor y asegúrese de que
Canvas esté seleccionado
(⌥Opciones + ⌘Comando + ↵Intro) .
Ver, Texto, Pila ...
Si selecciona
ContentView.swift , veremos:
struct ContentView: View { var body: some View { Text(", !") } }
Aquí vemos que
ContentView> body tiene un
Texto que muestra
"¡Hola, Habr!" . Agreguemos otro texto. Si intenta agregar directamente a la
vista del
cuerpo , Xcode lo jurará. Para hacer esto, primero use
HStack o
VStack . Presione
Comando y haga clic en
Texto (⌘Comando + Texto) , luego seleccione
“Incrustar en HStack” .
Este comando creará automáticamente un
HStack y agregará nuestro texto allí. Ahora puede agregar otro texto:
struct ContentView: View { var body: some View { HStack { Text(",") Text("!") } } }
Inspector Swiftui
Si hace clic en
"mandCommand + Text" y selecciona
"Show SwiftUI Inspector ..." , se abrirá un inspector donde podrá cambiar visualmente las propiedades del texto. Por ejemplo, si en el inspector
"Fuente" se cambió a
"Título grande" , el código también cambiará a
.font (.largeTitle) . Muy simple:
¿Qué es el estado ?
Para entender qué
es el Estado , agreguemos alguna acción. Repetimos lo que hicimos antes:
“⌘Command + HStack” , seleccione
“Embed in VStack” , luego agregue Button a este
VStack :
struct ContentView: View { @State var tapCount = 0 var body: some View { VStack { HStack { Text(",") .font(.largeTitle) .foregroundColor(Color.green) Text("!") .font(.largeTitle) .fontWeight(.bold) } Button(action: { self.tapCount += 1 }) { Text("Tap count \(tapCount)") .font(.title) } } } }
Cada vez que hace clic en el botón, cambiamos el valor de
tapCount . ¿Pero qué significa
estado ? Si queremos que nuestra
vista se vuelva
a representar cuando cambie algún valor, entonces deberíamos usar
State . En este caso, cuando hacemos clic en el botón, cambiamos el
tapCount , que se designa como
Estado . Es por eso que con cada clic nuestro
cuerpo vuelve a aparecer.
Vista previa en vivo
Por el momento, si hace clic en el botón, no pasa nada. Para solucionar esto y funcionar como un simulador, debe activar
"Vista previa en vivo" . El botón de activación se encuentra en la parte inferior derecha:
Ahora inténtalo de nuevo. Cada vez que presiona el botón, el valor cambiará.
Que sigue
Ahora tienes el concepto básico de SwiftUI. Además, le aconsejo que lea los
Tutoriales de SwiftUI , mire un
video de WWDC sobre SwiftUI . La documentación se puede encontrar
aquí .
El enlace al proyecto github está
aquí .