CODEWITHSUNDEEP
scrollviewswiftui
foolbear
foolbear

Reputation: 964

Content in scrollview as a list item disappears when scrolling (swiftui), why?

Solution by @Asperi, ScrollView().id(UUID().uuidString).

There is a scrollview in the list item, when I scroll the list, the content in scrollview disappears.

I think the issue is about scrollview & list reusable item conflict.

If I remove scrollview(just hstack{}), nothing disappears. So I think it's scrollview's issue. Any ideal?

struct ContentView: View {
    var body: some View {
        List {
            ForEach(0...100, id: \.self) { _ in
                ItemView().padding()
            }
        }
    }
}

struct ItemView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Tag list:")
            ScrollView(.horizontal, showsIndicators: false) {
                HStack {
                    ForEach(0...8, id: \.self) { _ in
                        TagView1()
                    }
                }
            }.id(UUID().uuidString) /// <- fix
        }
    }
}

struct TagView1: View {
    var body: some View {
        Text("Tag\(String(UUID().uuidString.prefix(5)))")
            .foregroundColor(.secondary)
            .padding(.horizontal, 2)
            .background(RoundedRectangle(cornerRadius: 4).stroke(Color.secondary.opacity(0.5)))
            .padding(1)
    }
}

Upvotes: 5

Views: 4133

Answers (1)

Asperi
Asperi

Reputation: 257493

If I correctly understood what disappears (I assume you meant list rows on vertical scrolling), then yes it is due to List reuse/cache optimisation issue.

The following approach should work (tested with Xcode 11.2 / iOS 13.2)

struct ItemView: View {
    var body: some View {
        VStack {
            Text("Tag list:")
            ScrollView(.horizontal, showsIndicators: false) {
                HStack {
                    ForEach(0...8, id: \.self) { _ in
                        TagView().padding()
                    }
                }
            }.id(UUID().uuidString) // << here is a fix !
        }
    }
}

Upvotes: 11

Related Questions