El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Conceptes Bàsics de SwiftUI

Següent ►
►

SwiftUI és un framework desenvolupat per Apple per crear interfícies d'usuari de manera declarativa. Amb SwiftUI, pots construir aplicacions per a totes les plataformes d'Apple utilitzant un sol conjunt d'eines i API. En aquest tema, aprendrem els conceptes bàsics de SwiftUI, incloent-hi la seva sintaxi, com crear vistes, i com gestionar l'estat de l'aplicació.

  1. Introducció a SwiftUI

Què és SwiftUI?

SwiftUI és un framework que permet crear interfícies d'usuari de manera declarativa. Això significa que descrius com hauria de ser la interfície d'usuari i el framework s'encarrega de construir-la i actualitzar-la automàticament quan l'estat de l'aplicació canvia.

Avantatges de SwiftUI

  • Declaratiu: Descrius el que vols veure a la pantalla i SwiftUI s'encarrega de la resta.
  • Reutilitzable: Les vistes es poden reutilitzar fàcilment en diferents parts de l'aplicació.
  • Reactiu: Les vistes es redibuixen automàticament quan l'estat canvia.
  • Integració amb totes les plataformes d'Apple: Pots utilitzar SwiftUI per crear aplicacions per a iOS, macOS, watchOS i tvOS.

  1. Creant la Teva Primera Vista en SwiftUI

Estructura Bàsica d'una Vista en SwiftUI

Una vista en SwiftUI es defineix com una estructura que conforma el protocol View. Aquí tens un exemple bàsic:

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hola, SwiftUI!")
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Explicació del Codi

  • import SwiftUI: Importa el framework SwiftUI.
  • struct ContentView: View: Defineix una estructura que conforma el protocol View.
  • var body: some View: Defineix el contingut de la vista. El tipus de retorn és some View, que indica que retorna una vista.
  • Text("Hola, SwiftUI!"): Crea una vista de text que mostra el missatge "Hola, SwiftUI!".
  • .padding(): Afegeix un espaiat al voltant del text.
  • struct ContentView_Previews: PreviewProvider: Proporciona una vista prèvia de la vista en el canvas de Xcode.

  1. Composició de Vistes

Vistes Contenidor

SwiftUI proporciona diverses vistes contenidor que permeten organitzar altres vistes. Les més comunes són VStack, HStack i ZStack.

VStack

Organitza les vistes en una columna vertical.

VStack {
    Text("Primera línia")
    Text("Segona línia")
}

HStack

Organitza les vistes en una fila horitzontal.

HStack {
    Text("Esquerra")
    Text("Dreta")
}

ZStack

Superposa les vistes una sobre l'altra.

ZStack {
    Text("Fons")
    Text("Davant")
}

  1. Gestió de l'Estat

Utilitzant @State

SwiftUI utilitza propietats amb l'atribut @State per gestionar l'estat intern d'una vista. Quan una propietat @State canvia, la vista es redibuixa automàticament.

struct CounterView: View {
    @State private var count = 0

    var body: some View {
        VStack {
            Text("Comptador: \(count)")
            Button(action: {
                count += 1
            }) {
                Text("Incrementar")
            }
        }
    }
}

Explicació del Codi

  • @State private var count = 0: Defineix una propietat d'estat count inicialitzada a 0.
  • Button(action: { count += 1 }): Incrementa el valor de count quan es prem el botó.

  1. Exercicis Pràctics

Exercici 1: Crear una Vista de Salutació

Crea una vista que mostri un missatge de salutació i un botó que canviï el missatge quan es prem.

Solució

struct GreetingView: View {
    @State private var greeting = "Hola, SwiftUI!"

    var body: some View {
        VStack {
            Text(greeting)
            Button(action: {
                greeting = "Hola, món!"
            }) {
                Text("Canviar Salutació")
            }
        }
    }
}

Exercici 2: Crear un Comptador Decremental

Crea una vista amb dos botons: un per incrementar i un altre per decrementar un comptador.

Solució

struct DecrementalCounterView: View {
    @State private var count = 0

    var body: some View {
        VStack {
            Text("Comptador: \(count)")
            HStack {
                Button(action: {
                    count -= 1
                }) {
                    Text("Decrementar")
                }
                Button(action: {
                    count += 1
                }) {
                    Text("Incrementar")
                }
            }
        }
    }
}

  1. Conclusió

En aquest tema, hem après els conceptes bàsics de SwiftUI, incloent-hi com crear vistes, utilitzar vistes contenidor i gestionar l'estat de l'aplicació. SwiftUI és un framework potent i flexible que facilita la creació d'interfícies d'usuari modernes i reactives. En els següents temes, explorarem més funcions avançades de SwiftUI i com integrar-lo amb altres parts del teu projecte iOS.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats