SwiftUI点击按钮后列表滚动位置重置问题修复咨询

我明白你的困扰：点击按钮弹出全屏半透明遮罩后，Tab页里的List滚动位置居然被重置了，而且还得保证遮罩能覆盖包括TabBar在内的整个屏幕。我来帮你搞定这个问题！

问题根源 #

为什么会出现滚动位置丢失的情况？其实是因为当你切换isButtonClicked状态时，SwiftUI会重新计算ZStack的视图层级，导致TabView里的tableView被重新初始化——List的滚动状态是和视图实例绑定的，实例一丢，滚动位置自然就没了。另外原来的遮罩视图布局和动画方式也有点小问题，可能会加重这个问题。

修复方案 #

我给你调整了代码，核心是保持视图身份稳定+优化遮罩的添加方式，直接看修改后的代码：

import SwiftUI
struct ContentView: View {
    @State var isButtonClicked: Bool = false
    var body: some View {
        ZStack {
            // Layer 0: Tab栏和内容
            TabView {
                tableView()
                    .id("tab1") // 关键：给tableView加固定ID，确保视图身份不被重置
                    .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)
        }
        // 将遮罩视图通过overlay添加，避免影响TabView的布局渲染
        .overlay(
            Group {
                if isButtonClicked {
                    TranslucentView(opacity: 0.6)
                        .transition(.opacity) // 用过渡动画实现淡入淡出
                        .onTapGesture {
                            isButtonClicked.toggle()
                        }
                }
            }
        )
        // 给状态变化添加统一的动画
        .animation(.linear(duration: 0.3), value: isButtonClicked)
    }
}

struct TranslucentView: View {
    let opacity: Double
    var body: some View {
        ZStack {
            Color.black
                .opacity(opacity)
        }
        .edgesIgnoringSafeArea(.all) // 确保覆盖TabBar和安全区
    }
}

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

关键修改点说明 #

1. 给tableView添加固定ID：.id("tab1")让SwiftUI识别到这个视图始终是同一个实例，即使父视图重新渲染，也不会重新创建它，List的滚动状态自然就保留下来了。
2. 用overlay添加遮罩：把遮罩从ZStack的子视图移到外层的overlay里，这样遮罩的显示/隐藏不会影响TabView内部的布局和视图生命周期，彻底避免了滚动位置重置的诱因。
3. 优化动画逻辑：用transition(.opacity)配合基于isButtonClicked值的全局动画，既保证了淡入淡出的效果，又不会干扰TabView的状态。

现在你可以测试一下：滚动List到任意位置，点击按钮弹出遮罩，关闭后List依然会停留在原来的位置，而且遮罩完美覆盖了包括TabBar在内的整个屏幕！

内容的提问来源于stack exchange，提问作者bwJeong