I am currently trying to resize the top of the view when a NavigationLink is opened. As you can see from my screenshot, it's somehow double and there is a line separating the header. Do you know how I could get rid of the part above the back arrow?
Screenshot View
This is my code
NavigationView{
List(presenter.sections, id: \.self) { section in
Section(header: Text(section.title)) {
ForEach(section.items, id: \.self) { item in
NavigationLink("\(item.selectModel.title) \(item.selectModel.selectedValue?.name ?? "")") {
List{
ForEach(selectModel.listSelection, id: \.self) { value in
Button(action: {selectModel.action(value)}) {
VStack(alignment: .leading) {
Text(value.name)
.foregroundColor(.black)
}
.contentShape(Rectangle())
.cornerRadius(12)
}
}
}
.offset(y: 50)
}
.navigationBarTitle(selectModel.title, displayMode: .inline)
.navigationBarHidden(true)
}
}
}
}
.navigationBarTitle("TEST", displayMode: .inline)
.navigationBarHidden(true)
Related
Problem
First time when the button "Go to 990" is tapped the scroll view doesn't scroll to 990 on top. (see screenshot below)
The anchor is not respected.
Second time it scrolls to 990 top correctly.
Questions
What is wrong and how can it be fixed?
Versions
Xcode 14
Code
struct ContentView: View {
#State private var scrollProxy: ScrollViewProxy?
var body: some View {
NavigationStack {
ScrollViewReader { proxy in
List(0..<1000, id: \.self) { index in
VStack(alignment: .leading) {
Text("cell \(index)")
.font(.title)
Text("text 1")
.font(.subheadline)
Text("text 2")
.font(.subheadline)
}
}
.onAppear {
scrollProxy = proxy
}
}
.toolbar {
ToolbarItem {
Button("Go to 990") {
scrollProxy?.scrollTo(990, anchor: .top)
}
}
}
}
#if os(macOS)
.frame(minWidth: 500, minHeight: 300)
#endif
}
}
Screenshot
I want to change views once the user taps 'get started' but due to having navigation view in my first view, it is showing back button on my next screen which I don't want. Please see the images attached below.
Code for the first view is below:
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
Spacer()
Text("LifePath")
.font(.system(size: 48, weight: .semibold))
.padding(.bottom)
Spacer()
NavigationLink(destination: ViewChanger()) {
Text("Get Started")
.font(.headline)
.navigationBarBackButtonHidden(true)
}
}
.padding()
}
}
}
back button showing on screen 2
First view
Change the location of your navigationBackButtonHidden modifier so that it actually modifies the view that you're going to (and not the NavigationLink label):
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
Spacer()
Text("LifePath")
.font(.system(size: 48, weight: .semibold))
.padding(.bottom)
Spacer()
NavigationLink(destination: ViewChanger()
.navigationBarBackButtonHidden(true) // <-- Here
) {
Text("Get Started")
.font(.headline)
}
}
.padding()
}
}
}
If you want not only the back button to be gone, but the entire header bar, you can use the .navigationBarHidden(true) modifier.
Also, if you run this on iPad at all, you probably want .navigationViewStyle(StackNavigationViewStyle()) added to the outside of your NavigationView
If you use a NavigationLink (in a NavigationView), the view will be pushed. If you want to replace the view, you can do this with an if statement.
For example, this could be implemented like this:
struct ContentView: View {
#State var showSecondView: Bool = false
var body: some View {
if !showSecondView {
NavigationView {
VStack {
Spacer()
Text("LifePath")
.font(.system(size: 48, weight: .semibold))
.padding(.bottom)
Spacer()
Button(action: { showSecondView = true }) {
Text("Get Started")
.font(.headline)
}
}
.padding()
} else {
TabView {
// ...
}
}
}
}
struct ContentView: View {
var body: some View {
NavigationView {
List {
Text("Hi")
}
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .principal) {
Text("Title")
.font(.headline)
}
ToolbarItem(placement: .navigationBarLeading) {
Button(action: {}) {
Image(systemName: "person.circle")
.font(.largeTitle)
}
}
}
}
}
}
The .font(.largeTitle) on Image has no effect, only if I use it inside a button.
Is this a bug or am I doing something wrong?
It looks like SwiftUI treats single toolbar items differently (applies their own style, size etc).
A possible workaround is to put a Button in a more complex view, as in: How to change color of ToolbarItem with navigationBarLeading placement in SwiftUI
Adapted to your example it can look like this:
ToolbarItem(placement: .navigationBarLeading) {
HStack {
Button(action: {}) {
Image(systemName: "person.circle")
.font(.largeTitle)
}
Text("")
}
}
I have a View which shows Text view to show help text for user to tap on plus icon to add group. Once group is added, it shows List view. To show navigation bar, I need to call navigationBarTitle and navigationBarItems on both Text and List view. Below is my code snippet.
import SwiftUI
struct Home:View {
#EnvironmentObject var dataStore:DataStore
var body: some View {
NavigationView {
if dataStore.groups.isEmpty {
Text("Tap on + icon to add group.")
.font(.caption)
.multilineTextAlignment(.center)
.padding()
.foregroundColor(.gray)
.navigationBarTitle(Text("My App Name"), displayMode: .automatic)
.navigationBarItems(
trailing:
NavigationLink(
destination:
CreateGroup(),
label: {
Image(systemName: "plus")
.foregroundColor(Color.blue)
})
)
} else {
List(dataStore.groups) { groupElement in
GroupRow(group: groupElement)
}
.navigationBarTitle(Text("My App Name"), displayMode: .automatic)
.navigationBarItems(
trailing:
NavigationLink(
destination:
CreateGroup(),
label: {
Image(systemName: "plus")
.foregroundColor(Color.blue)
})
)
}
}
}
}
Is there a way to call navigationBarTitle and navigationBarItems only once rather than calling on both Text and List views?
Is there a way to call navigationBarTitle and navigationBarItems only
once rather than calling on both Text and List views?
Yes, you can wrap condition into any container, like Group or xStack:
struct Home:View {
#EnvironmentObject var dataStore:DataStore
var body: some View {
NavigationView {
Group {
if dataStore.groups.isEmpty {
Text("Tap on + icon to add group.")
.font(.caption)
.multilineTextAlignment(.center)
.padding()
.foregroundColor(.gray)
} else {
List(dataStore.groups) { groupElement in
GroupRow(group: groupElement)
}
}
}
.navigationBarTitle(Text("My App Name"), displayMode: .automatic)
.navigationBarItems(
trailing:
NavigationLink(
destination:
CreateGroup(),
label: {
Image(systemName: "plus")
.foregroundColor(Color.blue)
})
)
}
}
}
I'm trying to follow Composing Complex Interfaces guide on SwiftUI and having issues getting NavigationLink to work properly on iOS 13 beta 3 and now beta 4.
If you just download the project files and try running it, click on any of the Lake images - nothing will happen. However if you click on the header "Lakes" it'll start opening every single lake one after another which is not a behaviour anyone would expect.
Seems like NavigationLink is broken in "complex" interfaces. Is there a workaround?
I've tried making it less complex and removing HStack of List helps to get NavigationLinks somewhat to work but then I can't build the full interface like in example.
Relevant parts of the code:
var body: some View {
NavigationView {
List {
FeaturedLandmarks(landmarks: featured)
.scaledToFill()
.frame(height: 200)
.clipped()
.listRowInsets(EdgeInsets())
ForEach(categories.keys.sorted(), id: \.self) { key in
CategoryRow(categoryName: key, items: self.categories[key]!)
}
.listRowInsets(EdgeInsets())
NavigationLink(destination: LandmarkList()) {
Text("See All")
}
}
.navigationBarTitle(Text("Featured"))
.navigationBarItems(trailing: profileButton)
.sheet(isPresented: $showingProfile) {
ProfileHost()
}
}
}
struct CategoryRow: View {
var categoryName: String
var items: [Landmark]
var body: some View {
VStack(alignment: .leading) {
Text(self.categoryName)
.font(.headline)
.padding(.leading, 15)
.padding(.top, 5)
ScrollView(.horizontal, showsIndicators: false) {
HStack(alignment: .top, spacing: 0) {
ForEach(self.items, id: \.name) { landmark in
NavigationLink(
destination: LandmarkDetail(
landmark: landmark
)
) {
CategoryItem(landmark: landmark)
}
}
}
}
.frame(height: 185)
}
}
}
struct CategoryItem: View {
var landmark: Landmark
var body: some View {
VStack(alignment: .leading) {
landmark
.image(forSize: 155)
.renderingMode(.original)
.cornerRadius(5)
Text(landmark.name)
.foregroundColor(.primary)
.font(.caption)
}
.padding(.leading, 15)
}
}
It looks like there is a bug with NavigationLink instances that aren't directly contained in a List. If you replace the outermost List with a ScrollView and a VStack then the inner NavigationLinks work correctly:
i.e.
var body: some View {
NavigationView {
ScrollView(.vertical, showsIndicators: true) {
VStack {
FeaturedLandmarks(landmarks: featured)
.scaledToFill()
.frame(height: 200)
.clipped()
.listRowInsets(EdgeInsets())
ForEach(categories.keys.sorted(), id: \.self) { key in
CategoryRow(categoryName: key, items: self.categories[key]!)
}
.listRowInsets(EdgeInsets())
NavigationLink(destination: LandmarkList()) {
Text("See All")
}
}
}
.navigationBarTitle(Text("Featured"))
}
}