Go on. Explore!

lvl 0 • 0 xp

lvl 1

Home Market Decks Interests

Chapter 6 working with SwiftUI buttons and gradient

memorize.ai (lvl 286)

(0)

8 cards

()

Section 1

Preview this deck

create SwiftUI buttons

Front

1 / 8

iOS Dev

0.0

0 reviews

5			0
4			0
3			0
2			0
1			0

Active users

All-time users

Favorites

Last updated

6 years ago

Date created

Mar 14, 2020

Cards (8)

Section 1

(8 cards)

create SwiftUI buttons

Front

struct ContentView: View { var body: some View { Button(action: { print("Hello World tapped!") }) { Text("Hello World") } } }

Back

creating a button with gradient background and shadow

Front

Back

customizing the button's font and background

Front

change the background and text color Text("Hello World") .padding() // give some space around text .background(Color.purple) .foregroundColor(.white) .font(.title) // change the font type

Back

the order of modifiers is important

Front

the padding modifier should be placed before the background modifier

Back

adding borders to the button

Front

It doesn't mean the padding modifier should always place at the very beginning. It just depends on your button design. Text("Hello World") .foregroundColor(.purple) .font(.title) .padding() .border(Color.puple, width: 5) draw a border and overlay it on the button Text("Hello World") .fontWeight(.bold) .font(.title) .padding() .background(Color.purple) .cornerRadius(40) .foregroundColor(.white) .padding(10) .overlay( RoundedRectangle(cornerRadius: 40) .stroke(Color.purple, lineWith: 5) )

Back

creating a full-width button

Front

Back

styling buttons with button style

Front

Back

creating a button with images and text

Front

The syntax of creating an image button is the same except that you use the Image control instead of the Text control: Button(action: { print("Delete tapped") }) { HStack { Image(systemName: "trash") .font(.title) Text("Delete") .fontWeight(.semibold) .font(.title) } .padding() .background(Color.white) .background(Color.red) .cornerRadius(40) }

Back