見出し画像

いざ! SwiftUI - 3 階層構造

Sceneを使った階層構造ということでコードが書かれています。

import SwiftUI

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            TabView {    
                ContentView()
                    .tabItem {
                        Label("Journal", systemImage: "book")                        
                    }     
                SettingsView()
                    .tabItem {           
                        Label("Settings", systemImage: "gear")         
                    }  
            }
        }
    }
}

TabViewで ContentView()、SettingsView()の二つのViewを作っています。

各タブに表示するイメージとテキストを tabItem(_:) モディファイアを使って文字と絵文字を表示するようにしています。画面は以下となります。

2つのタブが作られています。起動時にJournalが表示されていますが、Settingタブを選択するとSettingの内容が表示されます。

これはiOSの表示パターンですが同じコードをMacで使うときには別のレイアウトに自動で選択される方法もあります。

#if os(iOS)
        WindowGroup {
            TabView {
                ContentView()
                    .tabItem {
                        Label("Journal", systemImage: "book")
                    }  
                SettingsView()
                    .tabItem {
                        Label("Settings", systemImage: "gear")
                    }
            }
        }

#elseif os(macOS)
        WindowGroup {
            AlternativeContentView()
        }
        Settings {
            SettingsView()
        }
#endif

#if os(iOS)

#elseif os(macOS)

をつけてコードを書くことで切り替えが自動でされます。


おまけ。

TabViewですが、

    WindowGroup {
            ContentView()
        }

としておき

ContentView(
  TabView {
               detailView()
                    .tabItem {
                        Label("Journal", systemImage: "book")
                    }
               SettingsView()
                    .tabItem {
                    Label("Settings", systemImage: "gear")
                    }
  )
}

としても detailView()、SettingsView()がタブ分けされて表示されます。

この記事が気に入ったらサポートをしてみませんか?