【SwiftUI入門】NavigationBarItemsを使ってみよう
この記事の目次
NavigationBarItems
NavigationBarItemsというのは上の方にTextやButtonなどのUI部品を配置したい時に使うモディファイアです。
NavigationVIewの中でUI部品に追加して使います。
NavigationBarItemsは右上にUI部品を表示させたい時は引数に『trailing』を入れて
| NavigationView{ 何らかのUI部品 .navigationBarItems(trailing: 何らかのUI部品)} |
と記述します。
左上に表示させたい時は引数に『leading』と入れて
| NavigationView{ 何らかのUI部品 .navigationBarItems(leading: 何らかのUI部品)} |
と記述します。
それぞれ実際に使ってみましょう。
適当にSwiftUIのプロジェクトを作成してください。
navigationBarItemsはNavigationVIewの中で使う必要があるので、まずはNavigationViewを作っていきましょう。
| Text(“Hello, World!”) |
を消して、
代わりに
| NavigationView { } |
と記述しましょう。
NavigationViewの中に何も入っていないとエラーが出てしまいます。
適当にTextを入れておきましょう。
| Text(“Hello”) |
準備が整ったのでNavigationBarItemsを使っていきましょう。
まずは右上に表示させます。
先ほど作ったテキストに
| .navigationBarItems(trailing: Text(“アイテム”)) |
と追加しましょう。
navigationBarItemsの引数『trailing』には
『Text(“アイテム”)』が格納されているので、
右上に『アイテム』と表示されるはずです。
プレビューを見てみましょう。
予想通り右上に『アイテム』と表示されていますね。
次に右上ではなく左上に表示させてみましょう。
やることは簡単で、nagigationBarItemsの引数の『trailing』を
『leading』に変更するだけです。
この状態でプレビューを見てみると左上に『アイテム』と表示されるはずです。
プレビューを見てみましょう。
予想通り左上に『アイテム』と表示されましたね。
このようにnagigationBarItemsを使うと上の方にUI部品を配置することができます。