【SwiftUI入門】ToolbarItemの位置を変える

2024年2月2日

この記事の目次

ToolbarItemの位置を変えるには

ToolbarItemの位置を変えるにはToolbarItemの引数にplacementを記述し

NavigationStack {
何らかのView
.toolbar {
ToolbarItem(placement: 変えたい位置) {
Text(“アイテム”)
}
}
}

と記述します。

左側に配置したい場合はplacementには『.navigationBarLeading』と記述し、右側に配置したい場合は『.navigationBarTrailing』と記述します。

それでは実際にToolbarItemの位置を変えてみましょう。

今回は、右側と左側に位置を変えてみようと思います。

適当にSwiftUIのプロジェクトを作成してください。

toolbarはNavigationStackの中で使う必要があるので、まずはNavigationStackを作っていきましょう。

最初に記述されている

VStack {
Image(systemName: “globe”)
.imageScale(.large)
.foregroundColor(.accentColor)
Text(“Hello, world!”)}
.padding()

を

NavigationStack {
Text(“Hello”)
.toolbar {
ToolbarItem {
Text(“アイテム”)
}
}}

と書き換えましょう。

この記述は、以前の記述と同じなので説明は割愛します。

それでは、ToolbarItemの位置を変更しましょう。

まずは左側に配置します。

ToolbarItemに(placement: .navigationBarLeading)を追加しましょう。

コードについて説明します。

このコードはToolbarItemのplacementに

『.navigationBarLeading』を指定するといったものです。

placementはToolbarItemの位置を指定する引数です。

『.navigationBarLeading』は左側を配置することを意味します。

なので、追加したコードは左側に位置を変更するといった意味になります。

プレビューを見てみると、確かに左側に配置されていますね。

次に、右側に配置を戻してみましょう。

『.navigationBarLeading』を

『.navigationBarTrailing』と書き換えましょう。

これで、右側に配置が戻りました。

プレビューを見てみると、右側に戻っているのがわかります。

このように、ToolbarItemのplacementに位置を指定することで、ToolbarItemの位置を変更することができます。

Posted by mogi0506