SwiftUI中NavigationView的EditButton在iPad上异常（iPhone正常）

我是SwiftUI开发新手，在项目中创建了一个项目列表，并添加了EditButton，该按钮在iPhone界面运行正常，但iPad上点击切换为Done时，文字会向前偏移，且Edit与Done文字会出现透明重叠效果，想了解SwiftUI中针对iPad界面的特殊设置以解决此问题。

相关代码 #

QRCreator视图代码 #

struct QRCreator: View {
    @State var showingCreateView = false
    @State public var fruits = [
        "Apple",
        "Banana",
        "Papaya",
        "Mango"
    ]

    var body: some View {
        NavigationView {
            List {
                ForEach(fruits, id: \.self) { fruit in
                    Text(fruit)
                }
                .onDelete { fruits.remove(atOffsets: $0) }
                .onMove { fruits.move(fromOffsets: $0, toOffset: $1) }
            }
            .navigationTitle("Fruits2")
            .navigationBarItems(trailing:
                Button(action: {
                    showingCreateView = true
                }) {
                    Image(systemName: "plus.viewfinder")
                        .font(.largeTitle)   
                }
            )
            .toolbar {
                EditButton()
            }
        }
    }
}

ContentView代码 #

TabView {
    NavigationView {
        QRScanner()
    }
    .tabItem {
        Image(systemName: "qrcode.viewfinder")
        Text("Scanner")
    }

    NavigationView {
        QRCreator()
    }
    .tabItem {
        Image(systemName: "doc.fill.badge.plus")
        Text("Creator")
    }

    NavigationView {
        QRSetting()
    }
    .tabItem {
        Image(systemName: "gear")
        Text("Setting")
    }
}

问题原因及解决办法 #

这个问题的核心是多层NavigationView嵌套导致iPad端导航栏布局冲突——iPad默认使用双栏式导航布局，嵌套的NavigationView会干扰系统对导航栏元素的位置计算，进而引发EditButton的文字偏移和重叠问题。

解决方法1：统一导航结构，移除冗余嵌套 #

直接去掉ContentView中每个Tab项内的NavigationView，仅保留QRCreator内部的NavigationView（若其他页面需要导航栏，可在对应视图内部添加，或在TabView层级统一处理）：

修改后的ContentView代码

TabView {
    QRScanner()
        .tabItem {
            Image(systemName: "qrcode.viewfinder")
            Text("Scanner")
        }

    QRCreator()
        .tabItem {
            Image(systemName: "doc.fill.badge.plus")
            Text("Creator")
        }

    QRSetting()
        .tabItem {
            Image(systemName: "gear")
            Text("Setting")
        }
}

修改后的QRCreator代码（优化工具栏布局）

struct QRCreator: View {
    @State var showingCreateView = false
    @State public var fruits = [
        "Apple",
        "Banana",
        "Papaya",
        "Mango"
    ]

    var body: some View {
        NavigationView {
            List {
                ForEach(fruits, id: \.self) { fruit in
                    Text(fruit)
                }
                .onDelete { fruits.remove(atOffsets: $0) }
                .onMove { fruits.move(fromOffsets: $0, toOffset: $1) }
            }
            .navigationTitle("Fruits2")
            .toolbar {
                // 用ToolbarItem明确指定位置，替代已废弃的navigationBarItems
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {
                        showingCreateView = true
                    }) {
                        Image(systemName: "plus.viewfinder")
                            .font(.largeTitle)
                    }
                }
                EditButton()
            }
        }
    }
}

解决方法2：强制使用单栏导航布局 #

如果需要保留多层NavigationView结构，可以给NavigationView添加.navigationViewStyle(.stack)，强制iPad使用单栏布局，避免双栏模式下的冲突：

NavigationView {
    // 列表内容
}
.navigationViewStyle(.stack)

注意事项 #

• 尽量避免NavigationView嵌套，这是SwiftUI导航布局的常见坑点，不仅会引发iPad端的问题，还可能导致导航栏样式、返回按钮等异常。
• navigationBarItems已被废弃，推荐使用.toolbar结合ToolbarItem来配置导航栏元素，兼容性更好。

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