SwiftUI中OnboardingPage的init方法被多次调用问题排查

问题背景 #

在开发iOS应用的引导流程时，使用TabView实现页面切换，发现OnboardingPage结构体的init方法被多次调用，引发性能问题和异常行为。相关代码结构如下：

Onboarding主视图代码 #

struct Onboarding: View {

// MARK: - Properties
@State private var selected: Int = 0
private var pages: [OnboardingPage.Page] = [
    .init(
        id: 1,
        image: #IMAGE_ONE,
        title: "#TITLE",
        description: "#DESCRIPTION"
    ),
    .init(
        id: 2,
        image: #IMAGE_TWO,
        title: "#TITLE",
        description: "#DESCRIPTION"
    ),
    .init(
        id: 3,
        image: #IMAGE_THREE,
        title: "#TITLE",
        description: "#DESCRIPTION"
    ),
    .init(
        id: 4,
        image: #IMAGE_FOUR,
        title: "#TITLE",
        description: "#DESCRIPTION"
    )
]

// MARK: - Body
var body: some View {
    TabView(selection: $selected) {
        ForEach(pages) { page in
            OnboardingPage(page: page)
                .tag(page.id)
        }
    }
    .tabViewStyle(.page(indexDisplayMode: .never))
    .animation(.easeInOut, value: selected)
    .ignoresSafeArea()
    .overlay(alignment: .top) {
        OnboardingPageIndicator(selected: $selected, total: 4)
            .padding(.horizontal, 16)
            .padding(.vertical, 16)
    }
    .overlay(alignment: .topTrailing) {
        Button("Skip") {
            print("SKIP")
        }
        .font(.headline)
        .foregroundStyle(Color.appSecondary)
        .padding(.horizontal, 16)
        .padding(.vertical, 8)
    }
    .overlay(alignment: .bottom) {
        Button {
            guard selected < pages.count - 1 else { return }
            selected += 1
        } label: {
            Image(systemName: "arrow.right.circle.fill")
                .resizable()
                .frame(width: 45, height: 45)
                .foregroundColor(.appSecondary)
                .padding()
        }
        .buttonStyle(AppButtonStyle())
        .padding(.bottom)
    }
    .onAppear {
        UIScrollView.appearance().bounces = false
    }
}
}

OnboardingPage视图代码 #

struct OnboardingPage: View {

// MARK: - Properties
struct Page: Identifiable {
    var id: Int
    let image: ImageResource
    let title: String
    let description: String
}
let page: Page

init(page: Page) {
    self.page = page
    print(page.id) // 此打印语句显示init方法被多次调用
}

// MARK: - Body
var body: some View {
    ZStack {
        Image(page.image)
            .resizable()
            .ignoresSafeArea()
        VStack(spacing: 12) {
            Text(page.title.uppercased())
                .font(.header)
                .kerning(1)
                .lineSpacing(8)
                .foregroundStyle(Color.appSecondary)
            Text(page.description)
                .font(.headline1)
                .lineSpacing(1)
                .foregroundStyle(Color.appPrimary)
                .padding(.horizontal)
            Spacer()
        }
        .multilineTextAlignment(.center)
        .padding(.horizontal, 24)
        .padding(.top, 50)
    }
}
}

OnboardingPageIndicator视图代码 #

struct OnboardingPageIndicator: View {

// MARK: - Properties
@Namespace var namespace
@Binding var selected: Int
let total: Int
let unSelectedTintColor: Color = .gray
let selectedTintColor: Color = .appPrimary

// MARK: - Body
var body: some View {
    HStack(spacing: 8) {
        ForEach(0..<total, id: \.self) { page in
            Circle()
                .fill(page == selected ? selectedTintColor : unSelectedTintColor)
                .frame(width: 8, height: 8)
                .matchedGeometryEffect(id: page, in: namespace)
                .animation(.easeInOut, value: selected)
        }
    }
}
}

原因分析 #

1. SwiftUI视图特性：SwiftUI视图是值类型，父视图body因状态变化（如selected更新）重新计算时，会重新创建子视图实例，触发init调用。
2. TabView预加载机制：.page样式的TabView会预加载当前页面的前后页面以保证滑动流畅，这会导致额外的OnboardingPage初始化。
3. 全局动画影响：父视图上的.animation(.easeInOut, value: selected)会让整个视图层级在selected变化时重新计算，加剧视图重建。
4. matchedGeometryEffect触发：页面指示器中的matchedGeometryEffect会在状态变化时触发视图更新，间接导致父视图body重建。

解决方案 #

1. 让OnboardingPage实现Equatable #

通过遵循Equatable协议，SwiftUI会自动对比视图输入参数，仅在page数据变化时重建视图。

修改OnboardingPage代码：

struct OnboardingPage: View, Equatable {
    static func == (lhs: OnboardingPage, rhs: OnboardingPage) -> Bool {
        lhs.page.id == rhs.page.id
    }

    struct Page: Identifiable, Equatable {
        var id: Int
        let image: ImageResource
        let title: String
        let description: String
    }
    
    let page: Page

    init(page: Page) {
        self.page = page
        print(page.id)
    }

    // body部分保持不变
}

在ForEach中添加.equatable()修饰：

ForEach(pages) { page in
    OnboardingPage(page: page)
        .tag(page.id)
        .equatable()
}

2. 优化动画作用范围 #

将全局动画移到具体需要动画的视图上，避免整个TabView层级因动画触发重建，比如仅给页面指示器添加动画：

移除TabView后的.animation(.easeInOut, value: selected)，修改OnboardingPageIndicator的动画：

struct OnboardingPageIndicator: View {
    // 其他属性不变
    
    var body: some View {
        HStack(spacing: 8) {
            ForEach(0..<total, id: \.self) { page in
                Circle()
                    .fill(page == selected ? selectedTintColor : unSelectedTintColor)
                    .frame(width: 8, height: 8)
                    .matchedGeometryEffect(id: page, in: namespace)
            }
        }
        .animation(.easeInOut, value: selected) // 仅给指示器添加动画
    }
}

3. 确保pages数据的稳定性 #

将pages声明为static let，避免每次父视图body计算时重新创建数组实例：

private static let pages: [OnboardingPage.Page] = [
    // 页面数据不变
]

// 在body中使用Self.pages
TabView(selection: $selected) {
    ForEach(Self.pages) { page in
        OnboardingPage(page: page)
            .tag(page.id)
            .equatable()
    }
}

效果验证 #

完成上述修改后，OnboardingPage的init只会在页面首次加载（包括预加载的前后页）时调用，不会因状态变化重复触发，有效解决性能问题和异常行为。

内容的提问来源于stack exchange，提问作者Muhammad Khaliq ur Rehman