SwiftUI Stepper Layout issues

Question

When I include a Stepper inside a List with many rows such that it will scroll off the screen when scrolled the layout becomes completely mucked up. See attached image.

Has anybody had this issue and managed to solve it?

Code to reproduce in Xcode 11.3.1 / iOS 13.3

struct Item: Identifiable {
    let id: String
    let name: String

    init(_ name: String) {
        self.id = UUID().uuidString
        self.name = name
    }
}

struct ContentView: View {

    let items: [Item] = [
        Item("Car"),
        Item("Shoe"),
        Item("House"),
        Item("Pencil"),
        Item("Crayon"),
        Item("PC"),
        Item("Spoon"),
        Item("Box"),
        Item("Tennis Racket"),
        Item("Mobile Phone"),
        Item("Hat"),
        Item("Table"),
        Item("Chair"),
        Item("Painting"),
        Item("Couch"),
        Item("Desk"),
        Item("Fireplace"),
        Item("Stove"),
        Item("Kettle"),
        Item("Fork"),
        Item("Knife"),
        Item("Dinner Plate")
    ]

    var body: some View {
        List() {
            ForEach(items) { item in
                ItemRow(item: item)
            }
        }
    }
}

struct ItemRow: View {
    let item: Item

    @State private var quantity: Int = 1

    var body: some View {
        HStack(spacing: 10) {
            Text(item.name)
            Stepper(onIncrement: {
                self.quantity = self.quantity + 1
            }, onDecrement: {
                self.quantity = self.quantity - 1
            }, label: {
                Text("\(quantity)")
                    .padding()
            })
        }
    }
}

Thanks in advance, Matt

Answer 1

You're not the one with this problem. There is some issue with list, but in canvas only. According to this answer, you can try your list on the real device and it should looks in normal way. So I tried it on iPhone 7: