web-dev-qa-db-ja.com

SwiftUIでTabbedViewを使用するにはどうすればよいですか？

struct ContentView : View {
    var body: some View {
        NavigationView {
            TabbedView {
                PasswordGenerator()
                    .tabItemLabel {
                        Image("KeyGlyph")
                        Text("Generator")
                }

                PasswordGeneratorSettings()
                    .tabItemLabel {
                            Image("SettingsGlyph")
                            Text("Settings")
                }
            }
        }
    }
}

これはコンパイルされませんが、Swift Essentialsビデオ（WWDCで54:30を参照）で使用されており、VStackの回避策のようないくつかの回避策を見ました（ただし、多くの欠陥があります） 、左のタブは左に遠すぎ、右のタブは右に遠すぎます。タブを切り替えると、最初に読み込まれた最初のタブのみが読み込まれ、他のタブは空白のままで、タグを使用しても効果がありません。ビューをロードする2つのタブがあり、画像とテキストがありますか？

iosswiftswiftuiswift5ios13
6
SmushyTaco

TabbedView()は廃止されました。代わりにTabView()を使用してください。

ビューを選択するために整数を使用すると、UIButtonとUIViewのtag()を使用する日々から、非常に大きな範囲のハードコードされた値を割り当てるよりも、何をしているのかを列挙する方が良いです。つまり、Int.min()からInt.max()です。これにより、コードが読みやすくなり、将来的にも保守しやすくなります。

TabView(selection: )はインデックスの選択に使用でき、次のように宣言されます。

public struct TabView<SelectionValue, Content> : View where SelectionValue : Hashable, Content : View {
    public init(selection: Binding<SelectionValue>?, @ViewBuilder content: () -> Content)
…

つまり、ハッシュ可能なコンテンツを含むインデックスを選択できます。

enumに準拠するHashableを使用して、タブのリストを含めることができます。この方法で、後でObservableを使用して、ビューの状態を制御およびロードすることができます。または、アプリの状態の一部として列挙型を使用します。あなたのニーズを満たす適切なソリューションを見つけるために使用できるリソースがたくさんあると思います。

 struct MainTabView: View {

 @State private var selection: Tabs = .profile

 private enum Tabs: Hashable {
     case content
     case profile
 }

 var body: some View {

    TabView(selection: $selection) {

        // Learn Content
        Text("The First Tab")
            .tabItem {
                Image(systemName: "book")
                Text("Learn")
        }.tag(Tabs.content)


        // The Users Profile View.
        ProfileView()
            .tabItem {
                Image(systemName: "person.circle")
                Text("Profile")
        }.tag(Tabs.profile)
    }

  }
}
2
RLoniello

TabbedViewは廃止されました。

代わりにTabViewを使用できます

struct AppTabbedView: View {
    @State private var selection = 3

    var body: some View {
        TabView (selection:$selection){
            Text("The First Tab")
                .tabItem {
                    Image(systemName: "1.square.fill")
                    Text("First")

            }
            .tag(1)
            Text("Another Tab")
                .tabItem {
                    Image(systemName: "2.square.fill")
                    Text("Second")
            }.tag(2)
            Text("The Last Tab")
                .tabItem {
                    Image(systemName: "3.square.fill")
                    Text("Third")
            }.tag(3)
        }
        .font(.headline)
    }
}
1
Amir.n3t

xcode 11 GM以降、このコードは機能します：（from https://developer.Apple.com/documentation/swiftui/tabview ）

TabView {
    Text("The First Tab")
        .tabItem {
            Image(systemName: "1.square.fill")
            Text("First")
        }
    Text("Another Tab")
        .tabItem {
            Image(systemName: "2.square.fill")
            Text("Second")
        }
    Text("The Last Tab")
        .tabItem {
            Image(systemName: "3.square.fill")
            Text("Third")
        }
}
.font(.headline)
1
Antoine Weber

TabbedViewは廃止され、TabViewに名前が変更されました。TabViewは次のように使用できます。

TabView {
    (Text("Tab 1!").tabItem {
         Text("First")
    })
    (Text("Tab 2!").tabItem {
         Text("Second")
    })
}
1
Awesome.Apple

'TabbedView'は、次のような方法で使用できます。

    struct TabView : View {

        @State private var selection = 1

        var body: some View {
            TabbedView (selection: $selection) {
                InboxList()
                    .tabItemLabel(selection == 1 ? Image("second") : Image("first"))
                    .tag(1)

                PostsList()
                    .tabItemLabel(Image("first"))
                    .tag(2)

                Something()
                    .tabItemLabel(Image("first"))
                    .tag(3)
            }
        }
    }

例がコンパイルされない理由はわかりませんが、各「タブ」のselection paramと.tagプロパティの両方がありません。

ところで、現在のXCodeバージョン（ベータ2）では、テキストと画像の両方をラベルとして表示することはできません。

0
Bogdan Farca