How can I create an "unfilled frame" in SwiftUI?

Question

I'm sure this is something super-simple, but I cannot seem to figure it out. I am trying to create a "widget" that consists of three lines of text, stacked vertically. This information should be placed inside a "frame" or "border" so it resembles a card. There will be a row of these cards that will scroll horizontally.

Believe it or not, the only part of this I cannot figure out is how to draw the border around the widget. I've tried .border, but that snugs the border right up against the text. I know I can add padding, but what I really need is a fixed-size card so each element in the scrolling list is identical.

I've come closest using this:

.frame(width: geometry.size.width/1.3, height: 200) .background(Color.white) .border(Color.blue) .cornerRadius(20)

...but the corners are all clipped. For reference, here's the complete code listing:

struct AccountTile: View { var body: some View { GeometryReader { geometry in VStack(alignment: .leading, spacing: 8) { Text("Account Balance").font(.largeTitle) Text("Account Name").font(.headline) HStack(spacing: 0) { Text("There are ").font(.caption).foregroundColor(.gray) Text("6 ").font(.caption).fontWeight(.bold).foregroundColor(.blue) Text("unreconciled transactions.").font(.caption).foregroundColor(.gray) } } .frame(width: geometry.size.width/1.3, height: 200) .background(Color.white) .border(Color.blue) .cornerRadius(20) } } }

...and here's what that code is producing:

This is almost what I'm looking for - I just need the border to be complete.

zgluis · Accepted Answer · 2020-05-16 23:06:53Z

Use some padding and overlay to create your border. Here is the code (:

struct AccountTile: View { var body: some View { GeometryReader { geometry in VStack(alignment: .leading, spacing: 8) { Text("Account Balance").font(.largeTitle) Text("Account Name").font(.headline) HStack(spacing: 0) { Text("There are ").font(.caption).foregroundColor(.gray) Text("6 ").font(.caption).fontWeight(.bold).foregroundColor(.blue) Text("unreconciled transactions.").font(.caption).foregroundColor(.gray) } }.frame(width: geometry.size.width/1.3, height: 200) .background(Color.white) .overlay( RoundedRectangle(cornerRadius: 20) .stroke(Color.blue, lineWidth: 2)) } } }

I'm trying to use the GeometryReader to make the frame a specific width in relation to the screen size; how would that fit in with your solution? Doesn't the padding just make the text views a little bigger without making them a fixed size?
Yes you can achieve the same result with your frame, I added the padding just to create some space between the border. I will update my answer.

Collectives™ on Stack Overflow

How can I create an "unfilled frame" in SwiftUI?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related