【SwiftUI入門】toolBarItem
この記事の目次
ToolbarItemとは
ToolbarItemというのはtoolbarにViewを配置するためのモディファイアです。
toolbarというのは画面上部や下部に配置されるボタンやアイコンなどの集合のことです。
toolbarに置かれるものの例としては『戻るボタン』や『検索ボタン』が挙げられます。
ToolbarItemは
| NavigationStack{ 何らかのView .toolbar { ToolbarItem { ツールバーに追加したいView } }} |
と記述します。
実際に使ってみる
それでは、実際に使ってみましょう。
適当にSwiftUIのプロジェクトを作成してください。
toolbarはNavigationStackの中で使う必要があるので、まずはNavigationStackを作っていきましょう。
最初に記述されている
| VStack { Image(systemName: “globe”) .imageScale(.large) .foregroundColor(.accentColor) Text(“Hello, world!”)} .padding() |
を
| NavigationStack { Text(“Hello”)} |
と書き換えましょう。
このコードはNavigationStackを作って、その中に適当にHelloと表示されるTextを作るといったものです。
準備が整ったので、toolbarを使っていきましょう。
先ほど作ったText(“Hello”)に
| .toolbar { ToolbarItem { Text(“アイテム”) }} |
と追加しましょう。
コードについて説明します。
toolbarは『{ }』の中に入れたViewがツールバーに配置されます。
今回は、ToolbarItemを入れたので、
ToolbarItemがツールバーの中に配置されます。
ToolbarItemは中に入れたViewがツールバーに配置されます。
今回はアイテムと表示されるTextを記述したので、『アイテム』とツールバーに表示されるはずです。
プレビューを見てみましょう。
すると、確かにツールバーに『アイテム』と表示されていますね。
このようにToolbarItemを使うとツールバーにViewを配置することができます。