Why is the scroll position of the list initialized? - swiftui

Question

When the button is clicked, a translucent view appears.
However, at this moment, there is an issue where the scroll position of the list is initialized.
Image 1: Before button click
Image 2: After button click
Below is my SwiftUI code.
import SwiftUI
struct ContentView: View {
#State var isButtonClicked: Bool = false
var body: some View {
ZStack {
// Layer 0
TabView {
tableView()
.tabItem { Text("Tab Label 1") }
.tag(1)
Text("Tab Content 2")
.tabItem { Text("Tab Label 2") }
.tag(2)
}
// Layer 1
VStack {
Spacer()
HStack {
Spacer()
Button(action: {
isButtonClicked.toggle()
}, label: {
Text("Button")
})
}
.padding(.trailing, 20.0)
}
.padding(.bottom, 60.0)
// Layer 2
TranslucentView(opacity: 0.6)
.opacity(isButtonClicked ? 1.0 : 0)
.onTapGesture {
isButtonClicked.toggle()
}
.animation(.linear(duration: 0.3))
}
}
}
struct TranslucentView: View {
let opacity: Double
var body: some View {
ZStack {
Color.black
.opacity(opacity)
}
.edgesIgnoringSafeArea(.all)
}
}
struct tableView: View {
let items = [
Item(name: "Apple", counts: 1),
Item(name: "Apple", counts: 3),
Item(name: "Apple", counts: 5),
Item(name: "Apple", counts: 2),
Item(name: "Apple", counts: 9),
Item(name: "Apple", counts: 4),
Item(name: "Apple", counts: 7),
Item(name: "Apple", counts: 2),
Item(name: "Apple", counts: 1),
Item(name: "Apple", counts: 3),
Item(name: "Apple", counts: 8),
Item(name: "Apple", counts: 1),
]
var body: some View {
List(items) { item in
VStack {
Text(item.name)
Text(String(item.counts))
}
}
}
}
class Item: Identifiable {
let id = UUID()
let name: String
let counts: Int
init(name: String, counts: Int) {
self.name = name
self.counts = counts
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
How can I fix this issue?
*The transparent view must cover the entire screen including the tab bar.

Answer 1

On state change the body is rebuilt, so tableView is recreated, so reinitialised. To avoid last we need to make view equatable, so rendering engine do not recreate it on external changes.
Here is a solution (tested with Xcode 12.1 / iOS 14.1)
TabView {
EquatableView(content: tableView()) // << here !!
.tabItem { Text("Tab Label 1") }
.tag(1)
Text("Tab Content 2")
.tabItem { Text("Tab Label 2") }
.tag(2)
}
and conform tableView to Equatable as follows
struct tableView: View, Equatable {
static func == (lhs: tableView, rhs: tableView) -> Bool {
true
}
let items = [
// ... other code