Reputation: 5
what I want is for the navigation bar to have a gray background, but despite changing this code I always have a transparent background
import SwiftUI
struct Settings: View {
@State private var notificationsEnabled = false
@State private var travelModeEnabled = false
init(){
UINavigationBar.appearance().titleTextAttributes=[.foregroundColor:UIColor.white]
}
var body: some View {
NavigationView {
ZStack {
Color(.alternativeDark)
.ignoresSafeArea()
VStack {
Form {
Section(header: Text("Personal Information").font(.headline).foregroundColor(.gray)) {
navigationRow(title: "Name", value: "Lorem Ipsum", destination: Text("Edit Name"))
navigationRow(title: "Birth Date", value: "Lorem Ipsum", destination: Text("Edit Birth Date"))
navigationRow(title: "Email", value: "Lorem Ipsum", destination: Text("Edit Email Address"))
navigationRow(title: "Phone Number", value: "Lorem Ipsum", destination: Text("Edit Phone Number"))
}
.listRowBackground(Color.gray.opacity(0.2))
Section(header: Text("Location").font(.headline).foregroundColor(.black)) {
navigationRow(title: "Current Location", value: "Lorem Ipsum", destination: Text("Edit Location"))
Toggle(isOn: $travelModeEnabled) {
Text("Holiday Mode")
.foregroundColor(.white)
}
.tint(.green)
}
.listRowBackground(Color.gray.opacity(0.2))
Section(header: Text("Notifications").font(.headline).foregroundColor(.gray)) {
Toggle(isOn: $notificationsEnabled) {
Text("Notifications")
.foregroundColor(.white)
}
.tint(.green)
}
.listRowBackground(Color.gray.opacity(0.2))
Section(header: Text("Manage Account").font(.headline).foregroundColor(.gray)) {
Button(action: {
print("Log Out tapped")
}) {
settingActionRow(title: "Log Out", icon: "rectangle.portrait.and.arrow.right", iconColor: .white)
}
Button(action: {
print("Deactivate/Delete Account tapped")
}) {
settingActionRow(title: "Deactivate/Delete Account", icon: "trash", iconColor: .red)
}
}
.listRowBackground(Color.gray.opacity(0.2))
}
.scrollContentBackground(.hidden)
}
}
}
.navigationBarTitleDisplayMode(.inline)
.navigationTitle("Settings")
.tint(.white)
}
private func navigationRow<Destination: View>(title: String, value: String, destination: Destination) -> some View {
NavigationLink(destination: destination) {
HStack {
Text(title)
.foregroundColor(.white)
Spacer()
Text(value)
.foregroundColor(.gray)
}
}
}
private func settingActionRow(title: String, icon: String, iconColor: Color) -> some View {
HStack {
Text(title)
.foregroundColor(.white)
Spacer()
Image(systemName: icon)
.foregroundColor(iconColor)
.font(.headline)
}
}
}
#Preview {
Settings()
}
What I want is to get navigation bar with a navigation header and navigation back button with a non-transparent and aligned gray background.
Upvotes: 0
Views: 27