SwiftUI Styling — Modifiers, Color, Image, Text

Views & Modifiers (concept)

  • View — what the user sees.
  • Modifier — how you alter that view.

Modifiers applied to a stack (ZStack / VStack / HStack) cascade into all the views within it.

.background()

Adds a background to a View / Stack.

.background(.shadow)

Adds a shadow to the back of the background.

Original page had a screenshot here.

Color

  • Use three RGB values, or
  • Use .color shorthand (.red, .blue, etc.).

Image

  • .resizable — give the image the ability to shrink and grow
  • .aspectRatio — preserve the ratio
  • .frame(height: 50) — custom size
  • .cornerRadius(10) — rounded corners

Text

  • .foregroundColor — change the colour of text
  • Type conversion helpers: String(), Int(), Bool(), Double()

Original page had a screenshot here.

See next