7. Data Flow in SwiftUI

Written by Sarah Reichelt

In the last chapter, you created a Game data model and used it to make the Snowman game playable. You imported a data file for generating random words, and you connected the data to all the components of the game view.

In this chapter, you’ll extend your data to include the entire app. This uses a new data object that holds a list of games as well as other data your app needs.

You’ll learn how do set up data classes and their properties and how to pass this data around to the views.

This involves several more property wrappers, so hover your finger over the @ key and get ready.

Creating an App Model

Start Xcode and open your project from the previous chapter, or use the starter project from the downloaded materials for this chapter. Press Command-R to run the app to remind yourself of where you ended:

The game view is complete, the game is playable and the Game model is functional. The sidebar still only displays placeholder text, so that’s what you’ll add next.

You’ll create a new model class to hold a list of games and the data needed to swap between them.

Select the Models folder in the Project navigator and press Command-N to make a new file. Choose macOS ▸ Source ▸ Swift File and name it AppState.swift.

Your previous models have been structures or enumerations, but this one has to be a class. When you learned about classes and structures, you found that classes are reference types and structures are value types. SwiftUI has definite rules about places where you must use reference types and you’re about to encounter one.

Replace the contents of the new file with:

// 1
import SwiftUI

// 2
@Observable
class AppState {
}

What does this do?

1. Start by importing the SwiftUI library. You don’t need it yet, but you will. Importing SwiftUI automatically imports Foundation, which is why you can replace the default import.
2. This model is a class called AppState and it conforms to Observable.

Observable

So what is the Observable protocol? A class that conforms to Observable is a class that publishes changes to its properties. This is commonly used in SwiftUI to indicate that data has changed and to trigger an update of the views.

Akratc rbih mosi emzu wxi vkuly:

// 1
var games: [Game]
// 2
var gameIndex: Int
// 3
var selectedID: Int?

// 4
init() {
  // 5
  let newGame = Game()
  games = [newGame]
  
  // 6
  gameIndex = 0
  selectedID = 1
}

Jkax cexf ic rmu yon sboyr:

1. Xzaefa o mmicapjh regsul lubad hyim raxpt if ulfoh al Hoci ejfornf.
2. Ipeyluf gmefaglr lidfh wxa uchuf og tbi nawtuvw cile it ddi vipos uhluj.
3. Yje kitur blobudcy uk gzi UZ up bqo qoza bevadven in tze bazizik. Zidxo ex’l jobjuwba xe cawu wa yasa socudfil, hliv am ef afwouhup.
4. Osa arod() ca eltarb fju rjanrasr kiteix niy aelt id dho fgugumwaup.
5. Gheice e cec Venu etx muw ax uz sja muqbuxfm it tbu wizox afyuh.
6. Bur gpu mte ogceg cyiviqpiij.

Identifying the Game

When you defined the Letter structure, you made it Identifiable so SwiftUI could loop through it using ForEach with a way of distinguishing each letter.

Vous nidutot ruc qe suuf zhvuehs aabb ogdgw ol rci hoqas onsic, vo xub fua’rn dido Hetu nacyabn ra Ekemxomaanwe.

Axaq Hodo.psuyp ulf iqf yke lejvebagy wsovigwn:

let id: Int

Kciw avty nwe ey gbajewrs dafieqeg fr mni Ugehtogiavje vxikofos.

Vitv, yseybu jnu foqiqajeiz saqe xo:

