面试题：SwiftUI的SplitView在自适应布局下的优化与交互处理

整体设计方案

使用NavigationSplitView：SwiftUI提供的NavigationSplitView能方便地构建主从结构界面，并且能在不同设备上自适应布局。对于iPhone，通常会以堆叠形式展示主视图和从视图；对于iPad，则可以以并列形式展示。
处理滑动手势关闭详情视图：可以通过给从视图添加DragGesture，当检测到从右向左滑动且达到一定阈值时，关闭详情视图。
优化加载性能：
- 懒加载文章详情：只在需要显示文章详情时加载相关内容，而不是在加载文章列表时就全部加载。
- 缓存机制：对于已经加载过的文章详情，进行缓存，避免重复加载。

核心代码

import SwiftUI

struct Article: Identifiable {
    let id = UUID()
    let title: String
    let content: String
}

struct ArticleListView: View {
    @State private var selectedArticle: Article?
    let articles: [Article] = [
        Article(title: "Article 1", content: "Content of Article 1"),
        Article(title: "Article 2", content: "Content of Article 2")
    ]

    var body: some View {
        List(articles) { article in
            Button(action: {
                selectedArticle = article
            }) {
                Text(article.title)
            }
        }
        .navigationDestination(for: Article.self) { article in
            ArticleDetailView(article: article)
        }
    }
}

struct ArticleDetailView: View {
    let article: Article
    @GestureState private var isDragging = false
    @Environment(\.dismiss) var dismiss

    var body: some View {
        VStack {
            Text(article.title)
               .font(.largeTitle)
            Text(article.content)
        }
       .padding()
       .gesture(
            DragGesture()
               .updating($isDragging) { value, state, _ in
                    state = value.translation.width > 0
                }
               .onEnded { value in
                    if value.translation.width > 100 {
                        dismiss()
                    }
                }
        )
    }
}

struct ContentView: View {
    var body: some View {
        NavigationSplitView {
            ArticleListView()
        } detail: {
            EmptyView()
        }
    }
}

上述代码中：

ArticleListView展示文章列表，通过navigationDestination导航到ArticleDetailView展示文章详情。
ArticleDetailView添加了DragGesture来处理滑动关闭操作。
ContentView使用NavigationSplitView构建主从结构。

星途面试题库

面试题：SwiftUI的SplitView在自适应布局下的优化与交互处理

知识考点

面试题答案

整体设计方案

核心代码