Copy these four elements to a ContentView(). Build the code, and look at the screen in Preview
. (That is, do not run the app in a simulator.)
struct ContentView: View {
var body: some View {
Form {
// Click each element in code window and observe it in the Preview window.
Text("Top, Bottom, Leading and Trailing")
.padding()
// .background(.cyan)
Text("Leading and Trailing")
.padding([.leading, .trailing])
Label("Wifi", systemImage: "wifi.circle.fill")
.foregroundColor(.blue)
.padding([.top, .bottom])
.background(.white)
} // .frame(width: 300) // Remove comment tag and click Form keyword.
}
}
Your preview is linked to your code.
So, if you click on the first text element, the Preview
will draw a border around it to highlight the element you selected in code.
Click on the other elements, one at a time and watch the preview window. This highlight is only in the Preview
. You won't see it in a running application.
Next, add a modifier to one of the elements. For example, add .background(.cyan)
to the first Text()
view.
As you add the modifier, the Text()
view should change in the Preview
window!
Now, to answer your question above, in your code listing, click on the Form
line. Where is the highlight?
It should surround the entire Form
from one edge of the screen to the other!
Next add .frame(width: 300)
after the Form
's closing bracket.
Click the Form
keyword. What do you see?