From the course: Complete Guide to SwiftUI

ContentView previews

From the course: Complete Guide to SwiftUI

Start my 1-month free trial Buy for my team

ContentView previews

“

- [Instructor] Now that you know a little about modifiers, your code is not the only place you can use modifiers. You can also use modifiers to make changes to your canvas device. So let's give ourselves some room here. I'm going to scoot this over a bit 'cause we don't need all that space for the device. And that looks pretty good the way it is, but you can make it a little bigger if you want, or a little smaller. Yeah, I'll just let it fit. And then if you go down the code a bit, you'll find there's another struct here called ContentView_Previews. This drives the preview you see on the right, launching this view into the preview pane. As we code views, you'll make sure this code has proper values to launch the preview, including test values. You can also test with modifiers. One easy modifier to add to it is for dark mode. So if you go after ContentView here, I'm just press Return and I'm going to just put in here colorScheme. And you got your choice of dark or light or all cases. I'm going to just go for the dark here. And it does something weird, okay? Many machines you'll find the text disappears if you do this, but the background remains white. This is a bug in SwiftUI, but you can get around it by adding another modifier and that's the background modifier. So actually put in here background(Color.black) and there it is up there. Now you can see that we've got our color here and that these turned white, but they were white on white 'cause, for some reason, previews just does not want to make a black background. So that's one way of doing it. Now I'm going to go ahead and delete that 'cause there's an easier and better way to check on how to use things over here in the previews. And that's the buttons down over here. First one we'll look at is these two switches here that says Device Settings. If you go in there, you can actually just turn on a color scheme and there you go. In one click, you can check to see if it's okay or not. And then click it off and see it again. You also got for orientation. So if I click on this for the orientation, you can see I can change the landscape left or landscape right, and see what it looks like in that way. I'm going to turn that back off. I'll put it on left and off again. And you get the same thing with dynamic type here as well. Let's turn that on. And you can see on the top there, as I turn this, it gets bigger and smaller. All right, and I'll turn that off. Now if you want to look at a whole bunch at the same time, there's this button next to it, okay, called the Variants. And I'm going to go into here and do orientation variants, and it shows me all of the variants all at the same time. So I got both the landscape left, right, and portrait. So I get some preview of what I'm going to be doing. And this is, of course, still responsive to the Device Settings over here so I can check all of them, for example, in dark mode. Okay, now that's the basics of using the SwiftUI environment. I'm going to head back to just our standard mode here. And from here, we're going to start building our pizza app with all the current features of SwiftUI.

Contents