SwiftUI iPad应用启动右侧空白：默认显示firstDetailsView或添加提示

在iPadOS上启动该SwiftUI应用时，HomeView中的NavigationView会在右侧显示空白的详情区域，以下是两种针对性解决方案：

方案一：强制启动时默认展示firstDetailsView #

通过修改HomeView.swift中NavigationView的结构，添加默认的详情视图即可实现启动时直接展示firstDetailsView：

修改后的HomeView.swift代码：

import SwiftUI

struct HomeView: View {
    var body: some View {
        NavigationView {
            // 侧边栏列表
            ScrollView {
                VStack (spacing: -15) {
                    NavigationLink(destination: firstDetailsView()) {
                        card(symbol: "1.square", color: Color.orange)
                    }
                    
                    NavigationLink(destination: secondDetailsView()) {
                        card(symbol: "2.square", color: Color.green)
                    }
                    
                    NavigationLink(destination: thirdDetailsView()) {
                        card(symbol: "3.square", color: Color.purple)
                    }
                }
            }
            .navigationTitle("Title")
            
            // 默认展示的详情视图
            firstDetailsView()
        }
    }
}

// 以下card结构体和预览代码保持不变
struct card: View {
    var symbol: String
    var color: Color
    
    var body: some View {
        HStack {
            Text("Link to DetailView")
            Image(systemName: symbol)
        }
        .frame(maxWidth: .infinity, minHeight: 100)
        .bold()
        .foregroundColor(Color.white)
        .background(color)
        .padding()
    }
}

struct HomeView_Previews: PreviewProvider {
    static var previews: some View {
        HomeView()
    }
}

方案二：空白区域添加提示文本 #

如果不需要默认展示具体详情视图，可以在右侧空白区域添加提示文本，告知用户未选中任何详情视图：

修改后的HomeView.swift代码：

import SwiftUI

struct HomeView: View {
    var body: some View {
        NavigationView {
            // 侧边栏列表
            ScrollView {
                VStack (spacing: -15) {
                    NavigationLink(destination: firstDetailsView()) {
                        card(symbol: "1.square", color: Color.orange)
                    }
                    
                    NavigationLink(destination: secondDetailsView()) {
                        card(symbol: "2.square", color: Color.green)
                    }
                    
                    NavigationLink(destination: thirdDetailsView()) {
                        card(symbol: "3.square", color: Color.purple)
                    }
                }
            }
            .navigationTitle("Title")
            
            // 空白时的提示视图
            Text("no DetailView is selected")
                .font(.title)
                .foregroundColor(.gray)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

// 以下card结构体和预览代码保持不变
struct card: View {
    var symbol: String
    var color: Color
    
    var body: some View {
        HStack {
            Text("Link to DetailView")
            Image(systemName: symbol)
        }
        .frame(maxWidth: .infinity, minHeight: 100)
        .bold()
        .foregroundColor(Color.white)
        .background(color)
        .padding()
    }
}

struct HomeView_Previews: PreviewProvider {
    static var previews: some View {
        HomeView()
    }
}

说明 #

两种方案均通过调整NavigationView的子视图结构实现：在分栏模式下，NavigationView的第二个子视图即为未选中任何链接时的默认详情区域，只需替换该位置的视图即可满足需求。

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