I'm pretty new to SwiftUI, trying to teach myself a few things here and there. But there's this one issue that's been eating at me for a while... and I can't figure out why the toolbar doesn't work/show for me.
The sample code is below, but the button doesn't show nor is there an actual bar. I have iOS 15.2, with XCode 13.2 beta.
TextField("placeholder", text: $text)
.toolbar {
ToolbarItemGroup(placement: .keyboard) {
HStack {
Button(action: {
hideKeyboard()
}) {
Text("Done")
}
}
}
}
EDIT:
Figured out the reason why... it just wouldn't work in a scroll view for some reason. Anyone know why?
Under iOS 15.2 - Xcode 13.2 (not beta).
struct ContentView: View {
#State var text: String = ""
var body: some View {
NavigationView {
VStack {
Text(text)
TextField("Enter your name", text: $text)
}
.padding()
.navigationTitle("SwiftUI")
.toolbar {
// ToolbarItem(placement: .keyboard) {
// Button("Ok") {
// print("ok")
// }
// }
ToolbarItemGroup(placement: .keyboard) {
HStack {
Button("Press Me") {
print("Pressed")
}
Spacer()
Button(action: {
print("done")
}) { Text("Done") }
}
}
}
}
}
}
Make sure you put everything in a VStack or similar.
Xcode 13.3 (release version), in order for the toolbar to show up, the TextField and the .toolbar need to be inside of a NavigationView.
In my particular case I didn't want a NavigationBar, so I ended up with something like this to make it work:
var body: some View {
NavigationView {
VStack {
TextField("Enter your name", text: $text)
// Additional text fields go here, all text fields will get the toolbar.
}
.navigationTitle("")
.navigationBarHidden(true)
.navigationBarBackButtonHidden(true)
.toolbar {
ToolbarItemGroup(placement: .keyboard) {
Spacer()
Button("Dismiss") {
print("Bismiss keyboard...")
}
}
}
}
}
Related
Here is the code i am trying to reproduce.
The problem is that when you click on the link, the screen opens without animation and an error is generated in the console.
But if you go to another page Tab and go back, then everything works correctly.
var body: some View {
TabView {
//First Screen
NavigationView {
NavigationLink {
Text("Hello Page 1")
} label: {
Text("Page 1")
}
}
.navigationViewStyle(.stack)
.tag(1)
//Second Screen
NavigationView {
NavigationLink {
Text("Hello Page 2")
} label: {
Text("Page 2")
.foregroundColor(.green)
}
}
.navigationViewStyle(.stack)
.tag(2)
}
.tabViewStyle(.page(indexDisplayMode: .always))
}
To correct this error you need to use individual structs in your TabView. In a real app, you would be doing this as a matter of course, and would not ever see this error. An example would be:
struct MyTabView: View {
var body: some View {
TabView {
Content1()
.tag(1)
Content2()
.tag(2)
}
.tabViewStyle(.page(indexDisplayMode: .always))
}
}
struct Content1: View {
var body: some View {
NavigationView {
NavigationLink {
Text("Hello Page 1")
} label: {
Text("Page 1")
}
}
.navigationViewStyle(.stack)
}
}
struct Content2: View {
var body: some View {
NavigationView {
NavigationLink {
Text("Hello Page 2")
} label: {
Text("Page 2")
}
}
.navigationViewStyle(.stack)
}
}
NavigationView would go in each of these contained structs as they would be the top of the hierarchy for each tab.
I am using a NavigationView to navigate between views. As I don't want to use the NavigationBar, I am hiding it. Unfortunately, the area where the NavigationBar was (it is hidden) is still blocking the UI. A button there cannot be tapped.
How can I fix this?
// First View
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
Spacer()
Text("Title")
Spacer()
NavigationLink(destination: View2()) {
Text("Next")
}
.navigationBarTitle("", displayMode: .inline)
.navigationBarBackButtonHidden(true)
.navigationBarHidden(true)
Spacer()
}
}
}
}
and
// Second View: Here the button cannot be tapped
struct View2: View {
var body: some View {
NavigationView {
VStack {
Button(action: {
print("this button doesn't work")
}, label: {
Text("Do something")
})
Spacer()
}
.padding(.top, 50)
.edgesIgnoringSafeArea(.all)
}
.navigationBarTitle("", displayMode: .inline)
.navigationBarBackButtonHidden(true)
.navigationBarHidden(true)
}
}
The issue is due to used second NavigationView - it is wrong, there should be only one root navigation view which manages navigation stack in this case.
So here is fixed view (child one)
struct View2: View {
var body: some View {
VStack {
Button(action: {
print("this button doesn't work")
}, label: {
Text("Do something")
})
Spacer()
}
.padding(.top, 50)
.edgesIgnoringSafeArea(.all)
.navigationBarBackButtonHidden(true)
.navigationBarHidden(true)
}
}
Tested with Xcode 13.2 / iOS 15.2
Note: as you hide navigation but you don't need mode modifier as well, so removed .navigationBarTitle("", displayMode: .inline). Just for your info.
I don't know if this is a bug or I am doing something wrong here. I've added a new button on the Navigation bar that would present a new view.
struct MyView: View {
#ObservedObject var viewModel = MyViewModel()
var body: some View {
List(viewModel.data, id: \.name) { data in
NavigationLink(destination: MyDetailView(data: data.name)) {
Text(data.name)
}
}
.listStyle(InsetGroupedListStyle())
.edgesIgnoringSafeArea(.all)
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
NavigationLink(destination: MyDetailView()) {
Text("New Element")
}
}
}
}
}
This is being tested on the newest iOS 14 beta (beta 6) and Xcode 12 (beta 6). As far as I know a Navigation Link presents fine the new view when on a List but in the toolbar as shown that's not the case. The button on the toolbar it's visible and active but doesn't trigger showing the new view.
I found using an HStack with an empty text as the first element also works, it lets the navigationLink act correctly.
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
HStack {
Text("")
NavigationLink(destination: SettingsView()) {
Image(systemName: "gear")
.font(.title)
}
}
}
NavigationLink should be inside NavigationView. Toolbar is not in NavigationView, put buttons in it.
So assuming you have somewhere in parent
NavigationView {
MyView()
}
here is a solution:
struct MyView: View {
#ObservedObject var viewModel = MyViewModel()
#State private var showNew = false
var body: some View {
List(viewModel.data, id: \.name) { data in
NavigationLink(destination: MyDetailView(data: data.name)) {
Text(data.name)
}
}
.listStyle(InsetGroupedListStyle())
.background(
NavigationLink(destination: MyDetailView(), isActive: $showNew) {
EmptyView()
}
)
.edgesIgnoringSafeArea(.all)
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
Button("New Element") {
self.showNew = true
}
}
}
}
}
Using Asperi solution may not work if your navigation link directs to a view with keyboard input.
After navigation link, toolbar in the new view loaded correctly but when providing input with keyboard and dismissing keyboard all toolbar items disappears.
The solution is to place NavigationLink not in View but in navigationBarItems, example:
.navigationBarItems(
leading:
NavigationLink(
destination: Creator(),
isActive: $showCreator,
label: {
Text("")
}))
Wondering if anyone else has this issue, and if a workaround has been found. This works fine in iOS 13, but seems broken in iOS 14.
I am just trying to fire off a NavigationLink to another View, from a .contextMenu.
My code is as below.
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
HStack {
Text("I am a text in a HStack ")
}
HStack {
NavigationLink(destination: TestView()) {
VStack {
Image(systemName:"gauge")
.font(.system(size: 31))
}
}
}
}
.contextMenu {
NavigationLink(destination: TestView()) {
Text("Navigate to TestView")
Image(systemName: "pencil")
}
}
}
}
}
The Destination TestView() is just a boilerplate "Hello World" view.
If I click not the Icon associated in the Stack, this triggers the navigation perfectly. But the same link in the context menu does not.
When I select it in the contextmenu, nothing happens. I.e I can select the menu item, but all it does is close the context menu and I stay on the same view.
Anyone else found this? solved it ?
Thanks
Here is a demo of possible approach. Tested with Xcode 12b3 / iOS 14 (also valid for SwiftUI 1.0)
struct ContentView: View {
#State private var showLink = false
var body: some View {
NavigationView {
VStack {
HStack {
Text("I am a text in a HStack ")
}
HStack {
NavigationLink(destination: Text("TestView")) {
VStack {
Image(systemName:"gauge")
.font(.system(size: 31))
}
}
}
}
.background(NavigationLink("", destination: Text("TestView"), isActive: $showLink))
.contextMenu {
Button(action: { self.showLink = true }) {
HStack {
Text("Navigate to TestView")
Image(systemName: "pencil")
}
}
}
}
}
}
XCode11 beta3,
MacOS Catalina 10.15 Beta（19A501i）
I want to hide tabBar when push~ Any command will very helpful, Thanks~
Click me to show gif image
:
struct ContentView : View {
var body: some View {
WhenNavigationViewIsRootView()
}
}
struct WhenNavigationViewIsRootView : View {
var body: some View {
NavigationView {
TabbedView{
Rectangle().foregroundColor(.green)
.tag(0).tabItem{Text("Page1")}
VStack {
List {
ForEach(0...2) { i in
NavigationLink(
destination: Text("\(i)"),
label: {Text("\(i)")})
}
}
}.tag(1).tabItem{Text("Page2")}
}
.navigationBarHidden(true)
}
}
}
If you want to hide the navigation bar in a TabbedView, you have to set .navigationBarHidden(true) on the views nested inside TabbedView. This isn't enough, however. For whatever reason, SwiftUI requires that you first set the navigation bar title before you can hide the navigation bar.
NavigationView {
TabbedView{
Rectangle()
.foregroundColor(.green)
.tag(0)
.tabItem{
Text("Page1")
}
.navigationBarTitle("")
.navigationBarHidden(true)
List(0...2) { i in
NavigationLink(destination: Text("\(i)")) {
Text("\(i)")
}
}
.tag(1)
.tabItem {
Text("Page2")
}
.navigationBarTitle("")
.navigationBarHidden(true)
}
}