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

2020年7月28日2021年1月27日

NavigationBarTitle

NavigationBarTitleというのはタイトルを作るモディファイアのことです。

NavigationVIewの中でTextやButtonなどのUI部品に追加して使います。

NavigationBarTitleは

NavigationView{    何らかのUI部品        .navigationBarTitle(Text(“タイトルとして表示したい文字”))}

と記述して使います。

それでは実際に使ってみましょう。

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

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

Text(“Hello, World!”)

を消してください。

消した部分にNavigationVIewを作ります。

Canvasが表示されている状態で

プラスボタンを押しましょう。

するとこのような画面が表示されます。

一番左のアイコンを選択して、

Navigation VIewを探しましょう。

NavigationViewを見つけたらbodyの中に

NavigationVIewをドラッグアンドドロップしましょう。

するとNavigationVIewが追加されます。

初期状態ではNavigationViewの中にNavigationLinkが含まれていますが、

今回は使わないので消しておきましょう。

代わりに適当なテキストを入れておきましょう。

プレビューを見てみるとこのような表示になっています。

次にタイトルを追加していきましょう。

先ほど作ったTextにNavigationBarTitleを追加します。

Textの後ろに

.navigationBarTitle(Text(“タイトル”))

と記述しましょう。

.navigationBarTitleの引数に入れたTextがタイトルとして表示されるので、『タイトル』というように表示されます。

プレビューで確認してみましょう。

ちゃんとタイトルがついていますね。

このようにしてSwiftUIではタイトルをつけることができます。