I started to use SwiftUI after a couple years of UIKit.. This is not a piece of cake lol.
Alright, so I am trying to build an app that has a tab bar with 2 elements. Each Tab with contain a ViewController (View now) and they will be embedded in a NavigationController (NavigationView now)
The actual result is this
and I am expecting to have a nav bar with a title set to Home.
Could you explain me what I do wrong here? i followed the documentation and a couple tutorials, and I don't seem to do differently.
import SwiftUI
struct TabBarView: View {
var body: some View {
TabView() {
RedView()
.tabItem({
Image(systemName: "house.fill")
Text("Home")
})
.tag(0)
BlueView()
.tabItem({
Image(systemName: "dollarsign.square.fill")
Text("Trade")
})
.tag(1)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
TabBarView()
}
}
struct RedView: View {
var body: some View {
NavigationView {
List {
Text("test")
}
}
.navigationBarTitle("Home")
}
}
struct BlueView: View {
var body: some View {
NavigationView {
List {
Text("test2")
}
}
.navigationBarTitle("Trade")
}
}
This is the file that contains everything at the moment. Thanks in advance for any future help!
The .navigationBarTitle should be inside NavigationView
struct RedView: View {
var body: some View {
NavigationView {
List {
Text("test")
}
.navigationBarTitle("Home") // << here !!
}
}
}
Related
As written in the title i am trying to find a way to change the navigation style from left-to-right to a right-to-left Arabic style.
This is a simple NavigationView code I made:
import SwiftUI
struct HomeView: View {
var body: some View {
NavigationView {
List {
NavigationLink(destination: Text("Destination")) {
Text("Go To Destination")
}
}
.navigationTitle("Text")
}
}
}
struct HomeView_Previews: PreviewProvider {
static var previews: some View {
HomeView()
}
}
to make it short: I want to have the same view of the list like in the first image i shared. But when I add a navigation bar item the list looks strange to me. It this a bug of the new version of Swift/XCode or needs something to be changed?
Code:
import SwiftUI
import CoreData
struct ContentView: View {
var body: some View {
NavigationView {
List{
Text("test1")
Text("test2")
Text("test3")
}
.navigationTitle("Test")
// .navigationBarItems(leading:
// Text("Test")
// )
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Try using .navigationViewStyle as below:
struct ContentView: View {
#State private var isFullScreen = false
var body: some View {
NavigationView {
List{
Text("One")
Text("Two")
}
.navigationTitle("Testt")
.navigationBarItems(leading: Text("Add"))
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
Hey! Give This A Try!
var body: some View {
NavigationView {
List{
Text("One")
Text("Two")
}
.navigationTitle("Testt, displayMode: .inline)
.navigationBarItems(leading: Text("Add"))
}
}
}
I have lately been trying to make a tvOS app, but have run into the following rather annoying problem. I can't use navigation inside a TabView and still have the menu button on the remove take me back to the previous state.
struct TestView: View {
#State var selection : Int = 0
var body: some View {
TabView(selection: self.$selection) {
ExpView()
.tabItem {
HStack {
Image(systemName: "magnifyingglass")
Text("Explore")
}
}
.tag(0)
}
}
}
struct ExpView: View {
var body: some View {
NavigationView {
NavigationLink(destination: DetailView(title: "Hey")) {
Text("Detail")
}
}
}
}
struct DetailView: View {
var title : String
var body: some View {
VStack {
Text(title)
}
}
}
My question is: Is there any way to enable the menu button to go back to the previous view in the hierachy without dismissing the app completely?
You don't need to call dismiss on Menu it is called automatically for NavigationLink (so calling one more dismiss quits to main menu)
Here are fixed views. Tested with Xcode 11.4
struct ExploreView: View {
var body: some View {
NavigationView {
NavigationLink(destination: DetailView(title: "Hey")) {
Text("Detail")
}
}
}
}
struct DetailView: View {
var title : String
var body: some View {
VStack {
Text(title)
}
}
}
So I found a workaround for the issue.
If you place the navigationView outside the TabView and then use the following code it works:
struct TestView: View {
#State var selection : Int = 0
#State var hideNavigationBar : Bool
var body: some View {
NavigationView {
TabView(selection: self.$selection) {
ExpView(hideNavigationBar: self.$hideNavigationBar)
.tabItem {
HStack {
Image(systemName: "magnifyingglass")
Text("Explore")
}
}
.tag(0)
}
}
}
}
struct ExpView: View {
#Binding var hideNavigationBar : Bool
var body: some View {
NavigationLink(destination: DetailView(title: "Hey")) {
Text("Detail")
}.navigationBarTitle("")
.navigationBarHidden(self.hideNavigationBar)
.onAppear {
self.hideNavigationBar = true
}
}
}
struct DetailView: View {
var title : String
var body: some View {
VStack {
Text(title)
}
}
}
I have a modal sheet that is presented from my home view as such:
Button(action: {
...
}) {
...
}
.sheet(isPresented: ...) {
MySheetView()
}
In MySheetView, there is a NavigationView and a NavigationLink to push another view onto its view stack (while I'm on MySheetView screen and use the view inspector, there's only one UINavigationController associated with it which is what I expect).
However, as soon as I get to my next view that is presented from MySheetView using the NavigationLink, and I use the view hierarchy debugger, there are TWO UINavigationControllers on-top of each other. Note, this view does NOT have a NavigationView inside it, only MySheetView does.
Does anyone know what's going on here? I have a feeling this is causing some navigation bugs im experiencing. This can be easily reproduced in an example app with the same structure.
Ex:
// These are 3 separate SwiftUI files
struct ContentView: View {
#State var isPresented = false
var body: some View {
NavigationView {
Button(action: { self.isPresented = true }) {
Text("Press me")
}
.sheet(isPresented: $isPresented) {
ModalView()
}
}
}
}
struct ModalView: View {
var body: some View {
NavigationView {
NavigationLink(destination: FinalView()) {
Text("Go to final")
}
}
}
}
struct FinalView: View {
var body: some View {
Text("Hello, World!")
}
}
I don't observe the behaviour you described. Used Xcode 11.2. Probably you need to provide your code to find the reason.
Here is an example of using navigation views in main screen and sheet. (Note: removing navigation view in main screen does not affect one in sheet).
import SwiftUI
struct TestNavigationInSheet: View {
#State private var hasSheet = false
var body: some View {
NavigationView {
Button(action: {self.hasSheet = true }) {
Text("Show it")
}
.navigationBarTitle("Main")
.sheet(isPresented: $hasSheet) { self.sheetContent }
}
}
private var sheetContent: some View {
NavigationView {
VStack {
Text("Properties")
.navigationBarTitle("Sheet")
NavigationLink(destination: properties) {
Text("Go to Inspector")
}
}
}
}
private var properties: some View {
VStack {
Text("Inspector")
}
}
}
struct TestNavigationInSheet_Previews: PreviewProvider {
static var previews: some View {
TestNavigationInSheet()
}
}
Im trying to link a button action in SomeView1() to navigate to a someView2() without having the back button at the top of the screen. Instead, I want to add another button in SomeView2() that will navigate back to SomeView1(). is this possible in SwiftUI yet?
SomeView1()
struct SomeView1: View {
var body: some View {
NavigationView {
VStack {
//...view's content
NavigationLink(destination: SomeView2()) {
Text("go to SomeView2")
}
Spacer()
}
}
}
}
SomeView2()
struct SomeView2: View {
var body: some View {
NavigationView {
VStack {
//...view's content
NavigationLink(destination: SomeView1()) {
Text("go to SomeView1")
}
Spacer()
}
}
}
}
this is what it looks like:
The right way to get what you want here is to use the presentationMode environment variable:
import SwiftUI
struct View2: View {
#Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
var body: some View {
VStack {
Button(action: {
self.presentationMode.wrappedValue.dismiss()
}) {
Text("POP")
}
}
.navigationBarTitle("")
.navigationBarBackButtonHidden(true)
.navigationBarHidden(true)
}
}
struct ContentView: View {
var body: some View {
NavigationView {
NavigationLink(destination: View2()) {
Text("PUSH")
.navigationBarTitle("")
.navigationBarHidden(true)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
You can do something like this in SomeView2():
NavigationView {
VStack {
//...view's content
NavigationLink(destination: SomeView1()) {
Text("go to SomeView1")
}
Spacer()
}
}.navigationBarBackButtonHidden(true)
I believe that you should use only one NavigationView for the whole navigation process. Now you have three NavigationViews inside each other, which produces three back buttons.
So in your case it would become something like this:
struct SomeView1InsideNavigationView: View { // This should be the first view you present
var body: some View {
NavigationView { // Use NavigationView only once
SomeView1()
}
}
}
struct SomeView1: View {
var body: some View {
VStack { // Do *not* use NavigationView here
//...view's content
NavigationLink(destination: SomeView2()) {
Text("go to SomeView2")
}
Spacer()
}
}
}
struct SomeView2: View {
var body: some View {
VStack { // Do *not* use NavigationView here
//...view's content
NavigationLink(destination: SomeView1()) {
Text("go to SomeView1")
}
Spacer()
}
}
}