Question 68238 in IOS Swift Question posted in
The official documentation can be found here.

SwiftUI – Navigation View title is overlapping list – Ios swift

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.
enter image description here

Here is what I am getting with the overlap
enter image description here

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
enter image description here

Tags:

2

Answers


  1. 0

    Try this:

    Swift

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

    ...
}
    Login or Signup to reply.
  2. 0

    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().

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search