SwiftUI - 导航视图标题是重叠列表

Question

I have a simple list with a navigation view, where the navigation view is overlapping the list while scrolling.

Here is the look I want.

Here is what I am getting with the overlap

Here is the code

struct MedicalDashboard: View {
let menuItemData = MenuItemList()

var body: some View {
    NavigationView {
        List(menuItemData.items, id: \.id) { item in
            MenuItemRow(menuItem: item)
        }
        
        .listStyle(.insetGrouped)
        .navigationTitle("Dashboard")
        .navigationBarItems(trailing:
                                Button(action: {
            // TODO: - Pop up a sheet for the settings page.
            print("User icon pressed...")
        }) {
            Image(systemName: "person.crop.circle").imageScale(.large)
        }
                            
        )
        .padding(.top)
    }

}

}

when I add padding(.top) the overlap stops but I get a different color background on the navigation

Answer 1

Try this:

Swift

struct MedicalDashboard: View {
    init() {
        if #available(iOS 15, *) {
            let appearance = UINavigationBarAppearance()
            appearance.configureWithOpaqueBackground()
            UINavigationBar.appearance().standardAppearance = appearance
            UINavigationBar.appearance().scrollEdgeAppearance = appearance
        }
    }

    ...
}

Answer 2

On Xcode 13.4, except a missing } , without the .padding(.top) and with a custom List everything works like a charm for me.

The problem might come from MenuItemList() .

I have still updated your code by replacing .navigationBarItems and by adding the sheet for you:

struct MedicalDashboard: View {

    @State private var showSheet = false

    var body: some View {

        NavigationView {

            List { // Custom list
                Text("Hello")
                Text("Salut")
            }
            .listStyle(.insetGrouped)
            .navigationTitle("Dashboard")
            .toolbar() { // .navigationBarItems will be deprecated
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {
                        showSheet.toggle()
                        print("User icon pressed.")
                    }, label: {
                        Image(systemName: "person.crop.circle")
                    })
                    .sheet(isPresented: $showSheet) { /* SettingsView() */ }
                }
            }

        }

    } // New

}

Edit your post and show us MenuItemList() .