skip to Main Content

I have a Mac Catalyst app I had built using SwiftUI,and I cant seem to add buttons to the trailing navigation bar?

I am also unsure where this navigationBar is defined, is it possible to remove? It only seems to have appeared in Ventura.

enter image description here

struct AppSidebarNavigation: View {
  
enum NavigationItem {
    case home
}

@State private var selection: NavigationItem? = .home

init() {

    #if !targetEnvironment(macCatalyst)
    UITableView.appearance().backgroundColor = UIColor(named: "White")
    UITableViewCell.appearance().selectionStyle = .none
    UITableView.appearance().allowsSelection = false

    #endif

}

var body: some View {
    NavigationView {
        sidebar
            .navigationTitle("")
            .navigationBarTitleDisplayMode(.inline)


        // Main View
        HomeView()
            .navigationTitle("")
            .edgesIgnoringSafeArea(.top)
            .navigationBarHidden(isMac ? false : true)
            .navigationBarBackButtonHidden(isMac ? false : true)
    }
    .accentColor(Color("Black"))
    .navigationViewStyle(.columns)

}
}

HomeView I had the following to the View.

#if targetEnvironment(macCatalyst)
.navigationBarItems(trailing:
    NavButtons
)
#endif

var NavButtons: some View {
    HStack {
        Button(action: { 
            Print("No")
        }) {
            Image(systemName: "plus")
                .font(.system(size: 14, weight: .medium))
        }
        .buttonStyle(NavPlusButton())
    }
}

2

Answers


  1. I don’t think it is possible to do that because:

     @available(iOS, introduced: 13.0, deprecated: 100000.0, message: "Use toolbar(_:) with navigationBarLeading or navigationBarTrailing placement")
        @available(tvOS, introduced: 13.0, deprecated: 100000.0, message: "Use toolbar(_:) with navigationBarLeading or navigationBarTrailing placement")
        @available(macOS, unavailable)
        @available(watchOS, unavailable)
        public func navigationBarItems<T>(trailing: T) -> some View where T : View
    

    This indicates on macOS the function in not available.

    I slightly modified your code (to get it to compile) and saw that where it would be is at the red circle below:

    enter image description here

    My code is:

    struct AppSidebarNavigation: View {
        
        enum NavigationItem {
            case home
        }
        
        @State private var selection: NavigationItem? = .home
        
        var isMac: Bool
        
        init() {
            
    #if !targetEnvironment(macCatalyst)
            UITableView.appearance().backgroundColor = UIColor(named: "White")
            UITableViewCell.appearance().selectionStyle = .none
            UITableView.appearance().allowsSelection = false
            isMac = false
    #else
            isMac = true
    #endif
            
        }
        
        var body: some View {
            NavigationView {
    
                // Main View
                HomeView()
                    .navigationTitle("NavTitle")
                    .edgesIgnoringSafeArea(.top)
                    .navigationBarHidden(isMac ? false : true)
                    .navigationBarBackButtonHidden(isMac ? false : true)
                    .navigationBarItems(trailing: NavButtons)
            }
            .accentColor(Color("Black"))
            .navigationViewStyle(.columns)
            
        }
    }
    var NavButtons: some View {
        HStack {
            Button(action: {}) {
                Image(systemName: "plus")
            }
    //        Button(action: {
    //            print("No")
    //        }) {
    //            Image(systemName: "plus")
    //                .font(.system(size: 14, weight: .medium)).frame(width: 80)
    //        }
        }
    }
    
    struct HomeView: View {
        var body: some View {
            Group {
                Text("Home View")
                NavButtons
            }
        }
    }
    
    struct HomeView_Previews: PreviewProvider {
        static var previews: some View {
            HomeView()
        }
    }
    
    struct NavButton_Previews: PreviewProvider {
        static var previews: some View {
            NavButtons
        }
    }
    struct ContentView: View {
        var body: some View {
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundColor(.accentColor)
                Text("Hello, world!")
                AppSidebarNavigation()
            }
            .padding()
        }
    }
    
    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            ContentView()
        }
    }
    
    
    Login or Signup to reply.
  2. You can use Toolbar modifier with .primaryAction as placement to place button on the trailing side on Navigation Bar.

    Just replace .navigationBarItem with below:

    #if targetEnvironment(macCatalyst)
        .toolbar {
            ToolbarItem(placement: .primaryAction) {
                NavButtons
            }
        }
    #endif
    

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search