I'm trying to show a toolbar on a view that is inside to navigation links. When I navigate to the third view I get the following message:
2020-09-15 23:09:31.097289-0500 CountTime[35018:3542166] [Assert]
displayModeButtonItem is internally managed and not exposed for
DoubleColumn style. Returning an empty, disconnected UIBarButtonItem
to fulfill the non-null contract.
And the toolbar is not shown. This happens only on iPhone, not iPad. I'm using Xcode 12 GM.
Here is the code:
struct ContentView: View {
var body: some View {
NavigationView {
NavigationLink(
destination: SecondView(),
label: {
Text("Navigate")
})
}
}
}
struct SecondView: View {
var body: some View {
ZStack {
NavigationLink(
destination: Text("Destination")
.toolbar {
ToolbarItem(placement: ToolbarItemPlacement.bottomBar) {
Button(action: {
print("sharing")
}) {
Image(systemName: "square.and.arrow.up")
}
}
},
label: {
Text("Navigate")
})
}
}
}
displayModeButtonItem is internally managed and not exposed for
DoubleColumn style
In your case SwiftUI for some reason tries to present a NavigationView in a DoubleColumn style.
A possible solution is to specify the style explicitly:
struct ContentView: View {
var body: some View {
NavigationView {
NavigationLink(destination: SecondView()) {
Text("Navigate")
}
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
I got the some issue.
.toolbar {
ToolbarItemGroup(placement: .navigationBarTrailing) {
Button(action: {
showEditView = true
}, label: {
Text("Edit")
})
}
}
does not work but the deprecated navigationBarItems works.
.navigationBarItems(trailing:
Button(action: {
showEditView = true
}, label: {
Text("Edit")
})
)
Related
I have an app that contains several views with NavigationLinks inside.
The main view looks like this, calling a Toolbar view I have created.
struct CountListView: View {
#StateObject var vm = CountListViewModel()
let navigationBar = HomePageNavigationBar()
var body: some View {
NavigationView {
List {
ForEach(vm.count, id: \.uid) { item in
NavigationLink(destination: CountView(count: item)) {
CountListItemView(name: item.name)
}
}
}
.toolbar {
navigationBar.rightSideOfBar()
navigationBar.leftSideOfBar()
}
.navigationBarTitle("Count")
The navigation bar function that is playing up looks like this
func leftSideOfBar() -> some ToolbarContent {
ToolbarItemGroup(placement: .navigationBarLeading) {
NavigationLink(destination: SettingsView()) {
Label("Settings", systemImage: "gear")
}
}
}
And the SettingsView is as follows:
struct SettingsView: View {
var body: some View {
List {
NavigationLink(destination: NameSettingView()) {
Text("Name")
}
.buttonStyle(PlainButtonStyle())
NavigationLink(destination: PrivacyPolicyView()) {
Text("Privacy Policy")
}
.buttonStyle(PlainButtonStyle())
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
When I open the Privacy Policy View on device, the returns to the SettingsView without any user intervention. But this problem doesn't exist in the simulator.
In my SwiftUI View I have a ScrollView filled with text for attribution to show what frameworks were used in my app.
Once this text scrolls past the navigation bar it should be hidden past that point to the very top of the iPhone screen BUT in my case the text reappears because my navigation bar seems to only be a certain height (see image below) and does not extend to the top of the screen and prevent text from reappearing.
The attribution view below is inside of a AboutView which is also inside of a SettingsView that contains a NavigationView.
Any idea why this is happening? Image is attached..
TEXT RE-APPEARING PAST NAVIGATION BAR
PARENT VIEW
struct Settings: View {
#Environment(\.presentationMode) var presentation
#State private var presentAbout: Bool = false
var body: some View {
NavigationView {
VStack {
Text("About").onTapGesture { presentAbout.toggle() }
}
.navigationBarTitle("Settings", displayMode: .inline)
.navigationBarBackButtonHidden(true)
.toolbar(content: {
Button(action: {
self.presentation.wrappedValue.dismiss()
}, label: { Text("Cancel") })
})
.background ( NavigationLink("", destination: AboutMenu(), isActive: $presentAbout ))
}
}
}
SUB VIEW 1
struct AboutMenu: View {
#Environment(\.presentationMode) var presentation
#State private var presentAttribution: Bool = false
var body: some View {
VStack {
Text("Attribution").onTapGesture { presentAttribution.toggle() }
}
.navigationBarTitle("About", displayMode: .inline)
.navigationBarBackButtonHidden(true)
.toolbar(content: {
ToolbarItem(placement: .navigationBarLeading) {
Button(action: { self.presentation.wrappedValue.dismiss() }, label: {
Image(systemName: "chevron.backward")
}
})
.background ( NavigationLink("", destination: Attribution(), isActive: $presentAttribution))
}
}
SUB VIEW 2 Where problem exists.
struct Attribution: View {
#Environment(\.presentationMode) var presentation
var body: some View {
VStack {
ScrollView {
Text(attribution) // <- THIS TEXT shows behind NavigationBar past the navigation bar.
}
}
.navigationBarTitle("Attribution", displayMode: .inline)
.navigationBarBackButtonHidden(true)
.toolbar(content: {
ToolbarItem(placement: .navigationBarLeading) {
Button(action: { self.presentation.wrappedValue.dismiss() }, label: {
Image(systemName: "chevron.backward")
}
})
}
}
This can happen when ScrollView is not root view of the NavigationView, so it does not recognise scroll view presence.
It can be fixed by explicit clipping, like
VStack {
ScrollView {
Text(introText)
}
.clipped() // << here !!
I am using .refreshable to List in Home Screen. When user clicks on any cell item from the List, presenting DetailsView by sheet/fullscreenCover. But, .refreshable is still attached with DetailsView.
How to disable refreshable in nested view (DetailsView) which is presented from Home Screen?
HomeView.swift
struct HomeView: View {
#State private var showDetailsView: Bool = false
var body: some View {
NavigationView {
List(0..<29) { _ in
Text("Hello, world!")
.padding()
.onTapGesture {
showDetailsView = true
}
//.sheet or .fullScreenCover
.fullScreenCover(isPresented: $showDetailsView) {
DetailsView()
}
}
.refreshable {
print("refreshing...")
}
.navigationTitle("Home")
}
}
}
DetailsView.swift
struct DetailsView: View {
#Environment(\.presentationMode) var presentationMode
var body: some View {
NavigationView {
List(0..<29) { _ in
Text("DetailsView...")
.padding()
}
.navigationTitle("DetailsView")
.navigationBarItems(
leading:
Button(action: {
presentationMode.wrappedValue.dismiss()
}) {
Text("Close")
}
)
}
}
}
}
Move fullScreenCover modifier out of NavigationView (on home), and probably in real app it will be needed to use variant with item fullScreenCover(item:) instead to pass selection.
var body: some View {
NavigationView {
List(0..<29) { _ in
Text("Hello, world!")
.padding()
.onTapGesture {
showDetailsView = true
}
//.sheet or .fullScreenCover
}
.refreshable {
print("refreshing...")
}
.navigationTitle("Home")
}
.fullScreenCover(isPresented: $showDetailsView) { // << here !!
DetailsView()
}
}
Tested with Xcode 13.3 / iOS 15.4
I'm trying replicate the behavior of iOS Photos app.
Till now the thing I can't figure how could be done is the select mode, where when I press the button select how I can change the bottom bar?
Graphically, what I intend is, in this view:
When I pressed the button, the bottom bar changes to:
In the real project the views are embed inside a NavigationView
The code of the main view is similar to
struct ContentView: View {
var body: some View {
NavigationView{
TabView{
data()
.tabItem {
Text("Data")
}
data2()
.tabItem {
Text("Data")
}
}
}
}
I'm using Xcode 12 and swiftUI 2.0
First we need Conditional modifier like that https://stackoverflow.com/a/61253769/2715636
struct conditionalModifier: ViewModifier {
var isShowing: Bool
func body(content: Content) -> some View {
Group {
if self.isShowing {
content
.toolbar {
ToolbarItem(placement: .bottomBar, content: {
Button(action: {
}){
Image(systemName: "square.and.arrow.up")
}
})
}
.toolbar {
ToolbarItem(placement: .status, content: {
Text("Toolbar")
.fontWeight(.bold)
})
}
}
}
}}
I don't need else statement cause I only want to see Toolbar
else { content }
And here is my Tabbar inside ZStack. We're gonna overlay it with Text using Conditional modifier applied to Text
struct ContentView: View {
#State private var showToolbar: Bool = false
var body: some View {
Button(action: {
showToolbar.toggle()
}, label: {
Text(showToolbar ? "Show Tabbar" : "Show Toolbar")
}).padding()
ZStack {
TabView {
someView()
.tabItem {
Image(systemName: "placeholdertext.fill")
Text("Tab 1")
}
someView()
.tabItem {
Image(systemName: "placeholdertext.fill")
Text("Tab ")
}
someView()
.tabItem {
Image(systemName: "placeholdertext.fill")
Text("Tab 3")
}
}
Text("")
.modifier(conditionalModifier(isShowing: showToolbar))
}
}}
Final result
tabbar to toolbar
There's a new view modifier in iOS 16 that let you switch the tab bar and the bottom bar.
https://developer.apple.com/documentation/swiftui/view/toolbar(_:for:)
For example,
ContentView()
.toolbar(isSelecting ? .visible : .hidden, for: .bottomBar)
.toolbar(isSelecting ? .hidden : .visible, for: .tabBar)
I am aware of how to dismiss a modal from a child view using #Environment (\.presentationMode) var presentationMode / self.presentationMode.wrappedValue.dismiss() but this is a different issue.
When you present a multi-page NavigationView in a modal window, and have navigated through a couple of pages, the reference to presentationMode changes to be the NavigationView, so using self.presentationMode.wrappedValue.dismiss() simply pops the last NavigationView rather than dismissing the containing modal.
Is it possible - and if so how - to dismiss the containing modal from a page in a NavigationView tree?
Here's a simple example showing the problem. If you create an Xcode Single View app project using SwiftUI and replace the default ContentView code with this, it should work with no further changes.
import SwiftUI
struct ContentView: View {
#State var showModal: Bool = false
var body: some View {
Button(action: {
self.showModal.toggle()
}) {
Text("Launch Modal")
}
.sheet(isPresented: self.$showModal, onDismiss: {
self.showModal = false
}) {
PageOneContent()
}
}
}
struct PageOneContent: View {
var body: some View {
NavigationView {
VStack {
Text("I am Page One")
}
.navigationBarTitle("Page One")
.navigationBarItems(
trailing: NavigationLink(destination: PageTwoContent()) {
Text("Next")
})
}
}
}
struct PageTwoContent: View {
#Environment (\.presentationMode) var presentationMode
var body: some View {
NavigationView {
VStack {
Text("This should dismiss the modal. But it just pops the NavigationView")
.padding()
Button(action: {
// How to dismiss parent modal here instead
self.presentationMode.wrappedValue.dismiss()
}) {
Text("Finish")
}
.padding()
.foregroundColor(.white)
.background(Color.blue)
}
.navigationBarTitle("Page Two")
}
}
}
Here is possible approach based on usage own explicitly created environment key (actually I have feeling that it is not correct to use presentationMode for this use-case.. anyway).
Proposed approach is generic and works from any view in modal view hierarchy. Tested & works with Xcode 11.2 / iOS 13.2.
// define env key to store our modal mode values
struct ModalModeKey: EnvironmentKey {
static let defaultValue = Binding<Bool>.constant(false) // < required
}
// define modalMode value
extension EnvironmentValues {
var modalMode: Binding<Bool> {
get {
return self[ModalModeKey.self]
}
set {
self[ModalModeKey.self] = newValue
}
}
}
struct ParentModalTest: View {
#State var showModal: Bool = false
var body: some View {
Button(action: {
self.showModal.toggle()
}) {
Text("Launch Modal")
}
.sheet(isPresented: self.$showModal, onDismiss: {
}) {
PageOneContent()
.environment(\.modalMode, self.$showModal) // < bind modalMode
}
}
}
struct PageOneContent: View {
var body: some View {
NavigationView {
VStack {
Text("I am Page One")
}
.navigationBarTitle("Page One")
.navigationBarItems(
trailing: NavigationLink(destination: PageTwoContent()) {
Text("Next")
})
}
}
}
struct PageTwoContent: View {
#Environment (\.modalMode) var modalMode // << extract modalMode
var body: some View {
NavigationView {
VStack {
Text("This should dismiss the modal. But it just pops the NavigationView")
.padding()
Button(action: {
self.modalMode.wrappedValue = false // << close modal
}) {
Text("Finish")
}
.padding()
.foregroundColor(.white)
.background(Color.blue)
}
.navigationBarTitle("Page Two")
}
}
}
Another Approach would be to simply use a notification for this case and just reset the triggering flag for your modal.
It is not the most beautiful solution for me but it is the solution I am most likely to still understand in a few months.
import SwiftUI
struct ContentView: View {
#State var showModalNav: Bool = false
var body: some View {
Text("Present Modal")
.padding()
.onTapGesture {
showModalNav.toggle()
}.sheet(isPresented: $showModalNav, content: {
ModalNavView()
}).onReceive(NotificationCenter.default.publisher(for: Notification.Name(rawValue: "PushedViewNotifciation"))) { _ in
showModalNav = false
}
}
}
struct ModalNavView: View {
var body: some View {
NavigationView {
NavigationLink(
destination: PushedView(),
label: {
Text("Show Another View")
}
)
}
}
}
struct PushedView: View {
var body: some View {
Text("Pushed View").onTapGesture {
NotificationCenter.default.post(Notification.init(name: Notification.Name(rawValue: "PushedViewNotifciation")))
}
}
}
If you don't want to loosely couple the views through a notification you could also just use a binding for this like so:
struct ContentView: View {
#State var showModalNav: Bool = false
var body: some View {
Text("Present Modal")
.padding()
.onTapGesture {
showModalNav.toggle()
}.sheet(isPresented: $showModalNav, content: {
ModalNavView(parentShowModal: $showModalNav)
}).onReceive(NotificationCenter.default.publisher(for: Notification.Name(rawValue: "PushedViewNotifciation"))) { _ in
showModalNav = false
}
}
}
struct ModalNavView: View {
#Binding var parentShowModal: Bool
var body: some View {
NavigationView {
NavigationLink(
destination: PushedView(parentShowModal: $parentShowModal),
label: {
Text("Show Another View")
}
)
}
}
}
struct PushedView: View {
#Binding var parentShowModal: Bool
var body: some View {
Text("Pushed View").onTapGesture {
parentShowModal = false
}
}
}
If it's only two levels, and especially if you can dismiss the sheet at multiple levels, you could include showModal as a binding variable in your navigation views below, and then toggling it anywhere would dismiss the entire sheet.
I would assume you could do something similar with showModal as an EnvironmentObject as Wei mentioned above - which might be better if there are more than two levels and you only want to dismiss the sheet at the most specific level.
I can't remember if there's some reason to move away from doing this as a binding variable, but it seems to be working for me.
import SwiftUI
struct ContentView: View {
#State var showModal: Bool = false
var body: some View {
Button(action: {
self.showModal.toggle()
}) {
Text("Launch Modal")
}
.sheet(isPresented: self.$showModal, onDismiss: {
self.showModal = false
}) {
// Bind showModal to the corresponding property in PageOneContent
PageOneContent(showModal: $showModal)
}
}
}
Then you add showModal as a binding variable in PageOneContent, and it is bound to the state variable in ContentView.
struct PageOneContent: View {
// add a binding showModal var in here
#Binding var showModal: Bool
var body: some View {
NavigationView {
VStack {
Text("I am Page One")
}
.navigationBarTitle("Page One")
.navigationBarItems(
// bind showModal again to PageTwoContent
trailing: NavigationLink(destination: PageTwoContent(showModal: $showModal)) {
Text("Next")
})
}
}
}
Finally, in PageTwoContent, you can add showModal here (and in the NavigationLink in PageOneContent, you have bound PageTwoContent's showModal to PageOneContent). Then in your button, all you have to do is toggle it, and it will dismiss the sheet.
struct PageTwoContent: View {
// Add showModal as a binding var here too.
#Binding var showModal: Bool
var body: some View {
NavigationView {
VStack {
Text("This should dismiss the modal. But it just pops the NavigationView")
.padding()
Button(action: {
// This will set the showModal var back to false in all three views, and will dismiss the current sheet.
self.showModal.toggle()
}) {
Text("Finish")
}
.padding()
.foregroundColor(.white)
.background(Color.blue)
}
.navigationBarTitle("Page Two")
}
}
}
I found out you can actually make showModal into an EnvironmentObject, then simplify toggle the showModal to false on PageTwoContent to dismiss both PageOneContent and PageTwoContent.