CODEWITHSUNDEEP
iosswiftuidividervstack
sergiy batsevych
sergiy batsevych

Reputation: 385

SwiftUI ForEach vertical divider layout strange

I'm beginner in SwiftUI and faced strange behaviour of ForEach layout when adding some VStack with divider inside.

Here is example:

struct TestUserView: View {
    @State var users: [String] = ["John Doe",
                                  "Jane Doe",
                                  "James Doe",
                                  "Judy Doe"]

    var body: some View {
        VStack {
            ForEach(users, id: \.self) { user in
                VStack(spacing: 0) {
//                    Text("")
//                        .background(Color.blue)
//                        .frame(height: 0)
//
                    Rectangle()
                        .frame(height: 5)

                    HStack {
                        Text(user)
                            .font(.system(size: 55, weight: .bold))
                        Spacer()
                    }
                }
                .background(Color.green)
            }
        }
        .background(Color.purple)
    }
}

It looks like this:

Purl area

See this purple area. I don't expect it to be there. Strange enough that it disappears if add Text before separator(no matter if this is Rectangle, Divider or Color.black). Just uncomment commented code and it will become as expected.

Just wondering if this is bug or I don't understand SwiftUI layout.

If this is expected please point me to some useful documentation.

Used XCode 11.5

Upvotes: 2

Views: 1266

Answers (1)

Asperi
Asperi

Reputation: 257779

It is effect of default spacing between different kind of views.

Here is a solution. Tested with Xcode 11.4 / iOS 13.4.

    var body: some View {
        VStack(spacing: 0) { // << explicit spacing !!

        // .. other code

Upvotes: 5

Related Questions