【SwiftUI入門】NavigationBarItemsを使ってみよう

2020年7月30日

この記事の目次

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部品を配置することができます。