Problems with layout of some rows in SwiftUI list

Question

I have tried to find a similar problem asked before, but failed.

I have a simple view with list. I am using a ForEach to show 10 iterations of the some list item to create a layout before I will add real data to this list. I have a problem with last 2 rows not rendering correctly. But sometimes it’s other row. I have tested on an iPhone too and sometimes it’s one row, sometimes another. The code for the view with list is this:

import SwiftUI

struct LocksView: View {

    @State private var locksPaid = 0

    var body: some View {
        NavigationView {
            List {
                DateView()
                    .listRowInsets(EdgeInsets())

                Picker(selection: $locksPaid, label: Text("Picker")) {
                    Text("All").tag(0)
                    Text("Not paid (2)").tag(1)
                }
                .pickerStyle(SegmentedPickerStyle())
                .padding(10)

                ForEach(0 ..< 10) {item in
                    LocksItemView()
                }

            }
            .navigationBarTitle(Text("Locks"))
            .navigationBarItems(trailing: EditButton())
        }
    }
}

The code for list items is this:

import SwiftUI

struct LocksItemView: View {

    @State private var paid : Bool = false

    var body: some View {
        HStack {

            Text("L15")
                .font(.title)
                .fontWeight(.heavy)
                .multilineTextAlignment(.center)
                .frame(width: 80)

            VStack(alignment: .leading) {
                Text("nickname")
                    .fontWeight(.bold)
                Text("category")
                Text("4 000 THB")
                    .fontWeight(.bold)
            }

            Spacer()

            Toggle(isOn: self.$paid) {
                Text("Paid")
            }
            .labelsHidden()
        }
    }
}

Why is toggle broken in some rows on my list? Why it moves to the left side?

Answer 1

It is not last items. If you set in your ForEach 20 instead of 10 and scroll up & down you'll see much more interesting issue.

I assume the reason, actually List bug, is the same as in this topic.

Workaround If it is not critical to you then use ScrollView instead of List, as tested there is no bug for it. Otherwise, file a Radar and wait for fix.