The issue of toolbar item size when windowToolbarStyle is unifiedCompact

Question

Created Oct ’23

Replies 1

Boosts 0

Views 1.4k

Participants 1

I created a window using NavigationSplitView, and also set WindowGroup{}.windowToolbarStyle(.unifiedCompact). I found that the toolbar items became smaller. In comparison, Xcode's toolbar also has a narrower vertical height, but the items maintain their original size. How is this achieved?

import SwiftUI

@main
struct ThreeSideViewerApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .windowToolbarStyle(.unifiedCompact)
    }
}


struct ContentView: View {
    @State var show: Bool = true

    var body: some View {
        NavigationSplitView
            {
                Text("SideBar")
            }
            detail: {
                Text("detail")
            }
    }
}

截屏2023-10-16 00.17.46.png

Boost

Answer 1

WangZiYuan OP

Oct ’23

i found a way by myself

import SwiftUI

@main
struct ThreeSideViewerApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .windowToolbarStyle(.unifiedCompact)
    }
}

struct ContentView: View {
    @State var show: NavigationSplitViewVisibility = .all

    var body: some View {
        NavigationSplitView(columnVisibility: $show)
            {
                Text("SideBar")
                    .toolbar(removing: .sidebarToggle)   // remove default add
                    .toolbar {
                        ToolbarItem {
                            // add my self
                            Button(action: {
                                       // use animeatino to toggle
                                       withAnimation {
                                           if show == .all {
                                               show = .detailOnly
                                           } else {
                                               show = .all
                                           }
                                       }
                                   },
                                   label: {
                                       // set large
                                       Image(systemName: "sidebar.leading").imageScale(.large)
                                   })
                        }
                    }
            }
            detail: {
                Text("detail")
            }
    }
}

0