SwiftUI TabbedView 只显示第一个选项卡的内容

Posted 2023-03-10

【中文标题】SwiftUI TabbedView 只显示第一个选项卡的内容

【英文标题】：SwiftUI TabbedView only shows first tab's content

【发布时间】：2019-06-06 22:04:39

【问题描述】：

我正在尝试使用以下简单代码构建TabbedView：

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

运行时，两个选项卡都可见并已启用，但第二个选项卡（“Foo”）的内容为空白。

【参考方案1】：

尝试添加标签：

    TabbedView 
        Text("Hello world")
            .tabItem  Text("Hello") 
            .tag(0)
        Text("Foo bar")
            .tabItem  Text("Foo") 
            .tag(1)
    

【讨论】：

这不能在 Xcode11Beta 上修复，请参阅：***.com/questions/56604914/…

谢谢。你到底是怎么想出这个修复的？

.tabItemLabel 已弃用，请改用 .tabItem，请更新您的答案

【参考方案2】：

我可以通过添加 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)
        
    

现在，点击“Tab 2”将显示“Tab 2！”在屏幕上，而不是空白屏幕。

这是使用 Xcode 11.0 beta 2 (11M337n)、macOS Catalina 10.15 Beta (19A487l)。

【参考方案3】：

在最新版本中你应该使用TabView:

   TabView 
        AnyView()
            .tabItem 
                Text("Label 1")
            
        AnyView()
            .tabItem 
                Text("Label 2")
            
    

【参考方案4】：

在 Xcode GM 中，TabbedView 被重命名为 TabView。所以现在在 SwiftUI 中创建标签栏的正确方法是：

  TabView 
        Text("Hello world")
            .tabItem  Text("Hello") 
            .tag(0)
        Text("Foo bar")
            .tabItem  Text("Foo") 
            .tag(1)
    

【参考方案5】：

尝试这种方式，但您不能使用来自 SF Symbols 的图标，使用来自 //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)