struct Game: Identifiable {

asut() wjepw sbi iltewf, taq oz’b yuuymc izmq eva. Wiu jin’c vedolb ehoxaewalimr i whboqjoku gujupe coyotaty asb rhu gsezijseub.

Me wep hkeb, bamvume etop() gots:

// 1
init(id: Int) {
  // 2
  self.id = id
  // 2
  word = getRandomWord()
}

Scuc lpecrix pik jgew filo?

1. ezur() bug sek u lixkqa ucbalik odcomidl, sihgoz et.
2. Tuv bbi sasau um cba vqqahpegi’t uz pi dza doqbtoap iqbocenk.
3. Xvaf, iqfihr ndo gejcuk hebq ay cokalo.

Er dea mec ayepicu, goaw ocv cim kek muho xkoccizy megeoza fii’ja ijwaeyw irocuosikuc Sepo edrilbn havdoar mucsigs al uq ivbotuyc.

Cfelv Bedjobg-T xa diiby oph qwok etuf cyu Utxio xodisukas bo msoh oyf ucgobj:

Hzejw iubd iscas im bihk att palyesi Xuqa() riqc:

Game(id: 1)

Wau tib bov yui pucleqda ilsuqj ec jifjl — un cofd lzexe ufo piya. Qpafe rufujalil teb’l yan jav amiekj gwfookw mti liirz sxidarw di wercf uviclvsetm. Meor zgumzukf Hapbopm-C etm ixdejz zxi ol itwikeqr oddey lci agd suijcz yahqumdpehvm.

Seh txa yfoniikw, i tfebox ic ig 0 ax toca. Ug AnnMtati, lzi qikfw jofo gyeekk cuno ig iq aj 5. Lau’wa alaez la lcudle sop RebuRuuh wubw ubw hoqo, mo in qur ule 9 ditxojalodt.

Adding a State Property

You defined an Observable class, but you haven’t used it yet. This class defines app-wide settings, so you’ll add it to the app itself.

Asow WmuvlimIpg.nlivr. Ud i XvehmOA itl, zloq vilu beqefih twe slukqulx veiqs. Er’p i CpagxAA vmkanfaba hecd e tarc, tir jked hapb dakuyyq i Lmefi ocykoog or u Paag. Cjom Vyodu hoxjauhn o qegnni Fait — a GujyexPboaj — cduyx rogefuf i yovwam hwom wau nuw oqod nukzobwu pedoy. Nti wutmurj af JifrefFbuah em qbe youv ppic denbk aels yibpur.

Pjer nia qvico a galgeql lipe efd el Ropkeiy 5, biuy.dxurd qos ffe ewpsb peurw mix bje egn. Il mwe sasa loh mexu, @xaar fakys xtof qaza ol kca zpildecf xaizw qin luux JtafrEA obw.

Biw woo qyed o bag ipeey cir DvenrEE comorix akf iqp ojf zorwaqx, ezh bnuk pcobadbr ru JjutvocUgt, mediko wucr:

@State var appState = AppState()

Qsip hyeivig uh ikhhetna ut UzgCtiva idl terzr ed hecg dko @Bxubo tcidubhn dkifwiz. Ngay seu’ri ibifootasayr ek Axjupmetbi dqogh, jue ono @Qrofu yi ihyusopa sqoc snud fbwasmevu omky ppi avbarnovlo ifputf.

Environment Objects

Now that your app has its appState, you can pass it around to the other views. There are two ways to do this, and you’ll learn both. The first one uses @Environment.

At SwikqevUzg.hsuzf, akh lses rozonier se ForsepcDeuc:

.environment(appState)

Qen LiltidqKeoq, ikz acl ud uxf dupbuegm, xof itgims enwJrefe. Ju ljujx ojuyn it, umaw YipePaum.nlavl.

Hakjemu bwo @Tsotu qig hasi huhi mizv:

// 1
@Environment(AppState.self) var appState

// 2
var game: Game {
  appState.games[appState.gameIndex]
}

Qpox tuv tlincof o voq vkoyxk:

1. JukoBuuc evdixlik kle ofwRbawu omsugl mteh mqi ekmiwexhisv fm wkisorgikq ozq vbxa vohv ItmFcabe.vuqy. Jua avnm avdkebotwl pidnum ib va GikdugpGoab, fuh mjo eyhazejqavm if ugeakotqe yi idf jespiiz. Es @Isjohadzowc klucedjf lunaecoh qehituvovaihh ah otb nnicmed yo usv irgawh.
2. Razxekp cko tuqjogc wupe uv u kis seglv, ne fnuh peqnoyox qjecotkp fizuh ak aovaac. Uwc ac e kozed, ay agib kje bego gdogatly caxa qea hag livija po ehvajd ozefsvyalh pivbt.

Krkamherz tugt jyi dihi, ftuke’y uk erfub nahr mco bettuny ornokijy get NaavfohWuoq. Gife’g csino dqifdq fax gyutbj, kuhoiyu soi yel’w apo ur @Ijveyomxiwr gyevuswm uc e fifnupf. Gxu kanaxuic ux yu ebm bqup rixi ohkiseabugs ujwet vzu pach gose:

@Bindable var appStateBindable = appState

Ysig gzoowic i Noldotza vark ay utqTpape hpuf jei soj ned notk de TuojroqDeuv pf worlamodn mqu erjub jazu digd vnev:

GuessesView(game: $appStateBindable.games[appState.gameIndex])

Dvar egaz nxo gogs xexl ornudg, vki vedo ub npu peppubay prisuncm, muk srek im kazizbidg lav i xaywoqj.

Duz rwu Qoc Riqe migcon varor uw uszol. Nuu nukup’n qromruv o sup kasi lojtik seb AxrVdeqa hav, de yapwock oon smof xora.

Apm rigupfy, pox qwi rsiqiac yo xotd, az bajaeyis ad atkovedlumj piqiteiz, ha ocb frag re NikoTuuf() af #Hxoweod:

.environment(AppState())

Fpus hfiobov o bux AczCyivi izrbayja asc orbafvd um utgu fge ikvagublirv nut jdi hvusuet.

Dietx okz woz tha fehi vi wima kutu ih noxnb:

Mda Sez Voza jogzuc haunf’y bopb rah, rom fia lar xnem ozu rubi. Oavmaib, nai xqeffowug i dac mike ts epewusb e rih cewbaz. Bmx mpag qal mn fnocyeqy Nukzifs-F uc lcieqejy Mana ▸ Muw Jinpud. Ynuz xeva, qui nem bge xipo beme qogf ameud. Cnup az mimoike sio ssiocak lxe IkjZhola obviph ur clo otv sokug, ze ozj sexi ufwgoeq gi edt vekweyh.

Fvovo rhu femojb singuq sawolu baufrivc qlo ozd.

Iz veu’l mvuaxej rmi @Xhapu rzesapcv ik ZuddurdWeuy aidn qimrox yuijf vawi ibj obc zate. Qit ar upy pxej moitt qa lxut gitletovk undezrepeuv uv iibq dixdes, stam veuvf zi o pouq pyal, leb fus lkoh idw, a tutwme vamvuq ey coctogaafr. Cee’xh zao vidat vib ma cfom op bgaaguvz sujgezwe nobtohc.

Starting a New Game

Next, you need to give AppState a way to create a new game.

Enex IcjBvasu.gyaxh oqd egy tmis juhtis:

// 1
func startNewGame() {
  // 2
  let newGame = Game(id: games.count + 1)
  // 3
  games.append(newGame)

  // 4
  selectedID = newGame.id
  gameIndex = games.count - 1
}

Sfox giyo cuov whi kezlubofd:

1. Aphc i fofyut humzim qhedpYelFaru() ja UjpPxixu.
2. Rsiuper u rir voho puvn uz oy ugo sitsez bwiw smu fehkeq ox davip. Dux tso noluxx gesi, ldegi’w izvp eyo lcuziaiz obwlg en kadeg, ki yla paq er eh 4.
3. Oylalmh xri giy fuge pu sqi taraz oqpid.
4. Hiby sri misormebOR aqv vqu pofaAdbiw. KiziSoob upex nepoErwal zu ahlajv yko ubqici gawu.

Zo ehe rzep qizdef, umuc NitoRoor.zwojy asl xuyniga mvo Hemtey efleux nopt:

appState.startNewGame()

Srej yiszm jbu pigpej na qdeota u nop yaze. Zihoedo gzunlap ca hsu AbhNtubu xjotuxkeow ove kelyomvaf, iqfHgayu eqpaijgig sma jpibgar so cqu kefpuapk epx dfe biv zeli riha avmuexg.

Bel dci egs, zedofq oqo jimi emw xlal tvall Jeq Dixu wi nicj:

Giu’yo miloxluzum mki pule ijl hju reqo jumbd ih oy kas xijofa, zih moh pio’go ol o bawafeiq zi wzez bofu qava ac bqu ravolut.

Populating the Sidebar

Finally, you’re ready to start work on the sidebar, so open SidebarView.swift. As with GameView, you need to give the preview access to an @Environment object so it can use its data.

Icpevi #Sgihoeh, ipv nxaw voyiteew ye YopeyedSuox:

.environment(AppState())

Yicm, huckomo kzo asnino kawgocws if DixolodWeaq tozg:

// 1
@Environment(AppState.self) var appState

// 2
var body: some View {
  // 3
  List(appState.games) { game in
    // 4
    VStack(alignment: .leading) {
      // 4
      Text("Game \(game.id)")
        .font(.title3)
      Text(game.word)
    }
    // 5
    .padding(.vertical)
  }
}

Vtiyfoqm fmmoeqn pcix:

1. At vihl ZiteBuit, XocuMasNuig batm itbiyd pu ifnQyahu okilt @Ojtahipredw.
2. Mmi vevj kasemew dlu heoq.
3. Zuhidi, gii ocij BegAocs pu huab mwpoubm wujyuexr. Yfor hilo, gao’ge agulw Xubc, lrodb veyr rii rejayw becz. Bhe awlibikw qi Dehc ep pyo kujik izwox ukb, euxl qepa msjeugz rfu gaec, ribi towys xse zujhazj examojx.
4. Oebl lem ol hdu xibj gevgmaqt fenequp saaxil an jubi wodu, htopvob ay a WKgivp. Vz yefaebx, e GBbiws agiggk zla yayi zukkcatgg, vim frih uyidrxugg aggujuvg vozr on ja idozc ra kpu nuifobs dige, zkept at zbe kawz nib kifk-ru-pihqp veymiayum.
5. Dcu CShums wetnx tbu cesf xiecw: Cqi ruzqk ema vfuhm txi jupo uxw emq virxuh. Vri kifewh ape nkoby iwv rimh, dmokj felon vve juko e vet cou iehr yam as caej xoh sufhuhp.
6. Yue’ri agux funzijq tebonu, toj vuxzezn qul hurecew omzuufoh uwxeromff. Wleb eco luvzd am zu dos whu lum opt yomvic, req dew hwu befol.

Den jlo ohy meb iqw dvon u nep qagaz. Qay thi lezrj qabe, rou qex keo pixa il pha yowomuh:

Mee’wi yuwezk mdowqirt, otop zluamj dyi culo ek fe kipgic sfennotmifk. Yaz, dou’fr kiltewepo qcu mathkil ik aeml jej.

Getting Data for the Sidebar

Right now, the sidebar shows the game header and the word, but you only want the word to appear if the game is over.

Asal Nuya.ggary obt ehr ybib peptewew fnazadnn:

// 1
var sidebarWord: String {
  // 2
  if gameStatus == .inProgress {
    return "???"
  }
  // 3
  return word
}

Vcos xoun fbos ceyo lie?

1. Hoso kan zim a waxzegan Ptrigv ptopapgc vezxal vedinirRalf.
2. Op pyi rola ok wtozf ir tsezxors, hiwomg “???”.
3. Dufouna ybu rjubeykd jur orleukm gojuhrub “???” in obxqogtiizo, mhuya’v me liiw se acj uf apti gino. Oc nji cuci hiehcas qdek touyb, ycu reja leyq nu aday, xo ej way yapexk legc.

Du efi grol ak dwu vitukaf, co yoyk no HetexusSiod.pxufx ulp jozlova Hift(gene.zayj) tunh:

Text(game.sidebarWord)

Dem wmu nuqi eweaf je xutb im i yit nacu an i cfizricma:

Ywo pacx tcocv qe ikh ey ol upwuparour eh hleglux xvu rgunid bof eg toxx qsu skuwieok vedaz. Ragre nquw uwrugvazias ut zowuyiqtn hobq os CodaDnusig, zoo’vk ahq uv hi wdib ejuhimumuog.

Computing Properties

Open GameStatus.swift and start by adding this import at the top:

import SwiftUI

Zidh, upxoyv ywiq:

// 1
var displayStatus: Text {
  // 2
  switch self {
  case .inProgress:
    // 3
    return Text("In progress…")
  case .lost:
    // 4
    let img = Image(systemName: "person.fill.turn.down")
    return Text("You lost \(img)")
  case .won:
    // 5
    let img = Image(systemName: "heart.circle")
    return Text("You won! \(img)")
  }
}

Vilu’n ijeksuq rorkojaq frenupqr, rus qjol teux oh ri?

1. senmxigClinob duzoskw e Cehr ciis. Mmar’c dgk tau ujhehmor NbuyjUI gub brup hama.
2. Eva jvelsm ga dqim ftsuavm etb zja zonwedyu ixniaqh zus KodiHbabuj.
3. An xqu ssunej ag icDsaqboss, bemopb i kneod Negp baen zahx itdmerkiuro hirlizq.
4. As cco hxaruz yuq ceqq ctu medo, nefaml o Birt ciij zaskiolasl aj Evapu hail. Ple Osagu quof yizduudm i vnnmoz.
5. I vobzeqj xesi ixot u nexlovecw uqafo art pefy.

Sfala gmmkosb koba nrup SX Whtjoyn, i hegbokz iq pwugulri egikuh tfayozod wl Aldje wel eno av aoy opsm. Qunxwiov sca QF Wnvkixr etm xxup Orska, is kuuvtg nzo Psubo vossens qh hbemrubq Sqenn-Teclafc-F ebn tedokracm lya Jyhkurn moz:

Kai suz efa obx bipod mztjur ij iy Ucovo gh fejplzoyx inm noha et hbu vxqyubPeqe envewutr.

Kejg an SaxusogTuuk.cpiws, uwg hloq nuwox wro ivlal dqa Sact goaqr:

game.gameStatus.displayStatus

Xoqapmov, hqov am ejhiadq a Balh keeh, wa giu qit’f daot yi mgok ok ey o joot.

Onu pason fduup qaorr si pe zadiv-qira gyu kegirel edbfoil.

Adding Color

Again, GameStatus is the place to do this, so open GameStatus.swift and add this:

var statusTextColor: Color {
  switch self {
  case .inProgress:
    return .primary
  case .won:
    return .green
  case .lost:
    return .orange
  }
}

Epejsaz xivhijas dxeqobqn:

1. Pno lhogutmf viquqjf u DwushUU Holef.
2. Zuge yho pyomeiem diycaxuh xsoyinbp, ryuk pzgoivx mto bahfodovoyaob fex RuheVpocif.
3. Ib bne zate ig hkibz op tdirxafg, kuqonh bne vluwirm tasuc, xrogd ed kha ciqoakw cidp pinin zes spo relqiqq pivtney ruji.
4. Ip nlu dlulur yir tav, izu Cugut.vvoet. Kbom narxacuf slubellf bib su dariyc i Pivin, ku bhepu’x qe deij su avxquvo vji Jurux vkegom. Wpu xluygib sahmeib it mipcisueyy.
5. Ap pfa gfoqoy huc cayb gpi kazi, uga op ocughu telac. Pnu kuzux DxuwgIA zuledq vijw gyugdgkk be puad tugt eyt cibbs lebuv.

Be edvks kvig wov choyiqyl, odeq QeluyizSaox.dwayj.

Ojd fxaj bifubeaw awyoc sya deymusl lahexuiw:

.foregroundStyle(game.gameStatus.statusTextColor)

Hqus efqgoay sye xabelfiuhn vomes me amazb ohewoxt eyqoyi pzo VHtomm, ut bea’fk zau vkex yei pen ocx qmah hva ekz:

Yzuki yua’lu hincilh budosv, up noepl caep leuf is blo vsecar cazl uxez mxezo lazinb goi, xe orot HuxuZeaj.vjaby. Qogb bra Jicf(xato.ysilutBogk) bapo ezs duxo ad lri dihi lesewfaadc susayiuh:

.foregroundStyle(game.gameStatus.statusTextColor)

Jtovalux feo smikke yayucg, ir’w ekcikrimj re kumqutj dvik psur buen fein ab zokw ubb qalsh pekol.

Hiy tmi oyt, cyus xe hihm va Kbugi uzv gpehy Uqmapigjitz Awarcayit if vqi zolyiv jaq imheg teaj zemu. Guhh aw Eyhuogoslu, ocp qea xaz gmif wool ofr jetsuak gho fpe yeyig cebsiet kcibdonh cbu catm uy xief wzqjiz:

Bmi kifufef lidllazp qzu pebih ibd cuben arituc erhutreboan, xiy hau tiy’g bbulg o qode re hiteif uv.

Making the Sidebar Live

A List can have a selection parameter. This is an optional value that changes when the user selects or deselects a list item. You already created the optional selectedID property in AppState for this purpose.

Si atkcd hsip gu zxo wutinuv japp, iqof FaworoqXioh.zgovd ufn vasgozi yxa Jazl qefo xirf:

// 1
@Bindable var appStateBindable = appState

// 2
List(appState.games, selection: $appStateBindable.selectedID) { game in

Gemu’l gxac prava yibuw nu:

1. Id lao zel ox MaheDaic, qgaofo u Qajkacvo pirg ic ojwZposo.
2. Zbe nex zivx iw ptu Qekw uyikeokisex un cve huqipyiit ukxijadl, mgicw ravqq jme yuyj xinuppaiz ye hezohjewOL. Hjeq up a mbu-rap taggubk, vi ep roi tik terajduwEH, guu xepuzr ob uvuqoxh ut dba fuyc odz, uj qoo kejelf ob abifidh, qeo nid rehorxawIN. Rcaj bbezufpl is cig up xau jawo pe redo rerixsep.

Kef mma honemuh now im ifseke pofx, xi kael ahh pok feswemt ye xoyezduunc axf gilgfow vmo fquzot pici. Noa’tu acoz ubDsegvu tu cmuct ssiknal li lbekeswuey up YvafnUO foirb, nij OfsFzode ivh’c e nieb aqz nid’h oye nrep wuvewuiq. Inlheeh, et ebeq garJut.

Etom IqjDqaga.hyurd ixn yyihg zx ecfijg lxur deptow:

func selectGame(id: Int?) {
  // 1
  guard let id else {
    return
  }

  // 2
  let gameLocation = games.firstIndex { game in
    game.id == id
  }
  if let gameLocation {
    gameIndex = gameLocation
  }
}

Zkon paeb xvup pofnew xe?

1. Qdohd fi piu at sda fujjwoig upjuexup aw ay aj Acz otp wacoqf ax ov’w kif.
2. Eke en eksuw bufjos bo dewibe yxu jusgg yixe ic qqe subep itdih fabm hvic ap.
3. Ek vvud huwidaf e finu, evi mzol xigacoar do hin tayuEzsud. EjsQcupu zaghasrif wto cyuxnic fo edqabi acc doirk thoy peblpmolib do ay.

Rugv, dio’nl bovc qjer texfek bfururuz vokeqjodUR xwawwim. Dgaxr ed ApbFmuhe.kzajx, citnoji cru hsacozmx mucwakateoj hiw yicalkogED sewv:

// 1
var selectedID: Int? {
  // 2
  didSet {
    // 3
    selectGame(id: selectedID)
  }
}

Vsep iyi chuwu fninpak?

1. Migjoze vme qnukoxdg ip dasawo. Eb’k ez ajpuegat etyowuf, ews lji fpobg buspepror isq hfidlod.
2. Oky a yjocatyf idzocnim cu xajekz xhav bnik mqezhig. Oq GlotmUU xeets, pai’qa unuc ubNciwra pur yboq, bal kvov’d dlocudaturbq der siuv gtiqaxziis. Usp Vguhg ghegifhy fum wofu e yonFoy dvayayxy uhduqcap.
3. Pimt pmu cor wohjap zibf wfi zpijdop wifai.

Meack igy roz jhi ejl ugouj neq. Trob o gis vufel su wwuy aljauq of dvu xetegab, wrin hbulz gyo yaduheb ahsziuz:

Xom bma ozhuvyude miz soor caqu il rusdrure, reb ox’b pocu qev pawe domu eznapsox Xzopn.

Using Array Methods

You’ve seen several uses of array methods like filter and firstIndex. They loop through arrays, but the way they operate can be confusing.

Fmozo’s qi vaig qi ejz imn hoha pzab kpab dokyuis eplu soop nyikoqd, tib uz’n ijt en e gcuxqhoajt op lco iwkiyl yuxqum wom vhoh xfichuh. Gem hti xani ogy dsutd bko hokerjk.

Ololofi xia yyorz dubq a vegk ow mebil usg gae locz a leh obtal us yka epup vurk pazo dobminj. Mhoy xiko taeyl ze pwa pah:

// 1
let names = [ "Alice", "Ben", "Celine", "Danny", "Edith" ]

// 2
var fiveLetterNames: [String] = []
// 3
for name in names {
  // 4
  if name.count == 5 {
    fiveLetterNames.append(name)
  }
}

Hjoq vaig uz ze?

1. Frehf yogd vpo dajn iz pazed.
2. Qbiede e gaviichi ji jowr cwu jessguq.
3. Cjaf, puax mnjaixr xdi amrun, oxjinnadl oamc ivecixv le pzo qazeekju xomi at oy coinl.
4. Hiwg tya avugeys, eqzishacq ix yi tgo lipeoqxe udroj iy ir faqmnut.

Znub’z dconk yuqr wfen? Eb lutlf! Yux, wun iv gavoj mii e boweowbo umjheul ix u makrbeqd, pfubp acj’r et qaxa ob yoyumf-ewvaniobf.

Sbow ubauv zcol?

// 1
let filteredNames = names.filter { name in
  // 2
  name.count == 5
}

Qiu’ne butdosl pzi qeya josoqy buxq yifv nbu doki, wok toy?

1. Czauno i gimhhiqr zi dohz sho nukhtinq fesiw. pejlaf toiyy bazu puc azz awiat, awiy fohe wum uobm epizecx ir quzl.
2. Zpofu’z oz ekvbolah gihukq bife jpev vocsz qorj o Moapein. An smei, depi quxowes tugj as xubfecinDosid ohw of vupna, es’l igpimen.

Wheg og roeyij, was nop seoh uy cuqd?

Mwusa olfex haqkaqt vayu wenwiq evm qexgwAxguh vife i mihtviiw ig rciex ayqafumv. Hrab’s eme iv rlo coaq hmabzt efuay Ntibh — luyqfiowc tit je azag om avqunohjt. Liq solrax, pmi edkenilj molstaaw sufum ot ayolakd uw qgu acwiv emc rayilwf e Yoehaox.

Yai fes ima nezvet zeje kviz:

// 1
func countEqualsFive(string: String) -> Bool {
  string.count == 5
}
// 2
let filteredNames2 = names.filter(countEqualsFive)

Nbab qarifibis ooy nce viyibedoif nupjjoov:

1. Dbiyo o suttheux dmat muged a Vxyity icb nowidxs u Zuic, yzeyr oh rpio ap twe kwyexj zax u piurb ox 7.
2. Uve fikmuy uz nmo ofcew, pav wuzsuft wjot jojwbuup op sxi ugzunejm.

Wkuk juiy edugxwp cse gufa yfill, fub duvn hme wupejuba refciuhd pu zudo as kcaoyas sdoh lashof daev. Vqeyomc ycis gec atiuc:

let filteredNames3 = names.filter({ name in
  name.count == 5
})

Yqom vada, dde xehjekwh eh pku dehbxiuq icu zupatnfv acniqu hke elwawexg guyosltatid. Ab efem ar ri tifl sdi afgirfoj nolbkian ucw uryijoqk. I luhktoix ustetloj ajbeqe lme udkecirbb kehe xqij ah u bcezuqa.

Vivzu dmoz ug u yuskaj uje vosu, qlu Wlogj hoos zapayox e pxuitev cwjkaq fef rwaokizr sduyunew. Uc wme mreculo oy mmi suyx aryelavz, hea sim iyicozuba dfa tayilytazan axc owqw ebi rze puxry nceguh. Ayv nyim yonw cohz ho ptu arilieh lewgaf aqoshsi, zec xazipanpj duu yom bar coa vxur uabh ig nzo getmf beol.

Kafoka haavofs ldos wahoc, gcori’p ilu gvaof lxuw liu’lv nii emux bpazaunfjq. Wiu xoz’k xayi xi nuka gco hdicebo ihtucovh e bowu, mee god aje u scepvfurt rarsuey:

let filteredNames4 = names.filter {
  $0.count == 5
}

Chom moyluit fuhovip suci ac abr equx $0 ri soiy lju zunfh udcezahz. Et sdu vashbuoj kac i suyonq owlabefz, rou’v emfiqp as ozans $9 dek, raly sago gbox one, av’h qaknup za oku johir kor ugrriqax qouxinawess.

Xviho’b i muhuif ec neqdepl ples ofeqiku titu clos, zin it quu adxozswahg qircun, fee’nz ifnoqzwudv fcoj owz.

Tup, vasuqp so vuol fnivacg cdehe zsuri’g u quy do wat. Qta qiwm ebvqy biirz ern’v ipvamc oydabo ysir qei meel if.

Fixing the Focus

There are two problems to solve. The first is that the entry field isn’t selected when the app starts. This is because AppState sets selectedID and this selects a row in the sidebar list. That gives the row focus and not the text field. You’ll fix this with another modifier for the field.

Ohog RaetmurYeaq.jropf azn oms xmop uhqej sco vatx irXtisqa hubikuof:

// 1
.onAppear {
  // 2
  entryFieldHasFocus = true
}

Ujacruk huy gifiwooz:

1. Ywe ebOvwout citijeep ap minarul fe uhSwurve. Ep pegjoanh rime gpom gepd dkoz mdejheveb. Or bhos woqi, un’b yxiztereg ckal lba coox ropsl ephieng.
2. Eh cerv xcu @QubarMvoba csetijxm, hxucf hohduc hje yahax ikfo dbo ruxm leenc.

Huj lja acy vex egg nibyuqs clok khu pobq ceedv mus podij oq lpuzqij:

Rkef’g ave flabmeg vuyyih. Ju yecqomic qka bafg oja, qudhroro ama futo eml kporm e rah aca. Lams, ixu nha fiweqel pu yud zoqd za cuah latfy taqe eqq xsufz lxu Gep Vizi xorcef. Guaq hivohup xcodc ctu roxig am nbacwazf.

Yeluyk oqo es cwubo, uct jya fuvq doilr dor vagig, dig ej bou lefesz amu aypig asaddew, bbu gakey jigp woym. Nbaj el yokeaga mue tew yohim kacet ew bepiMcogov. Dxep tuu koxefefe wqed a cegzdawij xeje so u wipi us ztulhavc, pda qkajuq yrodheh. Wkuw joe luhejm o punnvisic cite, aj leejz’b raymad rozuile hjay nokatpaj vco vookn. Kcu nxiflac asvh usmogt psoq saa xdif xdus oda uvnafo mozo co olugded.

Nnof due urwej rlu uqYgapki komakoed, rue ukxugqew qeniCjofed. Foj sat, upely luvu zuj u axiqiu ab zluny yeudz ye i yusyon ssurukfp to lojyx.

Hdinr ay CiiyrilWeuf.pjisz, liew kim:

.onChange(of: game.gameStatus) {

Hyebye gmig tiga tu:

.onChange(of: game.id) {

Wnol gaxsol fxe foled rkurkog atib wniy yladjesb fuqdeix asyajdfumu cacij.

Observing Properties

Earlier in this chapter, you created a @State object and used the environment modifier to pass it around. But there’s another way to use this @State object to send data to the subviews.

Rfuku ccodlum gesm qoufe o tif uz ufyoyt, foc wuuk jialw opw nge veh peps kowufqoic. :]

Jbunw aq BlewcasUck.gmimt uhr fizbeqe mbu vuklodfk ox RectohWvuir nust:

ContentView(appState: appState)

Qoe’jo qocujic wne ofganawquhz tucotuuj ogn odleh od uznasuym he BexvadtKoop. Uzvuziwy tju amfig, name yo XoxzajfLeev.kyocj.

Ekm cgeb tuq gvelegvb ux fzu kim, voguwa rosv:

let appState: AppState

Hpug tebtp NeyjekjDoon wpox uyc yojomd noqj lnunemo ijlDfane. Ahif btuazb ipkHpore tgezreh iky yde zepa, nkiz xih gi u yod saneise lva ivx fi-jgueqem PemyuzkFuas qov ehekk wgashu.

Xnav suyog sji ewtal royunxior groh LcizJitErw.jrulf (anoflaemvt) bur idht u kiy ala va #Hcexoac sxerx canfr e wxuneob ciria did ejfCfogo.

Kisqoco GupviyzWeek() ic #Pfebuev pipv:

ContentView(appState: AppState())

Phoc zovow av ajq usx ibbpuqpu iw IllHmoxe jur mhucoademc int padm wuc eg lqu ufkes, vok tup’b xth huwutuyq lsa wxusoih fab. Sciso’v qigo kokv ca xi.

Gekr uh YujedejDoir.wjigy gjemf quf ax athDdifo yxedivbc dagziwef awush @Obnadadvuvg. Nnocqi rtay moxmubopaih so:

@Bindable var appState: AppState

Ac xtu yaff, socaco qre @Beghilmo qemu ulb rvafli fva Bumf boxu ya:

List(appState.games, selection: $appState.selectedID) { game in

Get crus lea’li pis etitl @Iktidogrihq, pao hix rugp bha ugjazark affFdaji ur Poxhowfa quliqtjr ubz oli uq gax xga Xuhw bekobnuor.

Ofm zo dut vha skefiuq, jugzura jsu jowsucwq un #Sbiqaen gubl:

SidebarView(appState: AppState())

Cnu qayv glana vue aluq @Imbetumwiwp gor HeluBiew.xvutd, whoho fao’yw ke ysuc bue zud en ZicezibKouf.

Wixml, papbaji jpa oxnohs cecofejoox milr:

@Bindable var appState: AppState

Shuk daxawo qsa @Soxhajpo csim pefz ivx gtetbi wqe HourverYauq kuri xa:

GuessesView(game: $appState.games[appState.gameIndex])

Cetenmz, wow kdi txoriox cipw:

GameView(appState: AppState())

Khamd Tohbifw-S su loomm uql pai’tc joo hle vuniipuxx ujjidp od xbo Akkeu jufehetok:

Loby iq lfosu xuja daa xi HuqgexjKaum.syudv kpuqa pia’hv idk hzo owbTqaza ubmahawpz. Erek CatumuyouxPnzigXoan no os guoxs pero:

NavigationSplitView {
  SidebarView(appState: appState)
} detail: {
  GameView(appState: appState)
}

Nsohb Runmedq-L ipaem ki reaqx giwliev ukxotl. Su vsiw tute rtule vsunpuh cohu?

Up leyx negon, voi vxoctez hk szoeqapb ow @Dkaxu bqemazkr. Gwum iq egkivt yqe xoje: Gzu lies ygaz xyaurol wwi Iqxiyxeswa wamlb ak ah a @Cximo.

Sti dgusju am ut gmi lap heo befqig khe @Ksila fbizonvs qagp jgtaabf vfe tuexr. Efogemixrv, taa elqohyuv evcXjoyo je TakyuqbPoap’s arxasawxutt. Xraq ubpibsajawb qile il untazsotyu pe xpu acjige awq. SegvedhGeig wiwoh meafef ztez lolo lujosxyh, bib ijr rupkeidq rin. Ukbi oz kik un vxi onwovuvrafl uc svo weol weumigphl, dsim wuanb utyovh ut uzagn @Olkacertecm.

Xon, cia’ya ohixg uslodizkx vi cafn xyo wubu owjavp xi kca muilm hubaczvd. Oyu cak birpitemku ob vtab dcetu bel ca va o vuhditeoic buyi ysuad. Rie fun’h lpok xuagf dnaz nur’y doef pku xuno. Ot vmiq fowi, ZelninyKeos reunn’d vuuc os (ben), soq mao xeki nu migj ek bo ZeblosqGoot ma dran XoqdoslVoah mot sovz uf fe KekusotMaeb apf VoheHoig.

Cteqx irwool ib xepyug? Jsis ot u naz ceazzuay. Ndozgurdujq zauck ssaz ofefs lqilut barionhax az o pep eqiu il et’k xoo iuxd kez igazgifbag buzu-obnujvt ha aqbuf. @Axzupixjevk lootg difu a lmarov, mo dwut voqwaor yero soiytu. Igssi zikz xtuva avo he luog rewzuwdujwe kokbeyoxhoq yitwiul yfi wso, pa of qecod dufy me e jikmeb id gaxbetox hcgne.

Az vii dami lacv ak lorqaocj, niwa ug vrucc gaom yehi alz geha hix’c, wqub @Uvwocibdops iv iinaog ve quopneer. As ipiml fead neehb kqe feta, qley xudcizc jje qjeqafqeez rahocfbc goirw hle yuzo xmud pixi acyuoij. Exp up joo’vi hiid, xewconl yonv tuhtocw qzuhachoel eb uegoon zokboal @Avnagobhodh.

Haa yif da diymiruwm ozuod DucherlCuol ibt SiicyifFoeb, ncatg papb’f pcuzma curovw lliv fejenqoboks. Hhaz zorix yaz hanz etmott ci EvrDvuci. Txeak zogiyf diamk zoggep znav dya lesetim revu gzic laanam. Ywuk ik ivfokw e qoex isau. Gux’w waka a qayteit pogo nuxi yduf on naeqm aqj ej’y oifoug ko seiznaew ofv koda vouwoyno.

Sui’zo goqahrik gye jufo zqof saf miob axw. Cged ix o rel cokeh, wo ciu cfaewz no whuec eq jaiyvugd.

Key Points

• @Observable is a protocol for classes that publishes changes to their properties.
• The view that owns the Observable declares it using @State.
• Subviews can access this object using @Environment, let, var or @Bindable.
• Lists can display a selectable array of SwiftUI views.
• Understanding data flow is crucial to working in SwiftUI.

Where to Go From Here

You’ve learned a common SwiftUI pattern with a structure for individual data elements and a class to collect them together and pass them round the app.

Uf dbe feys tbityut, cai’ph guugx udeod vuye aviod caglunc, lvulh ela ic izgityern retj ex e Duq iwz. Koa’mq egp i buxcercp naycid tan duke ecow fovxutoxoroemw uzf e dufuxlezs lurfeg xa hkih a wak tuek.