macOS での SwiftUI の ToolbarItem 配置をあらためて整理してみます。
Sponsor Link
環境&対象
以下の環境で動作確認を行なっています。
- macOS Monterey beta 12
- Xcode 13 beta5
- iOS 15
toolbar 配置指定可能箇所
ドキュメントからの抜粋
指定 | 配置場所+説明 |
---|---|
automatic | In macOS and in Mac Catalyst apps, the system places items in the current toolbar section in order of leading to trailing. |
principal | In macOS and in Mac Catalyst apps, the system places the principal item in the center of the toolbar. |
navigation | In macOS and in Mac Catalyst apps, the system places navigation items in the leading edge of the toolbar ahead of the inline title if that is present in the toolbar. |
primary action | In macOS and in Mac Catalyst apps, the location for the primary action is the leading edge of the toolbar. |
status | In macOS and in Mac Catalyst apps, the system places status items in the center of the toolbar. |
confirmationAction | In macOS and in Mac Catalyst apps, the system places `confirmationAction` items on the trailing edge in the trailing-most position of the sheet and gain the apps accent color as a background color. |
cancellationAction | In macOS and in Mac Catalyst apps, the system places `cancellationAction` items on the trailing edge of the sheet but places them before any “confirmationAction“ items. |
destructiveAction | In macOS and in Mac Catalyst apps, the system places `destructiveAction` items in the leading edge of the sheet and gives them a special appearance to caution against accidental use. |
keyboard | On macOS, keyboard items will be placed inside the Touch Bar. |
実際の配置箇所
使ったコードは以下です。confirmationAction, cancellationAction, destructiveAction, keyboard は、少し意味が異なるので使用していません。
//
// ContentView.swift
//
// Created by : Tomoaki Yagishita on 2021/10/20
// © 2021 SmallDeskSoftware
//
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
Text("1st Pane")
Text("2nd Pane")
}
.navigationTitle("NavTitle")
.navigationSubtitle("Sub")
.toolbar(id: "bar1") {
ToolbarItem(id: "item1", placement: .navigation) {
Button(action: {}, label: {Label("navigation", systemImage: "1.circle")})
}
}
.toolbar(id: "bar2") {
ToolbarItem(id: "item2", placement: .principal) {
Button(action: {}, label: {Label("principal", systemImage: "2.circle")})
}
}
.toolbar(id: "bar3") {
ToolbarItem(id: "item3", placement: .primaryAction) {
Button(action: {}, label: {Label("primaryAction", systemImage: "3.circle")})
}
}
.toolbar(id: "bar4") {
ToolbarItem(id: "item4", placement: .status) {
Button(action: {}, label: {Label("status", systemImage: "4.circle")})
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
実際の配置は、以下の通り。

考察
Customize Toolbar.. を使って、順番を入れ替えたり非表示にしてみたところ、以下のようになりました。
- .navigation 指定すると、左側に配置されます
- .principal, .primaryAction, .status は、右側に宣言順に右から配置されます
- .principal 指定された Item がないと、右寄りに 2つのボタン(.primaryAction, .status) が表示されます
- .principal 指定された Item があると、中央寄りに 3つのボタン(.principal, .primaryAction, .status) が表示されます
- 上記は、.principal が3つのボタン中のどの位置にあっても同じ振る舞いをします

MEMO
Apple のドキュメントと少し異なる気がしますが、実際の動きは上記のようになっていました。
Beta だからかもしれませんが、意図通りかもしれません・・・
MEMO2
同じ placement を指定した ToolbarItem は、後から指定された方が最終的に使用されます。
MEMO3
Customize Toolbar… でツールバーをカスタマイズするのは、アニメーション含め楽しいです。macOS でツールバーを使うのであれば、対応すべきかと思います。
[SwiftUI][macOS] macOS での SwiftUI の toolbar をカスタマイズ可能にする
まとめ:macOS での ToolbarItem配置位置
macOS での ToolbarItem配置位置
- .navigation は左側
- .primaryAction, .status, .principal は右側
- .principal があると中央寄りになる
説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。
Sponsor Link