Als die nog niet op je apparaat staat, download je de gratis app Swift Playgrounds.

Als je Swift Playgrounds opent, ga je meteen naar de pagina New Playgrounds. Als je de app eerder hebt geopend, zie je hier je vorige Playground-bestanden. Zo niet, dan zal het scherm grotendeels leeg zijn. Hoe dan ook, er is een paneel onderaan het scherm met de titel Other Playgrounds. Tik op de blauwe ‘Bekijk alles’ knop aan de rechterkant van dit paneel, en het paneel zou zich moeten uitbreiden om de Swift tutorials te tonen die Apple aanbiedt. Scroll naar beneden naar de startpunten rij, en tik op de blauwe ‘See all’ knop voor dat.

Nu zou je in staat moeten zijn om alle voorbeeldprojecten te zien die Apple biedt, hoewel er geen voorbeeld is voor SwiftUI op het moment dat ik dit schrijf.

Je hebt twee keuzes die zullen werken als Startpunt voor deze tutorial. Blank zal een nieuw .playgroundbook-bestand maken dat kan worden geopend in Swift Playgrounds op een iPad, maar niet kan worden geopend door Xcode op een Mac. Als je het prima vindt om je iPad onafhankelijk te gebruiken, is dit waarschijnlijk het formaat voor jou. Als je jezelf ziet overstappen naar Xcode, is dit waar het startpunt genaamd Xcode Playground in beeld komt. Dit maakt gebruik van hetzelfde .playground bestandstype dat Xcode gebruikt, waardoor u de mogelijkheid hebt om hetzelfde bestand op beide apparaten te bewerken.

Swift Playgrounds lijkt zijn documenten standaard in iCloud op te slaan, dus het is gemakkelijk te zien hoe je toegang zou kunnen krijgen tot hetzelfde bestand vanaf beide apparaten zonder het elke keer naar jezelf te hoeven e-mailen of AirDrop’en. De Nieuwe Playground-pagina van de app heeft linksboven een blauwe Locaties-knop waarmee je kunt bladeren met de Bestanden-app, zodat je ook toegang hebt tot andere cloudproviders, zoals Dropbox, Google Drive en Microsoft OneDrive.

Alweer, als je SwiftUI alleen in een veilige sandbox op je iPad wilt leren, zal dit niet zo veel uitmaken voor je.

Het is mogelijk om SwiftUI in Playgrounds te schrijven zonder een voorbeeldvenster. Om dit te doen, importeer je gewoon SwiftUI en maak je een struct die voldoet aan het View-protocol, met de vereiste bodyvariabele die ‘some View’ retourneert. Playgrounds heeft wat code completion en kan je helpen je SwiftUI te corrigeren met automatische fixes voor veelgemaakte fouten. Maar de echte kracht van SwiftUI in Xcode is de mogelijkheid om een live-preview te zien van wat je aan het maken bent, dus we hebben nog twee regels nodig om dat op iPad mogelijk te maken.

Met het importeren van PlaygroundSupport krijg je toegang tot PlaygroundPage, waarmee je je iPad-coderingsomgeving kunt configureren. Er is altijd maar één Playground-pagina actief, dus deze statische instantie is toegankelijk via PlaygroundPage.current. Dit geeft ons de mogelijkheid om de live view, die continu draait op de iPad, in te stellen op de ContentView die we hierboven hebben gemaakt.

Nu zou je in staat moeten zijn om op de ‘Run my code’ knop te drukken en te zien dat de app verandert in een gesplitste view. Aan de linkerkant is de SwiftUI code, en aan de rechterkant zou de live view moeten zijn met ‘SwiftUI on iPad’ in vette tekst in het midden. Nu ben je klaar om je gebruikersinterface te bouwen, die gebruik zal maken van veel van de controles die worden geleverd met SwiftUI.

Voreerst moeten we State variabelen gebruiken, die in principe gegevens lokaal opslaan in de SwiftUI struct en de View opnieuw tekenen wanneer hun waarden veranderen.

Voeg deze toe binnen de ContentView struct haakjes maar voor de declaratie van de body eigenschap. Dit is alles wat we nodig hebben om de status van al onze controles op te slaan.