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