Too much space left between items when using ToolbarItemGroup

Question

When I use toolbar group in SwiftUI, there is too much space between elements. I put it with HStack in iOS 13, it is ok. But when I put it with toolbar in iOS 14, there is a problem. How can I fix this?

var muteUser: some View {
        NavigationLink(destination: Text("dddd").environmentObject(CurrentUser)) {
            Image(systemName: "speaker.slash")
                .frame(width: 22, height: 22)
        }
}
var friendSetting: some View {
        NavigationLink(destination: FriendSettings().environmentObject(CurrentUser)) {
            Image(systemName: "gear")
                .frame(width: 22, height: 22)
        }
}

var body: some View {
    GeometryReader { geometry in
        if #available(iOS 14.0, *) {
            chatView
                .toolbar {
                    ToolbarItem(placement: .principal) {
                        centerNavBar()
                            .frame(maxWidth: geometry.size.width*0.75)
                    }
                    ToolbarItemGroup(placement: .navigationBarTrailing) {
                        muteUser
                        friendSetting
                    }
                }
            
        } else {
            chatView
                .navigationBarItems(trailing:
                                        HStack(){
                                            centerNavBar()
                                            Spacer()
                                            rightNavBar
                                        }
                                        .frame(width: geometry.size.width*0.75)
                                    
                )
        }
    }
}

Simulator Screen Shot

score 4 · Answer 1 · answered Dec 23 '20 at 20:26

It looks like this is the standard appearance of two buttons inside ToolbarItemGroup.

You can use a HStack instead:

.toolbar {
    ToolbarItem(placement: .principal) {
        Image(systemName: "star.fill")
    }
    ToolbarItem(placement: .navigationBarTrailing) {
        HStack {
            NavigationLink(destination: Text("dddd").environmentObject(CurrentUser)) {
                Image(systemName: "speaker.slash")
                    .imageScale(.large)
            }
            NavigationLink(destination: FriendSettings().environmentObject(CurrentUser)) {
                Image(systemName: "gear")
                    .imageScale(.large)
            }
        }
    }
}

score 1 · Answer 2 · answered Dec 24 '20 at 19:46

1

Try omitting the .frame(width: 22, height: 22) on the toolbar item Images. I think that’s causing the iOS 14 toolbar to create UIToolbarItems with embedded views instead of simple images.

answered Dec 24 '20 at 19:46

Adam

4,405
16
23

Too much space left between items when using ToolbarItemGroup

2 Answers2