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

I tried your code at simulators first and had same issue too. But then I remembered, that there are some problems with 13.2 iOS and tried to run it on my device (iPhone 7, iOS 13.1.1) and everything works fine! I think that is the problem in 13.2 iOS, not in the List. There is sample, how I changed code for demonstration that everything is ok:

import SwiftUI

struct LocksView: View {
    
    @State private var locksPaid = 0

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

                ForEach(0 ..< 200) {item in
                    LocksItemView(number: item)
                }

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

struct LocksItemView: View {

    @State private var paid : Bool = false
    var number: Int

    var body: some View {
        HStack {

            Text("L\(self.number)")
                .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()
        }
    }
}

and on my phone the result is:

so there are bugs in 13.2 version and I hope Apple will fix them all

Answer 2

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.