23.10 Tidying the Layout

Up until this point the focus of this tutorial has been on the appearance and functionality of the individual views. Aside from making sure the views are stacked vertically, however, no attention has been paid to the overall appearance of the layout. At this point the layout should resemble that shown in Figure 23-9:

Figure 23-9

The first improvement that is needed is to add some space around the Slider, TextField and Picker views so that they are not so close to the edge of the device display. To implement this, we will add some padding modifiers to the views:

Slider(value: $rotation, in: 0 ... 360, step: 0.1)

    .padding()

 

TextField("Enter text here", text: $text)

    .textFieldStyle(RoundedBorderTextFieldStyle())

    .padding()

 

Picker(selection: $colorIndex, label: Text("Color")) {

    ForEach (0 ..< colornames...