By default iOS permits us to vicinity content material somewhere on the screen, inclusive of underneath the machine clock and the domestic indicator. This doesn’t appear great, which is why with the aid of default SwiftUI ensures elements are positioned in an location the place they can’t be blanketed up through gadget UI or system rounded corners – an vicinity acknowledged as the secure area.

On an iPhone 11, the secure region spans the house from simply beneath the notch down to simply above the domestic indicator. You can see it in motion with a consumer interface like this one:struct ContentView: View { var body: some View { Form { Section { Text("Hello World") } } } }

Try strolling that in the iOS simulator – press the Play button in the top-left nook of Xcode’s window, or press Cmd+R.

You’ll see that the shape begins under the notch, so with the aid of default the row in our structure is utterly visible. However, varieties can additionally scroll, so if you swipe round in the simulator you’ll locate you can pass the row up so it goes below the clock, making them each tough to read.

A frequent way of fixing this is by means of setting a navigation bar at the pinnacle of the screen. Navigation bars can have titles and buttons, and in SwiftUI they additionally provide us the capability to show new views when the consumer performs an action.

We’ll get to buttons and new views in a later project, however I do at least choose to exhibit you how to add a navigation bar and supply it a title, due to the fact it makes our structure appear higher when it scrolls.

You’ve considered that we can area a textual content view interior a part with the aid of including Section round the textual content view, and that we can vicinity the area internal a Form in a comparable way. Well, we add a navigation bar in simply the identical way, without right here it’s referred to as NavigationView.

var body: some View { NavigationView { Form { Section { Text("Hello World") } } } }

When you see that code in Xcode’s canvas, you’ll be aware there’s a giant grey area at the pinnacle of your UI. Well, that’s our navigation bar in action, and if you run your code in the simulator you’ll see the structure slides underneath the bar as it strikes to the pinnacle of the screen.

You’ll generally desire to put some kind of title in the navigation bar, and you can do that with the aid of attaching a modifier to anything you’ve positioned inside. Modifiers are normal techniques with one small difference: they constantly return a new occasion of anything you use them on.

Let’s strive including a modifier to set the navigation bar title for our form:

NavigationView { Form { Section { Text("Hello World") } } .navigationBarTitle(Text("SwiftUI")) }

When we connect the .navigationBarTitle() modifier to our form, Swift really creates a new shape that has a navigation bar title plus all the current contents you provided.

When you add a title to a navigation bar, you’ll word it makes use of a giant font for that title. You can get a small font with a barely exceptional name to navigationBarTitle():

.navigationBarTitle("SwiftUI", displayMode: .inline)

You can see how Apple makes use of these giant and small titles in the Settings app: the first display screen says “Settings” in giant text, and subsequent monitors exhibit their titles in small text.

Because it’s so frequent to use giant titles, there’s a shortcut model you can use that lets you use a simple string as a substitute than a textual content view:

.navigationBarTitle("SwiftUI")