We’re going to begin our app with the aid of constructing the simple UI structure, which will be two labels telling the person what to do then three photo buttons displaying three world flags.

First, locate the property for this venture and drag them into your asset catalog. That capability opening Assets.xcassets in Xcode, then dragging in the flag photos from the project2-files folder. You’ll be aware that the snap shots are named after their country, alongside with both @2x or @3x – these are pictures at double decision and triple decision to deal with one-of-a-kind sorts of iPhone screen.

Next, we want two homes to save our sport data: an array of all the usa pix we choose to exhibit in the game, plus an integer storing which us of a photo is correct.

var countries = ["Estonia", "France", "Germany", "Ireland", "Italy", "Nigeria", "Poland", "Russia", "Spain", "UK", "US"] var correctAnswer = Int.random(in: 0...2)

The Int.random(in:) technique routinely options a random number, which is ideal right here – we’ll be the usage of that to determine which usa flag have to be tapped.

Inside our body, we want to lay out our sport instant in a vertical stack, so let’s begin with that:

var body: some View { VStack { Text("Tap the flag of") Text(countries[correctAnswer]) } }

Below there we prefer to have our tappable flag buttons, and whilst we may want to simply add them to the equal VStack we can without a doubt create a 2d VStack so that we have greater manage over the spacing.

The VStack we simply created above holds two textual content views and has no spacing, however the flags are going to have 30 factors of spacing between them so it appears better.

So, begin via including this ForEach loop immediately beneath the cease of the VStack we simply created:

ForEach(0 ..< 3) { number in Button(action: { // flag was tapped }) { Image(self.countries[number]) .renderingMode(.original) } }

The renderingMode(.original) modifier tells SwiftUI to render the authentic photo pixels instead than attempting to recolor them as a button.

And now we have a problem: our physique property is making an attempt to ship returned two views, a VStack and a ForEach, however that isn’t allowed. This is the place our 2nd VStack will come in: I’d like you to wrap the authentic VStack and the ForEach beneath in a new VStack, this time with a spacing of 30 points.

So your code need to seem to be like this:

var body: some View { VStack(spacing: 30) { VStack { Text("Tap the flag of") // etc } ForEach(0 ..< 3) { number in // etc } } }

Having two vertical stacks like this approves us to role matters greater precisely: the outer stack will house its views out through 30 points each, whereas the internal stack has no spacing.

That’s adequate to supply you a simple thought of our person interface, and already you’ll see it doesn’t appear extremely good – some flags have white in them, which blends into the background, and all the flags are founded vertically on the screen.

We’ll come again to polish the UI later, however for now let’s put in a blue heritage coloration to make the flags less difficult to see. Because this potential inserting some thing at the back of our outer VStack, we want to use a ZStack as well. Yes, we’ll have a VStack interior some other VStack interior a ZStack, and that is flawlessly normal.

Start with the aid of placing a ZStack round your outer VStack, like this:

var body: some View { ZStack { // previous VStack code } }

Now put this just inside the ZStack, so it goes behind the outer VStack:

Color.blue.edgesIgnoringSafeArea(.all)

That edgesIgnoringSafeArea() modifier ensures the coloration goes proper to the aspect of the screen.

Now that we have a darker heritage color, we need to supply the textual content some thing brighter so that it stands out better:

Text("Tap the flag of") .foregroundColor(.white) Text(countries[correctAnswer]) .foregroundColor(.white)The remaining trade we’ll make, for now at least, is to push upwards all the matters in our outer VStack, so the UI sits subsequent to the pinnacle of the screen. This is as easy as including a spacer view without delay after the stop of the ForEach:

Spacer()