Search code examples
scrollviewswiftui

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)
    }
}

Solution

  • 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 !
            }
        }
    }