Issue with Label inside ToolBarItem

Question

Erlemaitre OP

Created Nov ’20

Replies 1

Boosts 0

Views 3.4k

Participants 2

Hello everyone ! I'm having an issue with the ToolbarItem in a NavigationView. I'm using this code :

Code Block swiftstruct ContentView: View {
    var body: some View {
        NavigationView {
            List(0 ..< 5) { item in
                Text("Hello")
            }
            .navigationTitle("My items")
            .toolbar(content: {
                ToolbarItem(placement: .bottomBar) {
                    Button(action: {}, label: {
                        Label("Add", systemImage: "plus.circle.fill")
                    })
                }
            })
        }
    }
}

The problem is that the Label does not display correctly, only the image is visible...
Any idea to solve this problem ?

Answered by OOPer in 646840022

Seems NavigationView affects the default label style inside toolbar.

You may want to try the solution in a SO thread: SwiftUI 2.0 ToolbarItem Labels showing sideways.
(The problem was a little bit different, but the solution may apply to your issue.)

Code Block struct ContentView: View {
    var body: some View {
        NavigationView {
            List(0 ..< 5) { item in
                Text("Hello")
            }
            .navigationTitle("My items")
            .toolbar(content: {
                ToolbarItem(placement: .bottomBar) {
                    Button(action: {}, label: {
                        Label("Add", systemImage: "plus.circle.fill")
                    })
                    .labelStyle(VerticalLabelStyle())
                }
            })
        }
    }
}
struct VerticalLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack {
            configuration.icon.font(.headline)
            configuration.title.font(.subheadline)
        }
    }
}

You may try to define other label styles if vertical is not what you want.

Boost

Answer 1

OOPer OP

Nov ’20

Accepted Answer

Seems NavigationView affects the default label style inside toolbar.

You may want to try the solution in a SO thread: SwiftUI 2.0 ToolbarItem Labels showing sideways.
(The problem was a little bit different, but the solution may apply to your issue.)

Code Block struct ContentView: View {
    var body: some View {
        NavigationView {
            List(0 ..< 5) { item in
                Text("Hello")
            }
            .navigationTitle("My items")
            .toolbar(content: {
                ToolbarItem(placement: .bottomBar) {
                    Button(action: {}, label: {
                        Label("Add", systemImage: "plus.circle.fill")
                    })
                    .labelStyle(VerticalLabelStyle())
                }
            })
        }
    }
}
struct VerticalLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack {
            configuration.icon.font(.headline)
            configuration.title.font(.subheadline)
        }
    }
}

You may try to define other label styles if vertical is not what you want.

1