List clipping issue (bug with SwiftUI?)

Viewed 206

I'm having this weird issue with the List in macOS Montery Beta 3, where some of the list's items are being clipped, and you have to scroll up and back down to unclip it.

Example: https://imgur.com/a/P0TUt85

Reproduction

  1. Create a new blank SwiftUI macOS project
  2. Paste the following code:
struct Bla: Identifiable {
    var text: String
    var subtext: String
    var id = UUID()
}

struct ContentView: View {
    @State var data = (0..<100).map { Bla(text: "Text: \($0)", subtext: "Subtext: \($0)")}
    var body: some View {
        NavigationView {
            List(data) { item in
                VStack(alignment: .leading) {
                    Text(item.text)
                    Text(item.subtext)
                        .foregroundColor(.secondary)
                }
            }
            .toolbar {
                Button(action: {
                    var offset = 0
                    for i in 0..<data.count {
                        if i % 2 == 0 {
                            continue
                        }
                        data.remove(at: i - offset)
                        offset += 1
                    }
                }) {
                    Image(systemName: "plus")
                }
            }
        }
    }
}
  1. Run the app, and scroll the list to the middle.
  2. Press the plus button on the toolbar. This simply removes half of the items.
  3. You should see the clipping issue. Scrolling up and back down fixes it.

Is this something with my code, or with SwiftUI's List?

1 Answers

After adding the .listStyle I dont see the clipping issue anymore, try this:

    List(data) { item in
        VStack(alignment: .leading) {
            Text(item.text)
            Text(item.subtext)
                .foregroundColor(.secondary)
        }
    }.listStyle(SidebarListStyle())
Related