问题

I want to put a bar above the TabView, as shown. Currently I'm achieving this by coding it at the bottom on the main views. I'd like to unify the code and put it into the TabView as a one off.

我想在TabView上方放置一个条形图，如图所示。目前，我是通过在主视图底部编写代码来实现这一点。我想统一代码，并将其作为一个一次性操作放入TabView中。

My efforts to date display the bar at the top of the screen whilst the Tab Bar remains at the bottom, where it should be.

迄今为止，我的努力将该条形图显示在屏幕顶部，而Tab栏保持在应该的底部位置。

Can this be done?

这可以实现吗？

var body: some View {
    VStack {
        TabView(selection: $tabs.selectedTab) {
            LocationView()
                .tabItem {
                    Label("Location", systemImage: "globe.europe.africa")
                }
                .tag(TabChoice.location)
            CalculateView()
                .tabItem {
                    Label("Calculate", systemImage: "apps.ipad")
                }
                .tag(TabChoice.calculate)
            InstallView()
                .tabItem {
                    Label("Install", systemImage: "window.ceiling.closed")
                }
                .tag(TabChoice.install)
            ResultsView()
                .tabItem {
                    Label("Results", systemImage: "sun.max.fill")
                }
                .tag(TabChoice.results)
            AboutView()
                .tabItem {
                    Label("About", systemImage: "gear")
                }
                .tag(TabChoice.about)
        } // TabView
    }
}    

答案1

得分: -2

你可以使用ZStack，在TabBar上面添加一条线来实现这个效果。你可以像我的示例一样使用固定的高度，但也可以计算TabBar的实际高度，然后使用该值来偏移你的线条。在这里查看示例：https://stackoverflow.com/a/60136275/12764203

struct ContentView: View {
    var body: some View {
        ZStack {
            TabView {
                Tab1()
                    .tabItem {
                        Label("Tab1", systemImage: "star")
                    }
                Tab2()
                    .tabItem {
                        Label("Tab2", systemImage: "star")
                    }
            }

            VStack {
                Spacer()
                Rectangle()
                    .frame(maxWidth: .infinity, maxHeight: 1)
                    .foregroundColor(.red)
                    .padding(.bottom, 60)
            }
        }
    }
}

<details>
<summary>英文:</summary>

You could achieve this using a ZStack and adding a line on top of the TabBar. You can use a fixed height for this as in my example, however you might want to calculate the actual height of the TabBar and offset your line with that value instead. Take a look here: https://stackoverflow.com/a/60136275/12764203

    struct ContentView: View {
        var body: some View {
            ZStack {
                TabView {
                    Tab1()
                        .tabItem {
                            Label(&quot;Tab1&quot;, systemImage: &quot;star&quot;)
                        }
                    Tab2()
                        .tabItem {
                            Label(&quot;Tab2&quot;, systemImage: &quot;star&quot;)
                        }
                }
    
                VStack {
                    Spacer()
                    Rectangle()
                        .frame(maxWidth: .infinity, maxHeight: 1)
                        .foregroundColor(.red)
                        .padding(.bottom, 60)
                }
            }
        }
    }

[![TabBar line example][1]][1]


  [1]: https://i.stack.imgur.com/E5ZkR.png

</details>