SwiftUI导航栏标题滚动时无法切换为行内模式求助

我是Swift和SwiftUI新手，正在用Xcode 14.3.1复刻苹果电话应用的通讯录视图，想要实现滚动时导航标题自动切换为inline模式，同时搜索栏和导航标题保持固定。但用了.navigationBarTitleDisplayMode(.automatic)没效果，尝试添加ScrollView后列表元素直接消失。

视图效果参考：

• 正常视图：
• 滚动时视图：

1. 重复嵌套NavigationView：PhoneAppApp和ContactsView中都嵌套了NavigationView，导致导航栏行为异常。
2. 搜索栏层级错误：搜索栏放在List外部的VStack中，NavigationView无法感知List的滚动状态，因此不会触发标题模式切换。
3. 错误嵌套ScrollView：SwiftUI的List本身已是可滚动容器，嵌套ScrollView会引发布局冲突，造成列表元素消失。

步骤1：移除重复的NavigationView #

修改PhoneAppApp，只保留单一层级的导航结构：

import SwiftUI

@main
struct PhoneAppApp: App {
    var body: some Scene {
        WindowGroup {
            ContactsView() // 移除外层多余的NavigationView
        }
    }
}

步骤2：调整搜索栏与List的层级 #

将搜索栏作为List的头部Section，让NavigationView能感知List的滚动状态，从而自动切换标题模式。修改后的ContactsView代码：

import SwiftUI

struct ContactsView: View {
    @State var personname: String = ""
    @StateObject var personViewModel = PersonViewModel()
    let headers: [Character] = [ "A", "B", "C", "Ç", "D", "E", "F", "G", "Ğ", "H", "I", "İ", "J", "K", "L", "M", "N", "O", "Ö", "P", "R", "S", "Ş", "T", "U", "Ü", "V", "Y", "Z"
]
    
    var body: some View {
        NavigationView {
            List {
                // 将搜索栏作为List的首个Section
                Section {
                    TextField("Search", text: $personname)
                        .padding()
                        .foregroundColor(.black)
                        .frame(maxWidth: .infinity)
                        .frame(maxHeight: 50)
                        .background(Color("SearchColor"))
                        .cornerRadius(10)
                }
                
                UserProfileView()
                
                ForEach(headers, id: \.self) { header in
                    Section{
                        ForEach(personViewModel.persons.filter { $0.getfullname().hasPrefix(String(header)) }, id: \.id) { person in
                            EachPersonView(PersonModel: person)
                        }
                    }header: {
                        Text(String(header))
                    }
                }
            }
            .toolbar {
                ToolbarItemGroup(placement: .navigationBarTrailing) {
                    Button{
                        print("Save tapped")
                    }label: {
                        Label("SAVE", systemImage: "plus")
                    }
                }
            }
            .navigationTitle("Contacts")
            .navigationBarTitleDisplayMode(.automatic) // 自动随滚动切换标题模式
            .listStyle(.inset)
        }
    }
}

struct UserProfileView: View {
    var body: some View {
        HStack(alignment: .center){
            Image(systemName: "hourglass")
                .resizable()
                .frame(width: 70, height: 70)
                .clipShape(Circle())
            
            VStack{
                Text("Person Name")
                    .bold()
                Text("My Card")
                    .offset(x: -18 , y: 0)
            }
        }
    }
}

struct ContactsView_Previews: PreviewProvider {
    static var previews: some View {
        ContactsView()
    }
}

效果说明 #

• 滚动List时，导航标题会从large模式自动切换为inline模式，固定在导航栏顶部。
• 搜索栏作为List的一部分随滚动移动，标题切换后保持固定，完全匹配苹果通讯录的交互逻辑。
• 解决了ScrollView嵌套导致的列表消失问题，所有元素正常显示。

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