web-dev-qa-db-ja.com

SwiftUI TabbedViewは最初のタブのコンテンツのみを表示します

私は次の簡単なコードでTabbedViewを構築しようとしています：

TabbedView {
    Text("Hello world")
        .tabItemLabel(Text("Hello"))
    Text("Foo bar")
        .tabItemLabel(Text("Foo"))
}

実行すると、両方のタブが表示されて有効になりますが、2番目のタブの（ "Foo"）コンテンツは空白です。

iosswiftswiftui
10
Natanel

タグを追加してみてください：

    TabbedView {
        Text("Hello world")
            .tabItem { Text("Hello") }
            .tag(0)
        Text("Foo bar")
            .tabItem { Text("Foo") }
            .tag(1)
    }
21
Bradley Hilton

最新バージョンではTabViewを使用する必要があります：

   TabView {
        AnyView()
            .tabItem {
                Text("Label 1")
            }
        AnyView()
            .tabItem {
                Text("Label 2")
            }
    }
1
Sebastian J. Vogt

selection状態変数を追加し、それを選択に渡すことで、これを修正することができました。

struct ContentView : View {
    @State private var selection = 1

    var body: some View {
        TabbedView(selection: $selection) {
            Text("Tab 1!").tabItemLabel(
                Text("Tab 1")).tag(1)
            Text("Tab 2!").tabItemLabel(Text("Tab 2")).tag(2)
        }
    }
}

ここで、「タブ2」をタップすると、「タブ2！」が表示されます。空白の画面ではなく、画面上。

これはXcode 11.0 beta 2（11M337n）、macOS Catalina 10.15 Beta（19A487l）を使用していました。

1
Mike Buss

Xcode GMでは、TabbedViewの名前が TabView に変更されました。これがSwiftUIでタブバーを作成する正しい方法です：

  TabView {
        Text("Hello world")
            .tabItem { Text("Hello") }
            .tag(0)
        Text("Foo bar")
            .tabItem { Text("Foo") }
            .tag(1)
    }
1
Tony Hill

//この方法を試してください。ただし、SFシンボルのアイコンは使用できません。//icons8.comまたは別のプラットフォームのアイコンを使用してください。またはこのチュートリアルを見る https://www.youtube.com/watch?v=3PfCU5h5z94

                 struct ContentView : View {

                 var body : some View {

                     TabbedView {

                         Living_R()
                        .tabItemLabel(VStack {
                            Image("home")
                            Text("Home")
                          }).tag(0)

                    ContentView()
                        .tabItemLabel(VStack {
                            Image("search")
                            Text("Search")
                        }).tag(1)

                        Text("Info")
                        .tabItemLabel(VStack {
                            Image("page")
                            Text("Doc")
                        }).tag(2)
           }   
        }    
    }
0
R29-Future

//この方法を試してください。ただし、SFシンボルのアイコンは使用できません。//icons8.comのアイコンを使用してくださいstruct ContentView：View {

var body：一部のビュー{

TabbedView {Living_R（）

                        .tabItemLabel(VStack {
                            Image("home")
                            Text("Home")
                          }).tag(0)

                    ContentView()
                        .tabItemLabel(VStack {
                            Image("search")
                            Text("Search")
                        }).tag(1)

                        Text("Info")
                        .tabItemLabel(VStack {
                            Image("page")
                            Text("Doc")
                        }).tag(2)

        }
      }    
    }
0
R29-Future