Why is the button in the body behaving differently than the button in my NavigationView toolbar?

user_3973801 0
Viewed 21

I don't really follow why the following button:

Button { } label: {
    Image(systemName: "globe")
         .resizable()
         .scaledToFill()
}
.frame(width: size, height: size)
.border(.yellow)

is behaving differently in the body and in the NavigationView? Why isn't the one in the NavigationView filling the entire frame?

struct ContentView: View {
    let size = 45.0
    let fontSize = 17.0
    
    var body: some View {
        NavigationView {
            Button { } label: {
                Image(systemName: "globe")
                    .resizable()
                    .scaledToFill()
            }
            .frame(width: size, height: size)
            .border(.yellow)
            .toolbar {
                HStack(alignment: .top) {
                    
                    Button { } label: {
                        Image(systemName: "globe")
                            .resizable()
                            .scaledToFill()
                    }
                    .frame(width: size, height: size)
                    .border(.red)
                    
                    // Image and Title
                    VStack {
                        Image("nemo")
                            .resizable()
                            .scaledToFit()
                            .frame(height: size)
                        Text("Navigation Title")
                            .font(.system(size: fontSize))
                            .bold()
                    }.border(.green)
                }
                //.frame(maxWidth: .infinity)
            }
        }
    }
}

enter image description here

swiftui
1 Answers

This is a design of default button in toolbar, instead we can use custom, like

    Button { print(">> action here")} label: {
        Image(systemName: "globe")
            .resizable()
            .scaledToFill()
    }
    .buttonStyle(MyTabbarButtonStyle())
    .frame(width: size, height: size)
    .border(.red)

// and style (tune colours as you want)
struct MyTabbarButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .foregroundColor(configuration.isPressed ? .gray : .blue)
    }
}

demo

user_122990300
Related