How can I increase space between navBar title and navigationView

[Air_Walks]

I am trying to increase the space between my navigationBarTitle and navigationView where my list is but it’s not working. My list is attached to the navbar like this image

I try to add padding to the top but it shows this weird issue like this

Here is the code

import SwiftUI

let coloredNavAppearance = UINavigationBarAppearance()

struct ContentView: View {
    
    @EnvironmentObject var model: SongViewModel
    
    init() {
        UITableView.appearance().backgroundColor = .myCustomColor
        coloredNavAppearance.configureWithOpaqueBackground()
        coloredNavAppearance.backgroundColor = .myCustomColor2
        coloredNavAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
        coloredNavAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
        UINavigationBar.appearance().standardAppearance = coloredNavAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = coloredNavAppearance
    }
    
    var body: some View {
        NavigationView {
                List {
                    ForEach(model.songs) { song in
                        NavigationLink(destination: DetailView(song: song)) {
                            songRow(song: song)
                        }
                    }
                .listStyle(.plain)
            }
                .padding(.top, 50)
                .navigationBarTitle(Text("My Music"))
        }
        .accentColor(.white)
    }
}

extension UIColor {
    static let myCustomColor = UIColor(#colorLiteral(red: 0, green: 0.4916731715, blue: 1, alpha: 0.3263276076))
    static let myCustomColor2 = UIColor(#colorLiteral(red: 0, green: 0.4894992709, blue: 1, alpha: 0.8824244619))
}

[Chris_Parker]

@Air_Walks

Rather than use a List (which is essentially a UIKit TableView) you may be better off doing something like this:

import SwiftUI

struct ContentView: View {
    @EnvironmentObject var model: SongViewModel
    let coloredNavAppearance = UINavigationBarAppearance()

    init() {
//        UITableView.appearance().backgroundColor = .myCustomColor
        coloredNavAppearance.configureWithOpaqueBackground()
        coloredNavAppearance.backgroundColor = .myCustomColor2
        coloredNavAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
        coloredNavAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
        UINavigationBar.appearance().standardAppearance = coloredNavAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = coloredNavAppearance
    }

    var body: some View {
        NavigationView {
            ZStack(alignment: .leading) {
                Color(UIColor.myCustomColor)
                    .ignoresSafeArea()

                ScrollView {
                    VStack(alignment: .leading) {
                        ForEach(model.songs) { song in
                            NavigationLink(destination: DetailView(song: song)) {
                                songRow(song: song)
                            }
                        }
                    }
                    .padding(.top, 50)
                    .padding(.horizontal)
                }

            }
            .navigationBarTitle(Text("My Music"))
        }
        .accentColor(.primary)
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environmentObject(SongViewModel())
    }
}

extension UIColor {
    static let myCustomColor = UIColor(#colorLiteral(red: 0, green: 0.4916731715, blue: 1, alpha: 0.3263276076))
    static let myCustomColor2 = UIColor(#colorLiteral(red: 0, green: 0.4894992709, blue: 1, alpha: 0.8824244619))
}

struct songRow: View {

    let song: Song

    var body: some View {
        HStack {
            Image(song.imageName)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: 60, height: 60)
                .cornerRadius(6)


            VStack (alignment: .leading) {
                Text(song.name)
                    .font(.system(size: 21, weight: .medium, design: .default))
            }
            Spacer()
            Image(systemName: "chevron.right")
            .padding()
        }
    }
}