Learn Courses My Dashboard

NavigationLink automatically center aligns text

Hello everyone

I am currently working on my own app, and am having trouble figuring out how to set the alignment of a Navigation Link to leading. I want the alignment of my menu to look like this:

However, once I turn everything into a Navigation Link the text becomes center aligned:

I tried putting turning the row into a toggable button that is then embedded within the Navigation Link as per the suggestion of a Stack Overflow forum, but that didnt seem to solve my issue either. Does anyone know of a good workaround for this?

struct SettingsView: View {
    
    @State var isActive = false
    
    var body: some View {
        
        VStack (alignment: .leading){
            
            TitleHeader(title: "Settings")
            
            ScrollView {
                
                NavigationLink(destination: YourAccountView(), isActive: $isActive, label: {
                    
                    Button(action: { isActive.toggle() },
                           label: {
                        SettingsRow(sideImage: "person", settingsTitle: "Your account", settingsDescription: "View/change account information such as your username, password and email address.")
                    })
                    
                })
                
                
                NavigationLink(destination: {},
                               label: {
                    SettingsRow(sideImage: "lock.square", settingsTitle: "Privacy", settingsDescription: "Manage what information you see and share on PlantTrader.")
                })
                
                
                NavigationLink(destination: {},
                               label: {
                    SettingsRow(sideImage: "bell", settingsTitle: "Notifications", settingsDescription: "Select the kinds of notifications you would like to receive.")
                })
               
                
                NavigationLink(destination: {},
                               label: {
                    SettingsRow(sideImage: "a.square", settingsTitle: "Additional Resources", settingsDescription: "View useful information to learn about PlantTrader's Privacy and Terms of Service")
                })
                
                
                NavigationLink(destination: {},
                               label: {
                    SettingsRow(sideImage: "square.and.pencil", settingsTitle: "Improve PlantTrader", settingsDescription: "Have ideas on how we can improve our services? Pleast let us know!")
                })
                
            }
            .foregroundColor(.black)
                
            .navigationBarHidden(true)
        }
    }
}

struct SettingsRow: View {
    
    var sideImage: String
    
    var settingsTitle: String
    
    var settingsDescription: String
    
    var body: some View {
        
        HStack {
            
            Image(systemName: sideImage)
                .resizable()
                .frame(width: 25, height: 25)
                .padding()
            
            VStack (alignment: .leading){
                Text(settingsTitle)
                    .font(.custom("Mukta-Regular", size: 20))
                Text(settingsDescription)
                    .font(.custom("Mukta-Regular", size: 14))
            }
            
            Spacer()
            
            Image(systemName: "chevron.right")
                .frame(width: 28, height: 28)
                .padding()
        }
    }
}

Try this:

struct SettingsRow: View {

    var sideImage: String

    var settingsTitle: String

    var settingsDescription: String

    var body: some View {

        HStack {

            Image(systemName: sideImage)
                .resizable()
                .frame(width: 25, height: 25)
                .padding()

            VStack (alignment: .leading) {
                Text(settingsTitle)
                    .font(.custom("Mukta-Regular", size: 20))
                Text(settingsDescription)
                    .font(.custom("Mukta-Regular", size: 14))
            }
            .multilineTextAlignment(.leading)

            Spacer()

            Image(systemName: "chevron.right")
                .frame(width: 28, height: 28)
                .padding()
        }
    }
}

Note the modifier .multilineTextAlignment(.leading) on the closing brace of the VStack.

1 Like

That did it!! Thanks a bunch Chris! :smiley:

1 Like