CODEWITHSUNDEEP
iosxcodeswiftuinavigationbar
alionthego
alionthego

Reputation: 9743

How can I place a circular progressView in a navigationBar with swiftui?

I have a swiftUI project and I want to place a circular progressView in the navigation bar doing the following:

.toolbar {
    ToolbarItem(placement: ToolbarItemPlacement.navigationBarTrailing) {
        Button {
            // some action
        } label: {
            HStack {
                ProgressView()
                    .frame(width: 20, height: 20)
                    .progressViewStyle(CircularProgressViewStyle())
                Text("Save Edits")
            }
            
        }
    }
}

The "Save Edits" appears but the progressView does not. I'm guessing SwiftUI only allows text or images in the navigationBar as a toolbarItem. Was wondering if there is any other approach to get the circular progressView in the navigationBar. I see this in many apps that want to let the user know something is happening when they press the navigation bar button.

Upvotes: 0

Views: 1714

Answers (1)

alionthego
alionthego

Reputation: 9743

It seems the problem was having an HStack in the button.

Here is the solution in case somebody else had this problem:

.toolbar {
    ToolbarItem(placement: ToolbarItemPlacement.navigationBarTrailing) {
        ProgressView()
            .progressViewStyle(CircularProgressViewStyle())
    }
    ToolbarItem(placement: ToolbarItemPlacement.navigationBarTrailing) {
        Button {
            // some action
        } label: {
            
            Text("Save Edits")
        }
    }
}

Upvotes: 1

Related Questions