SwiftUI offers us a vary of performance to render colors, and manages to be each easy and effective – a challenging combination, however one they in reality pulled off.

To strive this out, let’s create a ZStack with a single textual content label:

ZStack { Text("Your content") }

If we favor to put some thing at the back of the text, we want to vicinity it above it in the ZStack. But what if we desired to put some crimson in the back of there – how would we do that?

One choice is to use the background() modifier, which can be given a shade to draw like this:

If you desire to fill in pink the entire place in the back of the text, you must vicinity the coloration into the ZStack – deal with it as a entire view, all through itself: 

ZStack { Color.red Text("Your content") }In fact, Color.red is a view in its personal right, which is why it can be used like shapes and text. It robotically takes up all the house available, however you can additionally use the frame() modifier to ask for unique sizes:

Color.red.frame(width: 200, height: 200)

SwiftUI offers us a variety of built-in colours to work with, such as Color.blue, Color.green, and more. We additionally have some semantic colors: shades that don’t say what hue they contain, however as a substitute describe their purpose.

For example, Color.primary is the default coloration of textual content in SwiftUI, and will be both black or white relying on whether or not the user’s system is walking in mild mode or darkish mode. There’s additionally Color.secondary, which is additionally black or white relying on the device, however now has moderate transparency so that a little of the colour at the back of it shines through.

If you want some thing specific, you can create customized colorations through passing in values between zero and 1 for red, green, and blue, like this:

Color(red: 1, green: 0.8, blue: 0)

Even when taking up the full screen, you’ll see that the usage of Color.red will depart some area white.

How lots area is white relies upon on your device, however on iPhone X designs – iPhone X, XS, and eleven – you’ll discover that each the reputation bar (the clock region at the top) and the domestic indicator (the horizontal stripe at the bottom) are left uncolored.

This area is left deliberately blank, due to the fact Apple doesn’t prefer essential content material to get obscured by way of different UI aspects or through any rounded corners on your device. So, the closing phase – that complete center house – is known as the secure area, and you can draw into it freely except traumatic that it would possibly be clipped by using the notch on an iPhone.

If you favor your content material to go underneath the secure area, you can use the edgesIgnoringSafeArea() modifier to specify which display edges you prefer to run up to. For example, this creates a ZStack which fills the display screen part to area with crimson then attracts some textual content on top:

ZStack { Color.red.edgesIgnoringSafeArea(.all) Text("Your content") }

It is seriously vital that no essential content material be positioned outdoor the protected area, due to the fact it may be tough if now not not possible for the consumer to see. Some views, such as List, permit content material to scroll outdoor the protected place however then add more insets so the consumer can scroll matters into view.

If your content material is simply ornamental – like our heritage shade right here – then extending it outdoor the secure region is OK.